CSS | 标准文档流

什么是标准文档流 ?

web 网页的制作，是个“流”，从上而下 ，像 “织毛衣”。

 

 标准文档流下的微观现象

1 空白折叠现象

多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙，如果在一行内写img标签，就解决了这个问题，但是我们不会这样去写我们的html结构。这种现象称为空白折叠现象。

两张照片：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

</style>
</head>
<body>
    <img src="images/lzl.jpg" width="250" height="444">
<img src="images/lzl.jpg" width="250" height="444">
</body>
<html

网页效果：

 

可以看出2张图片之间有间隙。因为img是2行写的，一行就不会出现这个问题。

 

2 高矮不齐，底边对齐

文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐。 （虽然高矮不齐，但是底边是对齐的）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

</style>
</head>
<body>
    <span>林志玲林志玲林志玲林志玲林志玲</span>
<img src="images/lzl.jpg" width="250" height="444">
</body>
<html>

网页效果：从效果中可以看出，文字加图片，会底边对齐

 

 

3 自动换行，一行写不满，换行写

如果在一行内写文字，文字过多，那么浏览器会自动换行去显示我们的文字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .t{
            font-size: 30px;
        }
</style>
</head>
<body>
<span><span class='t'>iconfont不是什么新技术了。我们知道web网页能使用的字体一直很少，很多时候设计师用ps做出来的效果图，里面的字体我们都没办法在网页上实现。其实网页里面可以使用自定义字体的。而且还是所有浏览器都支持，包括烦人的ie。</span></span>
</body>
<html>

网页效果：文字过多时，会自动换行

 

 

脱离标准流

标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！

css中一共有三种手段，使一个元素脱离标准文档流：

  • 浮动

  • 绝对定位

  • 固定定位

posted @ 2019-08-24 13:30  PythonGirl  阅读(271)  评论(0)    收藏  举报