一、外边距的折叠
垂直外边距的重叠(折叠)
相邻的垂直方向外边距会发生重叠现象
1、兄弟元素
兄弟元素间的相邻垂直外边距会取两者之间的较大者(两者都是正值)
特殊情况:
① 如果相邻的外边距一正一负,则取两者的和
② 如果相邻的外边距都是负值,则取两者中绝对值较大的
兄弟元素之间外边距的重叠,对于开发是有利的,所以我们不需要处理
2、父子元素
父子元素间相邻外边距,子元素会传递给父元素(上外边距)
父子外边距的折叠会影响到页面的布局,必须要进行处理
二、行内元素的盒模型
行内元素不支持设置宽度和高度
行内元素可以设置padding,但是垂直方向padding不会影响页面的布局
行内元素可以设置border,但是垂直方向border不会影响页面的布局
行内元素可以设置margin,但是垂直方向margin不会影响页面的布局
display 用来设置元素显示的类
可选值:
inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block 将元素设置为行内块元素
行内块元素的特点:既可以设置宽度和高度又不会独占一行
table 将元素设置为一个表格
none 元素不在页面中显示
visibility 用来设置元素的显示状态
可选值:
visible 默认值,元素在页面中正常显示
hidden 元素在页面中隐藏不显示,但是依然占据页面的位置