Web前端篇：CSS盒模型 - 好文

常用块元素由：
p,h1-h6,div,ul,ol,tr,li,form
常用内联元素由：
a,span,em,i,strong,u,
常见的内联块元素
input img

* 盒模型常用属性：
* 盒子模型中有四个属性：内容的宽高、内边距、外边距、边框。

<>1.padding

*
padding有四个方向，分别描述四个方向的padding。
padding-top:10px; padding-right:3px; padding-bottom:50px; padding-left:70px;
*
综合属性，多个属性用空格隔开。
/*上右下左四个方向*/ padding: 20px 30px 40px 50px ; /*上左右下*/ padding: 20px 30px
40px; /* 上下左右*/ padding: 20px 30px; /*上下左右*/ padding: 20px;
<>2.border

*

盒子模型的边框，在样式表中称为border。我们知道呢，我们用的手机，都会有手机壳。手机壳的样式、颜色、薄厚程度等都是这个壳的形态。同样呢，盒模型的边框也有三要素：
粗细线性样式颜色。
点击领取免费资料及课程 <https://jq.qq.com/?_wv=1027&k=5s2wUxY>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<title>border的使用</title> <style type="text/css"> .box{ width: 200px; height:
200px; /*1像素实线且红色的边框*/ border: 1px solid red; } </style> </head> <body> <div
class="box"></div> </body> </html>
* 按照三要素书写border border-width:3px; border-style:solid; border-color:red;
/*上面三句代码相当于一句代码：border:3px solid red;*/ /*同样,也可以分别设置边框四个方向的粗细线性样式
颜色,跟padding的四个方向一样。*/ /*上下5px 左右10px*/ border-width:5px 10px; /*上：实现右：点状下：双线
左：虚线*/ border-style: solid dotted double dashed; /*上：红色左右：绿色下：黄色*/
border-color: red green yellow;
* 按照方向划分 border-top-width: 10px; border-top-color: red; border-top-style:
solid; border-right-width: 10px; border-right-color: red; border-right-style:
solid; border-bottom-width: 10px; border-bottom-color: red;
border-bottom-style: solid; border-left-width: 10px; border-left-color: red;
border-left-style:solid; 相当于border:10px solid red;
*
清除默认边框：border:none;或者border:0; outline:none;

<>3.margin

*

在盒子模型中称为外边距，样式表中叫margin。表示盒子到另一个盒子的距离。既然是两者之间的距离，那么就会产生水平之间的距离和垂直之间的距离。同样情况下，外边距也有四个方向，跟padding类似。
点击领取免费资料及课程 <https://jq.qq.com/?_wv=1027&k=5s2wUxY>

*
水平方向的外边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<title>水平方向外边距</title> <style type="text/css"> span:nth-child(1){
background-color: green; margin-right: 20px; } span:nth-child(2){
background-color: red; margin-left: 30px; } </style> </head> <body> <span
class="box_l">左盒子</span><span class="box_r">右盒子</span> </body> </html>
#nth-child(1)，获取span子类，参数为第1个。
*
垂直方向外边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<title>Title</title> <style> div{ width: 200px; height: 200px; } #box1{
background-color: red; margin-bottom: 30px; } #box2{ background-color: black;
margin-top: 100px } #box3{ background-color: yellowgreen; } #box3 p{
background-color: goldenrod; margin-top: 30px; } </style> </head> <body>  <div id="box1"></div> <div
id="box2"></div> 注意：盒模型的外边距水平方向上不会出现问题，在垂直方向上会出现“**外边距合并**”的现象。
什么是外边距合并呢？在有些文献中说这种现象叫塌陷问题。只有在垂直方向上，当两个同级的盒子，在垂直方向上设置了margin之后，那么以较大者为准。

在网页排版中，外边距合并的问题也会时常出现，我们如何避免出现这种问题呢？

很简单，我们如果想让上下的两个盒子中间有间距，只需要设置一个盒子的一个方向即可。没必要去碰触外边距塌陷的问题，还得找解决问题的方法，得不偿失。

热门工具换一换