css盒⼦模型即内外边距与边框盒⼦模型
1、重要性：
CSS的三⼤重点：盒⼦模型、浮动、定位
2、盒⼦模型：内容、边框、外边距、内边距
3、本质;
⽹页布局本质：拼接盒⼦的过程  div +CSS
4、边框
(1)    、边框属性：边框厚度、边框的颜⾊、边框的线条样式
(2)    、边框厚度：border-top-width（上）
(3)    、边框的颜⾊： border-top-color: blue;（上）
(4)    、边框的线条样式：border-top-style: solid;
①、实线 solid
②、虚线  dashed
③、点线 dotted
④、双实线 double
(5)    、综合设置：border:1px solid red;
(6)    、边框会影响盒⼦的尺⼨
5、：内边距
div border属性1、定义：内边距：盒⼦中内容与边框之间的距离
2、⽤法：
(1)    、上内边距  padding-top: 20px;
(2)    、左内边距 padding-left: 15px;
(3)    、下内边距  padding-bottom: 25px;
(4)    、右内边距  padding-right: 10px;
(5)    、属性值个数不同
①四个属性值 ：上、右、下、左  padding: 50px 40px 30px 10px;
②三个属性值：上、左右、下  padding: 50px 40px 30px;
③两个属性值：上下、左右 padding: 50px 20px;
④⼀个属性值：上下左右 padding: 50px;
5、外边距
（1）定义：盒⼦的边框与其他元素或者浏览器边缘之间的距离
注意：div盒⼦默认有8px的外边距（只值距离浏览器的）
结论：盒⼦的外边距不会影响盒⼦的尺⼨
（2）
①四个属性值 ：上、右、下、左  margin: 50px 40px 30px 10px;
②三个属性值：上、左右、下  margin: 50px 40px 30px;
③两个属性值：上下、左右 margin: 50px 20px;
④⼀个属性值：上下左右 margin: 50px;
1. text-align:center：内容⽔平居中，可以让⾏内元素和⾏内块元素⽔平居中，不可以让块状元素居中
margin:auto：块状元素⽔平居中，必须设置宽度
1. 外边距合并：相邻块元素垂直外边距的合并：当上下相邻的两个块元素相遇时，如果上⾯的元素有下外边距margin-bottom，下⾯
的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，⽽是两者中的较⼤者 , 这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
      2、嵌套关系的块元素的外边距合并：对于两个嵌套关系的块元素，如果⽗元素没有上内边距及边
框，则⽗元素的上外边距会与⼦元素的上外边距发⽣合并，合并后的外边距为两者中的较⼤者。
避免嵌套关系外边距合并的⽅法：
1. 给⽗元素添加边框
2. 给⽗元素添加内边距
3. 给⽗元素添加overflow属性
2、盒⼦阴影：向div元素添加阴影
⽔平阴影垂直阴影影⼦模糊距离影⼦的颜⾊
box-shadow: 60px 30px 10px #ff0000;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。