一、标准文档流
指元素根据块元素或行内元素的特性按从上到下,从左到右的方式自然排列。这也是元素默认的排列方式
标准文档流组成块级元素(block)
<h1>…<h6>、<p>、<div>、
列表内联元素(inline)
<span>、<a>、<img/>、<strong>...
内联标签可以包含于块级标签中,成为它的子元素,而反过来则不成立
二、display属性
block :块级元素的默认值,元素会被显示为块级元素,该元素前后会带有换行符
inline:内联元素的默认值。元素会被显示为内联元素,该元素前后没有换行符
inline-block:行内块元素,元素既具有内联元素的特性,也具有块元素的特性
none:设置元素不会被显示
display:block;使行级元素变为块级,块级还是块级 display:inline;使块级元素变为行级,行级还是行级 display:inline-bloc使用时既有行级可以在同一行,又有块级可以调高宽 但有间隔消不掉 display:none;
可以使用什么属性使块元素排在一行?
inline-block
float
三、float浮动属性
float:left;元素向左浮动 float:right;元素向右浮动 float:none;默认值。元素不浮动,并会显示在其文本中出现的位置
四、clear属性 清除浮动
left:在左侧不允许浮动元素
right:在右侧不允许浮动元素
both:在左、右两侧不允许浮动元素
none:默认值。允许浮动元素出现在两侧
五、overflow属性 溢出处理
visible:默认值。内容不会被修剪,会呈现在盒子之外
hidden:内容会被修剪,并且其余内容是不可见的 会强制如果有不影响但有超过的会直接修剪
scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余内容
auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容
六、清除浮动,防止父级边框塌陷的四种方法
1.浮动元素后面加空div,并设置clear:both;
简单,空div会造成HTML代码冗余(多余)
2.设置父元素的高度
简单,元素固定高会降低扩展性
3.父级添加overflow:hidden
简单,下拉列表框的场景不能用
4.父级添加伪类after
写法比上面稍微复杂一点,但是没有副作用,推荐使用
div:after{ /*添加HTML元素*/ content:""; display:block; clear:both; }