CSS3

内联元素的盒元素

• 内联元素不支持宽(width)和高(height)
• 支持水平方向的内边距和边框
• 外边距只支持水平方向不支持垂直方向

display的none和visibility的hidden有什么相同点和不同点?

1.display的none和visibility的hidden相同点是都会让元素消失隐藏不见
2.display的none和visibility的hidden不同点是display的none是占地方的而visibility的hidde是不占地方的。

1.overflow(溢出)

• visible 默认值。内容不会被修剪，会呈现在元素框之外。
• hidden 内容会被修剪，并且其余内容是不可见的。
• scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
• auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

2.文档流

每个页面都是文档，每个文档也是一个网页

块元素在文档流中如果设置宽和高就默认为设置的宽和高,设置padding会影响盒子的大小,如果没设置宽就默认父元素宽的100%，高的话是由内容决定，内容有多高，它就有多高
内联元素只占自身的宽和高

3.浮动

• left 元素向左浮动。
• right 元素向右浮动。
• none 默认值。元素不浮动，并会显示在其在文本中出现的位置。

内联浮动
所有的内联元素如果脱离文档流就会变成块元素，内联元素是不支持宽和高，如果变成块元素就会生效。

4.高度坍塌

本来父元素是由子元素抻开的，子元素设置了浮动之后，子元素就脱离文档流了，父元素无法抻开，就会形成高度塌陷

解决高度塌陷
BFC
父元素的垂直外边距不会和子元素重叠
开启BFC的元素不会被浮动元素所覆盖
开启BFC的元素可以包含浮动的子元素

如何开启BFC
设置元素浮动
设置元素的绝对定位
设置元素为inline-block
将元素的overflow设置为一个非visible的值（副作用最小的）
.box{
border:10px red solid;
overflow:hidden;
}