HTML行级元素和块级元素区别和转化(displays属性)

2018-01-03 20:04:40来源:CSDN作者:qingyisuo人点击

分享

1.块级标签与行级标签的区别:
1.块级元素可以设置宽高,行级元素不能设置宽高(只能根据文字来设置,比较特殊的是img/input是可以设置宽高);
2.块级元素是独占一行,行级元素不行;

2.块级元素和行级元素的转化
a.块级转行级
例子:div->行级

1.div为正常的块级标签时,与span行级文字时
<head>        <meta charset="UTF-8">        <style type="text/css">            div{                width: 200px;                height: 200px;                outline: 1px dashed red;//1像素红色虚线            }        </style>    </head>    <body>        <div>我是div</div>啊啊啊啊        <span> aaaaaa</span>    </body></html>

效果如图:这里写图片描述
2. div—>行级(display:inline),这里只贴出div的样式,其他的与上面一致。

            div{                width: 200px;                height: 200px;                outline: 1px dashed red;                display: inline;                /*转化为行级标签这时div设置的宽高无效,因为行级标签不能设置宽高*/            }

效果如图:
这里写图片描述

解析:转化为行级标签这时div设置的宽高无效,因为行级标签不能设置宽高,


b.行级转块级
例子:span->块级(display:block)

<html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            span{                width: 200px;                height: 200px;                outline: 1px dashed red;                display: block;/*转化为块级标签*/            }        </style>    </head>    <body>        <span>aaaaaa</span>        啊啊啊     </body></html>

效果如图:
这里写图片描述


c.行级转块级但是又不独占一行
span—>块级但是不独占一行(display:online-block)
例子(代码基本与b的例子一致,就是display属性不一样):

        span{                width: 200px;                height: 200px;                outline: 1px dashed red;                display: inline-block;/*转化为块级标签*/            }        </style>
效果如图所示

这里写图片描述

解析:对比c和b举的例子可以比较清楚的发现,虽然c已经转化成了块级元素,但是没有独占一行。


总结

1.display:inline;//将块级元素转化为行级元素,这时块级元素设置的宽高无效
2.display:block;//将行级元素转块级元素,这时原本的行级元素会变成块级元素独占一行,同时可以设置宽高
3.display:inline-block;//将行级元素转块级元素,不会独占一行,可以设置宽高

ps:突然发现这个Markdown编辑器有很多bug…

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台