网站布局——文档流

缺乏、安全感 2021-11-09 18:48 394阅读 0赞

一、什么是文档流？  
将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也称为普通流。

这个应该不难理解，HTML中全部元素都是盒模型，盒模型占用一定的空间，依次排放在HTML中，形成了文档流。

二、什么是脱离文档流？  
元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

三、怎么脱离文档流？

**文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。**

网站文档流分三种：

1.标准流

2.浮动

3.定位

1.标准文档流组成:

块级元素（block）:       <h1>…<h6>、、<div>、列表

内联元素（inline）:        、<a>、<img/>、...

注意：内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立。

<例如：h1中可以嵌套span元素，但是span中不能嵌套h1元素>

## display属性 ##

<table style="width:642px;"> 
 <tbody> 
 <tr> 
 <td style="border-color:#2163b4;text-align:center;vertical-align:middle;width:120px;"> 值 </td> 
 <td style="border-color:#2163b4;text-align:center;vertical-align:middle;width:521px;"> 说明 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#2163b4;text-align:center;vertical-align:middle;width:120px;"> block </td> 
 <td style="border-color:#2163b4;vertical-align:middle;width:521px;"> 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#2163b4;text-align:center;vertical-align:middle;width:120px;"> inline </td> 
 <td style="border-color:#2163b4;vertical-align:middle;width:521px;"> 内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#2163b4;text-align:center;vertical-align:middle;width:120px;"> inline-block </td> 
 <td style="border-color:#2163b4;vertical-align:middle;width:521px;"> 行内块元素，元素既具有内联元素的特性，也具有块元素的特性 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#2163b4;text-align:center;vertical-align:middle;width:120px;"> none </td> 
 <td style="border-color:#2163b4;vertical-align:middle;width:521px;"> 设置元素不会被显示 </td> 
 </tr> 
 </tbody> 
</table>

float属性

**可以使用什么属性使块元素排在一行？   1.inline-block           2.float**

![1648698-20190613113709973-697832586.png][]

设置浮动以后依次浮动之后会跟在前面浮动的元素后面，并且浮动以后层级提高，后面的元素会排上去，浮动元素有可能会盖在未浮动元素的上面。

转载于:https://www.cnblogs.com/jing-tian/p/11013870.html

[1648698-20190613113709973-697832586.png]: /images/20211109/9e02b6931c934b83a3f98cc2875e9aa4.png