标准文档流

最新推荐文章于 2024-09-24 09:51:57 发布

原创最新推荐文章于 2024-09-24 09:51:57 发布 · 442 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #css #文档流

css 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了CSS中块级元素与行内元素的特点及应用，包括如何通过display属性进行元素类型的转换，以及如何利用浮动和定位技术使元素脱离标准文档流。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、标准文档流等级森严。标签分为两种等级：

1、块级元素

●霸占一行，不于其他任何元素并列。

●能接受宽高设置，默认为父元素的100%

●div、h、li、dd、等

2、行内元素

●与其他行内元素并排

●不能设置宽高，默认为文字的宽度。

●span、a、b、i、u、em

3、容器级大多都是块级元素，大多文本级大多是行内元素，p是例外，p是块级元素

此外p标签很特殊，自带margin和padding

二、行内与块级的互相转化

display：inline转换为行内

display：block转换为块级

display：inline-block可以并排并且可以设置宽高

div属于块级元素：用div标签写的文本自己占一行。

span属于行级元素：用span标签写的文本在不换行，中间可以有空格。

*注意：直接在两个span标签之间用一个或多个空格，效果只有一个空格；还可以用“&nbsp”表示空格，需要多少个空格用几个&nbsp即可！*

代码演示如下：

<style type="text/css">
    * {
        margin: 0px;
        padding:0px;
    }
    div.c1,div.c2 { 
        height :50px;
        background-color: yellow;
        font-size: 50px;
        font-family: "楷体";
    }
    /*body {text-align: center} */
</style>
</head>
<body>
<div class="c1">将军战马今何在</div>
<div class="c2">坟头荒草几度春</div>
<span class="c3">喝了旺仔小牛奶</span>
<span class="c4">将来我一定比你强</span>
<hr>
<span class="c5">李挺</span>&nbsp<span>是一个文艺的小青年！</span>
</body>

实现效果如下：
这里写图片描述

如果想要让行内元素和块级元素不在遵循于本身的特性，除了转换(display)以外，还可以使用float 以及 position过float（浮动）和 position(定位) 可以让元素脱离”标准文档流”。

首先，我们来看看标准文档流现象

代码显示如下：

<style type="text/css">
        div {
            text-align:center;
            height :50px;
        background-color: blue;
        font-size: 50px;
        font-family: "楷体";
        }
    </style>
</head>
<div>标准文档流现象</div>
<img src="jingganglang.jpg" alt="狼叔叔" width="200px" height="200px">
<a href="http://blog.youkuaiyun.com/qq_33526679">我的优快云博客</a>
<img src="jingganglang.jpg" alt="狼叔叔" width="500px" height="200px">
</body>

效果显示如下：
这里写图片描述

当定义一个文本边框后代码如下：

        <style type="text/css">
        div.c1 {
            text-align:center;
            height :50px;
        background-color: blue;
        font-size: 50px;
        font-family: "楷体";
        }
        .c2 {
            width: 300px;
            height: 300px;
            border: 2px solid #ccc;
        }
        .c3 {
            width: 300px;
            height: 300px;
            border: 2px solid #ccc;
        }
    </style>
</head>
<div class="c1">标准文档流现象</div>
<div class="c2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="c3">OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO</div>
</body>

效果如图所示：
这里写图片描述