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;