块元素和行内元素的说明及转换

简介: 行内元素(inline element),又叫内联元素,内联元素只能容纳文本或者其他内联元素,常见的行内元素,.块元素(block element),块元素一般都是从新行开始,可以容纳文本,其他内联元素和其它块元素.即使内容不能占满一行,块元素也要把整行占满.常见块元素,.

行内元素(inline element),又叫内联元素,内联元素只能容纳文本或者其他内联元素,常见的行内元素<span>,<a>.

块元素(block element),块元素一般都是从新行开始,可以容纳文本,其他内联元素和其它块元素.

即使内容不能占满一行,块元素也要把整行占满.常见块元素<div>,<p>.

通常使用div或者span这些没有实际意义的标签来指定某段html样式:

div用于大段html;
span则一般用于小段文本.

实例代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        span{
            background-color:silver;
        }
        p{
            background-color:pink;
        }
    </style>
</head>
<body>
<span>这是一个span元素</span>hello world
<p>这是一个段落标签</p>hello world
</body>
</html>

效果如下:

img_85d081000250d1408f5fffe46427467f.png

块元素和行内元素的区别:

1.行内元素只占内容的宽度,块元素内容不管内容多少占全行
2.行内元素一般放文本和其它行内元素,块元素放文本,行内元素和块元素.
3.一些CSS属性对行内元素不生效,比如weight,height,margin,left,right等,建议尽量使用块元素定位.

分别对上面的行内元素和块元素添加尺寸,修改后的代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        span{
            background-color:silver;
            width:300px;
            height:200px;
        }
        p{
            background-color:pink;
            width:300px;
            height:200px;
        }
    </style>
</head>
<body>
<span>这是一个span元素</span>hello world
<p>这是一个段落标签</p>hello world
</body>
</html>

刷新浏览器后的效果如下:

img_71b00506650e11c4ff0634e147c73d7b.png

可以看到,对行内元素添加的尺寸确实没有生效.

现在再来把行内元素转为块元素,看看效果:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        span{
            /*将行内元素转为块元素*/
            display:block;
            background-color:silver;
            width:300px;
            height:200px;
        }
        p{
            background-color:pink;
            width:300px;
            height:200px;
        }
    </style>
</head>
<body>
<span>这是一个span元素</span>hello world
<p>这是一个段落标签</p>hello world
</body>
</html>

转换后的效果如下:

img_d5ef321d29e247edbe1e578867c69f90.png

把块元素转换为行内元素,修改后的代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        span{
            /*将行内元素转为块元素*/
            display:block;
            background-color:silver;
            width:300px;
            height:200px;
        }
        p{
            background-color:pink;
            width:300px;
            height:200px;
            /*把块元素转换为行内元素*/
            display:inline;
        }
    </style>
</head>
<body>
<span>这是一个span元素</span>hello world
<p>这是一个段落标签</p>hello world
</body>
</html>

效果如下:

img_2ac70a0808ace87808c526157bd23697.png

总结:

把行内元素转换为块元素,使用display:block;
把块元素转换为行内元素,使用display:inline.
目录
相关文章
常见的块级元素与行内(内联)元素有哪些?它们有什么区别?
常见的块级元素与行内(内联)元素有哪些?它们有什么区别?
128 0
|
前端开发
CSS布局:浮动 (结构伪类选择器、伪元素、标准流、浮动、清除浮动)
CSS布局:浮动 (结构伪类选择器、伪元素、标准流、浮动、清除浮动)
116 0
|
5月前
|
前端开发
css 块元素、行内元素、行内块元素相互转换
css 块元素、行内元素、行内块元素相互转换
336 0
|
9月前
|
前端开发 容器
CSS布局基础:块级元素、行内元素与行内块元素详解
CSS布局基础:块级元素、行内元素与行内块元素详解
359 0
|
10月前
|
前端开发
什么是块级元素和内联元素?
【5月更文挑战第24天】什么是块级元素和内联元素?
98 4
|
10月前
|
前端开发
html中行内元素、块级元素、行内快元素都有哪些,以及区别
html中行内元素、块级元素、行内快元素都有哪些,以及区别
189 1
|
9月前
|
前端开发 Ruby
行内元素有哪些?块级元素有哪些?行内块元素有那些?
行内元素有哪些?块级元素有哪些?行内块元素有那些?
96 0
|
10月前
|
Java
块元素、行内元素、行内块元素
块元素、行内元素、行内块元素
|
10月前
行内元素、块级元素、空元素的理解
行内元素、块级元素、空元素的理解
84 0
行内元素有哪些?块级元素有哪些? 行内块元素有那些?他们有什么区别?
行内元素有哪些?块级元素有哪些? 行内块元素有那些?他们有什么区别?
227 0