浅谈标准流

莱德哈特

于 2024-02-23 00:56:40 发布

阅读量1.6k

点赞数 46

分类专栏：前端开发学习文章标签： html 前端 html5 css css3

本文链接：https://blog.csdn.net/2301_80174941/article/details/136245306

版权

前端开发学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的标准流概念，包括块级元素、行内元素、行内块元素的特点，以及如何通过浮动和定位让元素脱离标准流。同时提到了如何通过clear属性清除浮动，对于理解和运用CSS布局至关重要。

摘要由CSDN通过智能技术生成

一、何为标准流

标准流也称文档流，就是标签按照规定好的默认方式排列。默认的从上至下，从左至右的排列顺序就是标准流。

在网页布局中，常常最大一级的父盒子通过标准流布局，内部的子盒子通过脱离标准流（脱标）的方式布局。

二、标准流中的元素

1、块级元素

常见元素：<div>、<p>、<h1>~<h6>、<ul>、<ol>等

特点：1、独占一行

2、可直接更改其高度和宽度

3、宽度默认是父元素的100%

4、内部可以放行内元素和块元素

注意：文字类块元素如<p></p>和<h1></h1>内部不可放块元素

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            background-color: pink;
        }

        h2 {
            width: 400px;
            height: 100px;
            background-color: skyblue;
        }

        p {
            width: 300px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>123</div>
    <h2>456</h2>
    <p>789</p>
</body>

2、行内元素

常见元素：<a>、<span>、<strong>

特点：1、一行内可以有多个

2、无法直接更改其高度和宽度

3、宽度默认是内容的宽度

4、内部可以放文本或行内元素

注意：1、链接内无法再放链接

2、a元素可直接设置宽高，但最好改为块级或行内块元素再设置

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            background-color: pink;
        }

        strong {
            background-color: skyblue;
        }

        a {
            background-color: purple;
        }
    </style>
</head>

<body>
    <span>123123131231321321</span>
    <strong>4564656546565</strong>
    <a>78997898789789</a>
</body>

</html>

3、行内块元素

常见元素：<img>、<input>、<td>

特点：1、一行内可以放多个，但相邻两个行内块元素之间存在白色空隙

2、宽度默认为内部内容宽度

3、可以直接更改其宽度和高度

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 300px;
            height: 200px;
        }
    </style>
</head>

<body>
    <img src="../image/arr.png"></img>
    <img src="../image/arr.png"></img>
</body>

</html>

4、元素间相互转换

通过display属性可实现元素间的相互转换。

display: block 转换为块级元素

display:inline 转换为行内元素

display:inline-block 转换为行内块元素

三、脱离标准流（脱标）

元素脱离标准流后会浮动起来，在标准流上方，不再占用标准流的空间，后续元素会补上脱离标准流元素的位置空间。脱标的方法主要有浮动和定位两种。

1、浮动

通过属性float可以使元素浮动起来，属性值为left为靠左浮动，属性值为right为靠右浮动。

特点：1、浮动盒子脱离了标准流的控制，移动指定位置（俗称脱标）。浮动的盒子不在保留原先的位置，其余不浮动盒子会补充其位置

2、所由浮动盒子会在同一行显示，上边缘对齐，之间没有空隙。直到显示不开自动换行

3、任何类型的元素都可添加浮动属性，浮动后具有行内块元素相似的特性。行内元素转换后可直接设置宽高，块级元素浮动后块级视内容而定

注意：1、一个盒子浮动，其余兄弟盒子也需要跟着浮动。

2、浮动盒子会遮住后边的标准流，不会遮住前边的标准流

3、浮动属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及到父元素边缘或另一个浮动框边缘

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 浮动元素通常与标准流父级元素搭配使用。网页布局通常先上下布局标准流父元素，再布局左右浮动子元素 */
        /* 一个盒子浮动，其余兄弟盒子也要跟着浮动。浮动盒子会遮住后边的标准流，不会遮住前边的标准流。 */
        /* 浮动特性：
        1、浮动盒子脱离了标准流的控制，移动指定位置（俗称脱标）。浮动的盒子不在保留原先的位置，其余不浮动盒子会补充其位置 
        2、所由浮动盒子会在同一行显示，上边缘对齐，之间没有空隙。直到显示不开自动换行
        3、任何类型的元素都可添加浮动属性，浮动后具有行内块元素相似的特性。行内元素转换后可直接设置宽高，块级元素浮动后块级视内容而定*/
        * {
            padding: 0;
            margin: 0;
        }

        div {
            width: 300px;
            height: 500px;
            background-color: red;
        }

        /* 浮动为float，值有left right none
        浮动属性用于创建浮动框，将其移动到一边
        直到左边缘或右边缘触及到父元素边缘或另一个浮动框边缘
        加了浮动的块级元素位于同一行 */
        .left {
            float: left;
        }

        .right {
            float: right;
        }
    </style>
</head>

<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

</html>

2、定位

定位可以让盒子自由的在某个盒子内部移动位置，也可以固定在页面内某个位置，并且可以压住其他盒子。

定位是在摆放盒子，按照定位方式移动盒子。定位=定位模式+边偏移。

定位通过css中的position属性来设置，属性值有静态定位static(为默认，无定位，遵循标准流排列方式),相对定位relative,绝对定位absolute,固定定位fixed。

边偏移有top,bottom,left,right四个属性，属性值为距边线偏移量。

其中绝对定位和固定定位时脱标的。

布局页面时常常采用”子绝父相“的方式。

1、绝对定位

绝对定位脱离标准流，不占有原先位置。

盒子根据有定位的祖先元素进行定位。若绝对定位盒子有祖先元素但祖先元素无定位，则依然按照相对浏览器进行定位。若绝对定位盒子有祖先元素且祖先元素有定位，则按照相对最近一级有定位祖先盒子进行定位。若绝对定位盒子无父级元素，则按照相对浏览器距离进行定位。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        /* 若绝对定位盒子无父级元素，则按照相对浏览器距离进行定位 */
        .box {
            position: absolute;
            top: 100px;
            right: 20px;
            width: 50px;
            height: 30px;
            background-color: pink;
        }

        /* 若绝对定位盒子有祖先元素但祖先元素无定位，则依然按照相对浏览器进行定位 
           若绝对定位盒子有祖先元素且祖先元素有定位，则按照相对最近一级有定位祖先盒子进行定位 
           绝对定位脱离标准流，不再占有原先位置*/
        .father {
            /* position: relative; */
            height: 300px;
            width: 500px;
            background-color: red;
        }

        .son {
            position: absolute;
            bottom: 200px;
            right: 30px;
            width: 60px;
            height: 30px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

2、固定定位

绝对定位脱离标准流，不占有原先位置。

固定定位以浏览器的可视窗口为参照点移动元素，跟父元素没有任何关系，不随滚动条滚动。

固定定位可看作一种特殊的绝对定位。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 固定定位
       固定定位的特点： 
    1. 以浏览器的可视窗口为参照点移动元素。 
       跟父元素没有任何关系 ，不随滚动条滚动。 
    2. 固定定位不在占有原先的位置。 
       固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。 */
        div {
            position: fixed;
            top: 300px;
            right: 0;
            width: 300px;
            height: 400px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div></div>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
</body>

</html>

3、相对定位

相对定位脱离标准流，占有原先位置，常作为绝对定位的父级元素。

相对定位原理是盒子相对于其原位置移动。

相对定位不脱标，其他盒子依然以标准流对待相对定位的盒子，会被其掩盖。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 1、相对定位原理是盒子相对于其原位置移动
           2、相对定位不脱标，其他盒子依然以标准流对待相对定位的盒子，会被其掩盖
           3、常作为绝对定位的父级元素 */
        .box1 {
            position: relative;
            top: 100px;
            left: 50px;
            width: 200px;
            height: 300px;
            background-color: pink;
        }

        .box2 {
            width: 200px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>