您的位置: 首页  >  IT文章  >  (前端)html与css css 15、标准文档流

(前端)html与css css 15、标准文档流

分类: IT文章 • 2024-01-21 21:05:49

标准文档流

常用的Word文档就是一个经典的标准文档流，内容必须是从上往下，从左往右书写的，有一个光标控制，前面的大小或者内容发生变化，后面的内容会跟着发生一些位置变化。

制作的html网页就是一个标准文档流。

1、从微观上有特殊的性质

1）html文本之间有空白折叠现象。

2）文字、图片、表单元素等这些文本类型元素有一个特点:高低不齐，底边对齐。

(前端)html与css css 15、标准文档流

3）文字在盒子内书写完一行，会自动换行。

2、块级元素和行内元素

标准文档流将html分为了块级标签和行内标签。

块级标签：所有的容器标签都是块级标签，文本级标签里的p标签也是块级标签。

行内标签：除了p以外的所有文本级标签。

块级标签：body,div, h1,p ,ul,ol,li ,dl,dt,dd,table,tr,td等。

行内标签：a,span,img,input等文本类。

①块级标签特点：

a) 块级元素会独占一行，同行不会出现其他的同级标签。代码↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 40px;
            background-color: pink;
            margin-bottom: 10px;
            font-size: 28px;
            line-height: 40px;

        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
</body>
</html>
View Code

效果图↓

(前端)html与css css 15、标准文档流

b) 可以设置宽高。与行内标签对比代码↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 40px;
            background-color: pink;
            margin-bottom: 10px;
            font-size: 28px;
            line-height: 40px;

        }
        /*与行内标签对比*/
        span{
            width: 200px;
            height: 40px;
            background-color: pink;            
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <span>3</span>
</body>
</html>
View Code

效果图↓

(前端)html与css css 15、标准文档流可以看出行内标签无法设置宽高。

c) 嵌套的关系，子盒子不设置宽度，他会自动继承父亲内容宽度的100%代码↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            /*不设置宽度，继承父盒子*/
            /* 200px;*/
            height: 40px;
            background-color: pink;
            margin-bottom: 10px;
            font-size: 28px;
            line-height: 40px;

        }
        /*与行内标签对比*/
        span{
            width: 200px;
            height: 40px;
            background-color: pink;            
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <span>3</span>
</body>
</html>
View Code

效果图↓

(前端)html与css css 15、标准文档流没有给div设置宽度，他自动继承了body

②行内标签特点：

a) 行内标签不独占一行，可以与其他的行内元素并排在一行，代码↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        span{
            background-color: pink;
        }
    </style>
</head>
<body>
    <span>3</span><span>3</span><span>3</span>
    <span>3</span>
    <span>3</span>
    <span>3</span>
    <span>3</span>
    <span>3</span>
</body>
</html>
View Code

效果图↓

(前端)html与css css 15、标准文档流

b) 行内元素不能设置宽高，代码↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        span{
            width: 200px;
            height: 200px;
            padding: 10px;
            margin-right: 20px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <span>3</span><span>3</span><span>3</span>
    <span>3</span>
    <span>3</span>
    <span>3</span>
    <span>3</span>
    <span>3</span>
</body>
</html>
View Code

效果图↓

(前端)html与css css 15、标准文档流注意：行内元素只是不能设置宽高，其他的如border，paddin，margin都可以设置。

c) 行内元素不设置高度，不会自动继承父亲的宽度，只能通过增加内容将宽度撑开。代码↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        span{
            width: 200px;
            height: 200px;
            padding: 10px;
            border: 1px solid red;
            margin-right: 20px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <!-- 通过添加内容使行内元素宽度增加 -->
    <span>333333333333333333333333333333333333333333333333333333333333</span>
</body>
</html>
View Code

效果图↓

(前端)html与css css 15、标准文档流

③行内块标签:

既可以设置高度也可以排在同一行，如td

有一个属性可以在块级元素和行内元素之间进行转换

显示模式：display。标签在html网页里是以哪种形式进行渲染。

属性值: 块级block，行内inline，行内块inline-block

1、块级转行内 直接添加display: inline(不常用) 代码↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            /*不设置宽度，继承父盒子*/
            /* 200px;*/
            height: 40px;
            background-color: pink;
            margin-bottom: 10px;
            font-size: 28px;
            line-height: 40px;

        }
        .box{
            display: inline;
        }
        /*与行内标签对比*/
        span{
            width: 200px;
            height: 40px;
            background-color: pink;            
        }

    </style>
</head>
<body>
    <div class="box">1</div>
    <div>2</div>
    <span>3</span>
</body>
</html>
View Code

效果图↓

(前端)html与css css 15、标准文档流

2、行内转块级 直接添加display: block(常用) 代码↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        span{
            width: 200px;
            height: 200px;
            padding: 10px;
            border: 1px solid red ;
            margin-right: 20px;
            background-color: pink;
            /*行内转块*/
            display: block;
        }
    </style>
</head>
<body>
    <span>3</span><span>3</span><span>3</span>
    <span>3</span>
    <span>3</span>
    <span>3</span>
    <!-- 通过增加内容使宽度撑开 -->
    <span>33333333333333333333333333333333333333333333</span>
    <span>3</span>
</body>
</html>
View Code

效果图↓

(前端)html与css css 15、标准文档流

3、 转行内块 直接添加display: inline-block 代码↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        span{
            width: 200px;
            height: 40px;
            padding: 10px;
            border: 1px solid red ;
            margin-right: 20px;
            margin-bottom: 10px;
            background-color: pink;
            /*行内转块*/
            /*display: block;*/
            /*转行内块*/
            display: inline-block;
        }
    </style>
</head>
<body>
    <span>3</span><span>3</span><span>3</span>
    <span>3</span>
    <span>3</span>
    <span>3</span>
    <!-- 通过增加内容使宽度撑开 -->
    <span>33333333333333333333333333333333333333333333</span>
    <span>3</span>
</body>
</html>
View Code

效果图↓

(前端)html与css css 15、标准文档流

注意:标准文档流制作网页有局限，有很多布局效果不能完成。

解决办法: 让元素脱离标准流，既可以设置宽高，又可以一行排列。

脱离标准流三种方法: 浮动、绝对定位、固定定位。

相关推荐