盒子模型总结

1盒子模型

1. 盒子模型的组成
   内容 content
   内边距 padding
   边框 border
   外边距 margin （外边距不影响盒子大小）
   
2. 内容
   设置内容大小的CSS属性： width/height max-width/max-height / min-width/min-height
   块级元素内容区域默认宽度的计算规则
   
3. 内边距 padding
   设置内边距的CSS属性： padding-left/padding-right/padding-top/padding-bottom/padding
   行内元素只可以完美设置左右内边距
   
4. 边框 border
   设置边框属性：  
   
5. 外边距 margin
   ① 设置外边距的CSS样式： margin-left/margin-right/margin-top/margin-bottom/margin
   ② margin 值的规则： 块级元素左右外边距可以设置为 auto
   ③ 不同显示模式的元素设置外边距： 行内元素只可以设置左右外边距
   ④ margin 塌陷： 第一个子元素的上外边距、最后一个子元素的下外边距 塌陷到父元素上
   ⑤ margin 合并： 上面兄弟元素的下外边距和下面兄弟元素的上外边距 合并
   
6. 溢出内容的显示方式
   overflow / overflow-x / overflow-y
   值： visible   hidden   scroll  auto
   
7. 隐藏元素
   display: none;
   visibility: hidden;