CSS的盒子模型

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

想象一个盒子，它有：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性；

让我们俯视这个盒子，它有上下左右四条边，所以每个属性除了内容（content），都包括四个部分：上下左右；这四部分可同时设置，也可分别设置；内边距可以理解为盒子里装的东西和边框的距离，而边框有厚薄和颜色之分，内容就是盒子中间装的东西，外边距就是边框外面自动留出的一段空白。

---

1. margin(外边距)缩写形式

1. 写一个数值：上下左右四个方向均为指定数值
2. 写两个数值：第一个数=上下margin，第二个数=左右margin
3. 写三个数值：上、右、下 左边默认等于右边
4. 写四个数值：上、右、下、左 四个方向
5. margin: 0 auto; 块级盒子，在父容器中水平居中

2. border(边框)

1. 三个属性值：宽度、样式、颜色，原则上不能少。顺序可随意安排。
2. 可以通过top、right、bottom、left分别修改四个方向

3. padding(内边框)

1. padding为内边距，会是盒模型的整个可视区域变大，使用时需注意盒模式实际显示的区间大小。
2. 其他使用同margin

4. border-radius 圆角

1. 可以接受8个属性值： X轴(左上、右上、右下、左下)/Y轴
   例如：border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px;
2. 只写X轴时，Y轴默认等于X轴。只写左上角，默认=右下角。只写右上角，默认=左下角
   例如：border-radius: 50px 0px ;
   =border-radius: 50px 0px 50px 0px;
   =border-radius: 50px 0px 50px 0px/50px 0px 50px 0px;
3. 只写一个数，默认8个值均相等。

5. box-shadow 盒子阴影

1. 六个属性值，空格分割：①x轴阴影距离：(必选) 可正可负，正——右移 负——左移②y轴阴影距离：(必选) 可正可负，正——下移 负——上移③阴影模糊半径：(可选) 只能为正，默认为0。数值越大，阴影越模糊>④阴影扩展半径：(可选) 可正可负，默认为0。数值增大，阴影扩大。数值减小，阴影缩小⑤阴影颜色：(可选) 默认为黑色⑥内外阴影：(可选) 可选值：inset(内阴影) 默认为外阴影box-shadow: 0px 0px 10px 0px blue inset;
2. border-image 图片边框，十个属性：① 图片路径：url()② 图片切片宽度：4个值，分别代表上、右、下、左，四条切线。通过四条切线切割后，会把图片分成九宫格，四个角分别对应边框的四角(不会进行任何拉伸)，四个边分别对应边框的四边(根据设置进行拉伸/平铺/铺满)。写的时候，不能带px单位③ 图片边框的宽度：4个值，分别代表上、右、下、左四条边框，写的时候，必须带px单位④ 边框背景重复方式：stretch(拉伸)、round(铺满)、repeat(平铺)⑤铺满和平铺区别平铺：会保持原有四条边的宽度，进行平铺。可能导致角落处无法显示完整一个图标;铺满：会对四条边进行适当的拉伸压缩，确保可以正好显示完全。⑥属性值写法：border-image: ① ②/③px ④;第②部分可以只写1个、2个、3个，判断方式同margin
   border-image:url(img/border.png) 27/27px stretch;
   -webkit-border-image: url(img/border.png) 27/27px repeat;

6. 盒子排列的标准流模式：

7. Float：浮动

浮动可以让元素摆脱原有的标准流模式，而使块级元素在同一层共存；Left，左浮动  right：右浮动  none：不浮动

1. clear:清除浮动

Left，清除左浮动  right：清除右浮动  both：清除双向浮动。一般情况直接就清除both

1. 盒子在标准流中定位的原则：

1. 水平排放的盒子，水平间距是margin的累加
2. 垂直排放的盒子，垂直间距是和并的（取最大值）
3. 嵌套盒子的margin分两种情况：父容器未指定高度，子容器的margin会把父容器撑大；父容器指定了高度，margin会把子容器撑出父容器