梦入琼楼寒有月，行过石树冻无烟

CSS 盒子模型

2022-04-21
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
	p {
		background-color: aliceBlue ;
		/*宽*/
		width: 500px;
		/*边框*/
		border: 1px solid salmon;
		/*边距*/
		padding: 100px;
		/*右下移动*/
		margin: 10px;
	}
</style>
<body>
<p style="text-align:left;">Hello,Box model.<br>其实他就是一个盒子，将文字什么的包装到了一起</p>
</body>

盒子模型是CSS中的一个典型的页面不住，其本质就是一个盒子。主要包涵边缘、边界、填充、内容的呢高相关信息。

1.1 边缘（轮廓）

1.2.1 边框样式

1.1 虚线轮廓（dotted）

1
2
3
.p1 {
	outline-style: dotted;
	}

1.1.2 虚线轮廓（dashed）

1
2
3
.p2 {
	outline-style: dashed;
	}

1.2 实线轮廓（solid）

1
2
3
.p3 {
	outline-style: solid;
	}

1.3 双实线轮廓（double）

1
2
3
.p4 {
	outline-style: double;
	}

1.4 凹槽轮廓（groove）

1
2
3
.p5 {
	outline-style: groove;
	}

1.5 奎状轮廓（ridge）

1
2
3
.p6 {
	outline-style: ridge;
	}

1.6 嵌入轮廓（inset）

1
2
3
.p7 {
	outline-style: inset;
	}

1.7 外凸轮廓（outset）

1
2
3
.p8 {
	outline-style: outset;
	}

轮廓颜色

1
2
3
4
.p1 {
	outline-style: double;
	outline-color: #0000CD;
	}

轮廓大小

1
2
3
4
.p1 {
	outline-style: solid;
	outline-width: 10px;
	}
ID DE FA
dotted 虚线轮廓 outline-style
dashed 虚线轮廓
solid 实线轮廓
double 双实线轮廓
groove 凹槽轮廓
ridge 奎状轮廓
inset 嵌入轮廓
outset 外凸轮廓
轮廓颜色 outline-color
轮廓大小 outline-width

1.2 边界（边框）

1.2.1 边框样式

1
2
3
p.p1 {
	border-style: dotted;
	}
1
2
3
p.p2 {
	border-style: dashed;
	}
1
2
3
p.p3 {
	border-style: solid;
	}
1
2
3
p.p4 {
	border-style: double;
	}
1
2
3
p.p5 {
	border-style: groove;
	}
1
2
3
p.p6 {
	border-style: ridge;
	}
1
2
3
p.p7 {
	border-style: inset;
	}
1
2
3
p.p8 {
	border-style: outset;
	}
1
2
3
p.p9 {
	border-style: hidden;
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
p.p1 {
	/*上*/
	border-top-style:dotted;
	
	/*右*/
	border-right-style:dashed;
		
	/*下*/
	border-bottom-style:solid;
		
	/*左*/
	border-left-style:double;
	}
</style>
<body>
	<p class="p1">Hello</p>
</body>
1
2
3
4
5
6
7
8
9
<style>
p.p1 {
	border-style: outset;
	border-color: blue;
	}
</style>
<body>
	<p class="p1">Hello</p>
</body>
1
2
3
4
5
6
7
8
<style>
p.p1 {
	border: 1px solid blue;
	}
</style>
<body>
	<p class="p1">Hello</p>
</body>
ID DE FA
dotted 虚线边框 border-style
dashed 虚线边框
solid 实线边框
double 双实线边框
groove 凹槽边框
ridge 垄状边框
inset 嵌入边框
outset 外凸边框
hidden 无边框
border-top-style 上 边界样式
border-right-style 右
border-bottom-style 下
border-left-style 左
border-color 设置颜色
border 边框大小\格式\颜色

1.5 填充

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
p {
	background-color: #AFEEEE;
	}
.p1 {
	/*头部距离填充*/
	padding-top: 120px;
	
	/*底部距离填充*/
	padding-bottom: 100px;
	
	/*左距填充*/
	padding-left: 120px;
	
	/*右距填充*/
	padding-right: 120px;
	}
</style>
<body>
<p>新闻:</p>
<p class="p1">作为全球领先的水晶制造商之一，施华洛世奇目前旗下主要分为Swarovski Crystal Business（施华洛世奇水晶）、Tyrolit（泰利莱固结磨具）、Swarovski Optik（光学仪器）三大业务线。2019年，施华洛世奇集团年销售额为35亿欧元，其中水晶业务的年销售额为27亿欧元。</p>
</body>
ID DE FA
top 头部距离填充 padding
bottom 底部距离填充
left 左距填充

1.4 布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
.p1 {
	/*头部距离*/
	margin-top: 20px;
	
	/*底部距离*/
	margin-bottom: 1px;
	
	/*左距*/
	margin-left: 20px;
	}
</style>
<body>
<p>新闻:</p>
<p class="p1">作为全球领先的水晶制造商之一，施华洛世奇目前旗下主要分为Swarovski Crystal Business（施华洛世奇水晶）、Tyrolit（泰利莱固结磨具）、Swarovski Optik（光学仪器）三大业务线。2019年，施华洛世奇集团年销售额为35亿欧元，其中水晶业务的年销售额为27亿欧元。</p>
</body>
ID DE FA
top 头部距离 margin
bottom 底部距离
left 左距
⬅️ Go back