CSS标准文档流与脱离文档流

2021-01-11 本文已影响0人前端萧萧

标准文档流

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

标准流的微观现象：

空白折叠现象：
在 html 文件输入文本，多个空格会被合并成一个空格显示到浏览器页面中。这种现象称为空白折叠现象。
高矮不齐，底边对齐：
文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐；
自动换行，一行写不完时，换行写：
如果在一行内写文字过多，超过界面，那么浏览器会自动换行去显示我们的文字。

标准文档流等级

分为两种等级：块级元素和行内元素；

块级元素：

霸占一行，不能与其他任何元素并列
能接受宽、高
如果不设置宽度，那么宽度将默认变为父亲的100%，即和父亲一样宽

行内元素：

与其他元素并排
不能设置宽、高。默认的宽度就是文字的宽度

在HTML中，标签分为：文本级和容器级；
文本级：p、span、a、b、i、u、em
容器级：div、h系列、li、dt、dd

CSS的分类和上面的很像，就p不一样：所有的文本级标签，都是行内元素，除了p，p是个文本级，但是是个块级元素。所有的容器级标签都是块级元素。

块级元素与行内元素的相互转换

块级元素可以设置为行内元素；行内元素也可以设置为块级元素。
举个例子：

div {
  display: inline;
  background-color: pink;
  width: 400px;
  height: 400px;
}

display是显示模式，用来改变元素的行内、块级性质inline就是“行内”，一旦给一个标签设置display:inline;
那么这个标签立即变为行内元素。

此时div和span没有什么区别;
此时的div不能设置宽度和高度（即使设置了也并不显示出来);
此时div可以和别人并排;

同理

span {
   display: block;
   width: 300px;
   height: 300px;
   background-color: green;
}

“block”是“块”的意思;

span标签变为块级元素，与div无异；
span能够设置高度和宽度；
span必须霸占一行，别人不能与之并排；
如果不设置宽度，那么将撑满父亲。

脱离标准文档流

三种方法：
1）浮动
浮动的元素会脱离文档流；
新建一个文档在页面上添加两个div给div分别加上class。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>
</html>

给div设置一个宽高及背景颜色给one左浮动

<style>
* {
/*清除默认边距*/
margin: 0;
padding: 0;
       }
div {
width: 200px;
height: 200px;
       }
.one {
float: left;
background-color: orange;
       }
.two {
background-color: yellow;
       }
</style>

然后用Chrome打开结果会是这样