园龄：2年5个月粉丝：0 关注：1

📂Web前端 / CSS

🔖CSS

2022-11-04 21:54阅读: 89评论: 0推荐: 0

【 CSS 】样式属性

合集 - Web前端(3)

1.【 CSS 】样式嵌入2022-11-03 2.【 CSS 】常用选择器2022-11-03

3.【 CSS 】样式属性2022-11-04

CSS 样式属性

边框（border)

border

border:2px solid red；---宽度、样式、颜色

view code

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<div style="border:1px solid red">anyway!!!</div>
	<div style="border:1px dotted green">anyway!!!</div>
</body>
</html>

它类属性：height、width、line-height color font-size font-weight

它类：

height: 100px;---标签高度

width: 200px; ---标签宽度

font-size: 24px; ---字体大小

text-align: center; ---文字左右居中

line-height: 100px; ---垂直高度根据标签高度

color: mediumvioletred; ---字体颜色

font-weight: bold; ---字体加错

view code

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<div style="
	height: 100px;/*标签高度*/
	width: 200px;/*标签宽度*/
	font-size: 24px;/*字体大小*/
	text-align: center;/*文字左右居中*/
	line-height: 100px;/*垂直高度根据标签高度*/
	color: mediumvioletred;/*字体颜色*/
	font-weight: bold; /*字体加错*/
	border:1px dotted red;">anyway!!!</div>
</body>
</html>

浮动（float）

float

float: left;---左浮动

float: right;---右浮动

view code

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0 0;
        }
    </style>
</head>
<body>
	<div style="background-color:red;width:50%;float: left">left</div>
	<div style="background-color:orangered;width:50%;float: right">right</div>
</body>
</html>

显示（display）

元素	描述
块级元素(block)	块元素是一个元素，占用了全部宽度，在前后都是换行符;总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示
内联元素(inline)	内联元素只需要必要的宽度，不强制换行;和相邻的内联元素在同一行

display

display: none; ---让标签消失

display: inline; ---此元素会被显示为内联元素，元素前后没有换行符

display: block; ---此元素将显示为块级元素，此元素前后会带有换行符

display: inline-block; ---行内块元素

view code

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="margin: 0 auto">
<span style="display: inline-block;background-color: orange;height: 100px;width: 100px">anyway!!!</span>
<a style="background-color: orange">爱我中华</a>
 
</body>
</html>

边距（margin、padding）

margin（外边距）

'margin-top'、'margin-right'、'margin-bottom'、'margin-left',按照顺时针方向罗列的.

padding（内边距）

'padding-top'、'padding-right'、'padding-bottom'、'padding-left',按照顺时针方向罗列的.

view code

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="margin: 0 0">
<div style="border: 1px solid red;height: 200px; width: 400px;margin: 0 auto">margin
    <div style="border: 1px solid blue;margin: 50px auto;padding-left: 100px; padding-top: 30px">
        padding
    </div>
</div>
</body>
</html>

示意图：

上一篇【 CSS 】样式嵌入

下一篇【 Docker 】部署构建私有仓库Harbor

本文作者：一条长江

本文链接：https://www.cnblogs.com/Qmoo/p/16856233.html

posted @ 2022-11-04 21:54 一条长江阅读(89) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

一条长江

【 CSS 】样式属性

CSS 样式属性

公告

常用链接

最新随笔

我的标签

合集 (2)

随笔分类 (5)

随笔档案 (5)

文章分类 (0)

阅读排行榜

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	</head>
	<body>
	<div style="border:1px solid red">anyway!!!</div>
	<div style="border:1px dotted green">anyway!!!</div>
	</body>
	</html>