【CSS】CSS入门——标准流

html标签有两种形式：行内元素和块级元素，下面主要看看行内元素的<span>标签和块级元素的<div>标签。

行内元素<span>，在html中以<span></span>形式出现，让我么举个栗子：

<span style="font-family:Microsoft YaHei;font-size:18px;"><body>
    <span  >栏目一</span>
    <span >栏目二</span>
    <span >栏目三</span>
    <span >标题栏</span> 
    body选择器 
</body></span>

效果如下：

【CSS】CSS入门——标准流

块级元素<div>，在html中以<div></div>形式出现，其中的内容占据网页的一整行，看下面这个栗子：

<span style="font-family:Microsoft YaHei;font-size:18px;"><body>
    <div  >栏目一</div>
    <span >栏目二</span>
    <span >栏目三</span>
    <span >标题栏</span> 
    body选择器 
</body></span>

效果如下：

无论是行内元素还是块级元素，都只是一个容器而已，并不代表某种样式，你可以在这个容器里面添加你需要的样式。

行内元素转块级元素，看代码：

<span style="font-family:Microsoft YaHei;font-size:18px;"><body>
    <div  >栏目一</div>
    <span class="test_change">栏目二</span>
    <span >栏目三</span>
    <span >标题栏</span> 
    body选择器 
</body></span>

<span style="font-family:Microsoft YaHei;font-size:18px;">.test_change {
    display:block;
}</span>

效果显示：

【CSS】CSS入门——标准流

html标准流

就像上面的代码一样，html中栏目一、栏目二、栏目三依次从上到下排列，所以在页面输出的时候也是按照这个顺序输出的，这就是一个标准流。

秒客网

【CSS】CSS入门——标准流

相关文章