CSS盒子模型（二）

1. 盒子内容区（content）

CSS 属性名	功能	属性值
width	设置内容区域宽度	长度
max-width	设置内容区域的最大宽度	长度
min-width	设置内容区域的最小宽度	长度
height	设置内容区域的高度	长度
max-height	设置内容区域的最大高度	长度
min-height	设置内容区域的最小高度	长度

注意：

max - width 、 min - width 一般不与 width 一起使用。

max - height 、 min - height 一般不与 height 一起使用。

2. 关于默认宽度  

所谓的默认宽度，就是不设置 width 属性时，元素所呈现出来的宽度。  

总宽度 = 父的 content — 自身的左右 margin 。

内容区的宽度 = 父的 content — 自身的左右 margin — 自身的左右 border — 自身的左右padding 。 

3. 盒子内边距（padding）

CSS 属性名	功能	属性值
padding-top	上内边距	长度
padding-right	右内边距	长度
padding-bottom	下内边距	长度
padding-left	左内边距	长度
padding	复合属性	长度，可以设置 1 ~ 4 个值

 padding 复合属性的使用规则：

1. padding: 10px ; 四个方向内边距都是 10px 。

2. padding: 10px 20px ; 上 10px ，左右 20px 。（上下、左右）

3. padding: 10px 20px 30px ; 上 10px ，左右 20px ，下 30px 。（上、左右、下）

4. padding: 10px 20px 30px 40px ; 上 10px ，右 20px ，下 30px ，左 40px 。（上、右、下、左）

注意点：  

1. padding 的值不能为负数。

2. 行内元素 的 左右内边距是没问题的，上下内边距不能完美的设置。

3. 块级元素 、 行内块元素 ，四个方向 内边距 都可以完美设置。

4. 盒子边框（border）

CSS 属性名	功能	属性值
border - style	边框线风格 复合了四个方向的边框风格	none ： 默认值 solid ： 实线 dashed ： 虚线 dotted ： 点线 double ： 双实线 ......
border - width	边框线宽度 复合了四个方向的边框宽度	长度，默认 3px
border - color	边框线颜色 复合了四个方向的边框颜色	颜色，默认黑色
border	复合属性	值没有顺序和数量要求。
border - left border - left - style border - left - width border - left - color border - right border - right - style border - right - width border - right - color border - top border - top - style border - top - width border - top - color border - bottom border - bottom - style border - bottom - width border - bottom - color	分别设置各个方向的边框	同上

边框相关属性共 20 个。 ( border - style 、 border - width 、 border - color 其实也是复合属性。)

5. 盒子外边距_margin

CSS 属性名	功能	属性值
margin - left	左 外边距	CSS 中的长度 值
margin - right	右 外边距	CSS 中的长度值
margin - top	上外边距	CSS 中的长度值
margin - bottom	下 外边距	CSS 中的长度值
margin	复合属性，可以写 1~4 个值，规律同 padding （顺时针）	CSS 中的长度值

5.1 margin 注意事项

1. 子元素的 margin ，是参考父元素的 content 计算的。（因为是父亲的 content 中承装着子元素）

2. 上 margin 、左 margin ：影响自己的位置；下 margin 、右 margin ：影响后面兄弟元素的位置。

3. 块级元素、行内块元素，均可以完美地设置四个方向的 margin ；但行内元素，左右 margin 可以完美设置，上下 margin 设置无效。

4. margin 的值也可以是 auto ，如果给一个 块级元素 设置左右 margin 都为 auto ，该块级元素会在父元素中水平居中。

5. margin 的值可以是负值。

5.2 margin 塌陷问题

什么是 margin 塌陷？

第一个子元素的 上 margin 会作用在父元素上，最后一个子元素的 下 margin 会作用在父元素上。

如何解决 margin 塌陷？

方案一： 给父元素设置不为 0 的 padding 。

方案二： 给父元素设置宽度不为 0 的 border 。

方案三：给父元素设置 css 样式 overflow:hidden

5.3 margin 合并问题  

什么是 margin 合并？

上面兄弟元素的 下外边距 和下面兄弟元素的 上外边距 会合并，取一个最大的值，而不是相加。

如何解决 margin 塌陷？

无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了。