1.标准文档流
指:元素根据块元素或行内元素的特性按从上到下,从左到右的方式自然排列.
2.display属性
2.1display属性的应用
block:块级元素的默认值,元素会被显示为块级元素,该元素前后带有换行符.
inline:行内元的默认值,元素会被显示为行内元素,该元素没有换行符.
imline-bolck:行内块元素,元素既具有行内元素的特征,也具有块内元素的特征.
none:设置元素不会被显示
3.float属性
left:元素相左浮动.
right:元素相有浮动.
none:默认值.元素不会浮动,并会显示在其文件中出现的位置.
4.清除浮动
4.1.clear属性
left:在左侧不予许浮动元素.
right:在右侧不予许浮动元素.
both:在左在右侧不予许浮动元素.
none:默认值,允许浮动元素.
4.2.解决父级边框塌陷问题
1)添加div
2)设置高度
3)添加overflow属性
visible:默认值,内容不会被修剪,会呈现在盒子之外.]
hidden:内容会修剪,并且其余内容不可见的
scroll:内容会被修剪,但是浏览器会滚动条以便查看其余内容.
auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余内容.
4)父级元素添加伪类after
5.inline-bolck与浮动的区别:
display:inline-bolck 可以狼元素排在一行,并且支持宽度和高度,代码实现起来很方便,添加该属性的元素在标注文档中,不需要清除浮动.
folat:可以狼元素排在一行,并且支持宽度和高度,可以决定排列方向.
display:inline-block:位置方向不可控制,会解析空格.
folat:浮动以后元素脱离文档流,会对周围元素产生影响,必须在他的父级上添加清除浮动的样式.