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

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>我是divdiv>啊啊啊啊
        <span> aaaaaaspan>
    body>
html>

效果如图:HTML行级元素和块级元素区别和转化(displays属性)_第1张图片
2. div—>行级(display:inline),这里只贴出div的样式,其他的与上面一致。

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

效果如图:
HTML行级元素和块级元素区别和转化(displays属性)_第2张图片

解析:转化为行级标签这时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>aaaaaaspan>
        啊啊啊 
    body>
html>

效果如图:
HTML行级元素和块级元素区别和转化(displays属性)_第3张图片


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

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

HTML行级元素和块级元素区别和转化(displays属性)_第4张图片

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


总结

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

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

你可能感兴趣的:(个人HTML笔记)