• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

互联网 diligentman 4天前 3次浏览

标准文档流

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

标准流的微观现象:

  • 空白折叠现象
    在 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打开 结果会是这样

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

可以看出给one左浮动后two消失不见了,这时审查元素看一下

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

会发现two跑到one下面去了,这是因为给one盒子左浮动了。浮动的元素不会占空间所以two占去了one的位置。

2)绝对定位

添加三个div分别加上class

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

给one设置绝对定位 并添加top:110px;left:150px;

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

可以看到one是可以飘在他们上面的

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

3)固定定位

把one改成固定定位

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

刷新浏览器

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

发现他和absolute一样;唯一不同的就是他是固定在浏览器上的,fixed不会随着浏览器滚动条而滚动;

{{o.name}}


{{m.name}}


喜欢 (0)