(浏览器解析的)文档流与CSS

1.浏览器行为（文档流）：元素的排放：将窗体自上而下分成一行行，每行中按自左至右的顺序排列。

2.显示方式：1.元素在文档流中。2.元素脱离文档流而显示（float，绝对定位，static).

3.元素分类：内联元素（inline）与块级元素（block）。

块级元素(非flaot)独占一行，默认width=父级元素的100%宽度 - border - padding。

默认height:包含元素的高度 + border + padding，没有则为0。

可人为设置宽度和高度。

内联元素，不独占一行，默认width,height:auto(根据其子元素浏览器自动调整），无法人为设置。

块级元素(flaot)，不独占一行，挨个排列。位置接在内联元素后面（考虑文档流中内联元素），可与块级元素（非float）重叠，即排列是无视文档流中块级元素。

总结：块级转内敛：float，但脱离了文档流。

display:inline.

内敛转块级：display:block。

4.left,margin-left,height 如2px,20%(父元素的百分比）,auto。

非float，positon(relative)

其原始位置在文档流中依旧存在着。

left:20px;left:20%;

margin-left:20px;margin-left:20%;margin-left:auto;margin-right:auto;

height:20px;不能设置20%;

非float，positon(absolute)

其原始位置在文档流中不存在了。(因为absolute）

left:20px;left:20%;

margin-left:20px;margin-left:20%;不能设置margin-left:auto;margin-right:auto;

height:20px;height:20%;

float，positon(relative)

其原始位置在文档流中不存在了。（因为float）

left:20px;left:20%;

margin-left:20px;margin-left:20%;不能设置margin-left:auto;margin-right:auto;

height:20px;不能设置20%;

float，positon(absolute)

其原始位置在文档流中不存在了。(因为absolute，float）

left:20px;left:20%;

margin-left:20px;margin-left:20%;不能设置margin-left:auto;margin-right:auto;

height:20px;height:20%;

总结：元素在文档流中，才可以设置auto。在abosolute时，才有相对父元素，才能height：20%。

5.对齐

vertical-align:内联元素间的垂直关系。

111<img src="0.jpg" style="vertical-align:middle"/>666

（111，666在图片垂直方向的中部）

(未脱离文档流)text-align:内联元素相对父元素（块级元素）的水平位置。因为内联元素如果在内联元素中，其外部的内联元素无width设置。

<div>111</div> 无效

</div>

<span>111</span> 无效

</span>

<span>111</span> 有效

</div>

怎样让一个大号字体，一张图片，一个小号字体，垂直水平居中？

1.用一个div包住这3个元素，把这个div设为display:table-cell，vertical-align:middle。这个div的父元素设成display:table.这样它就垂直居中了。

2.将table-cell的div中的块级元素（h1,h6)设为display:inline,这样就可以在其父元素处设置text-align:center;使其水平居中。在img处设置vertical-align:middle;图片对齐字体。

</div>

7.如果在div的style中把visibility设为hidden则div隐藏，但是它会占据空白空间，而如果设置成display：none则不占据空白空间；

转载于:https://blog.51cto.com/bysowhat/1567896

(浏览器解析的)文档流与CSS

相关推荐