css元素显示模式(行内、块级、行内块)

1.块级元素

显示特点:
1、独占一行(一行只能显示一个)
2、宽度默认是父元素的宽度,高度默认由内容撑开
3、可以设置宽高

代表标签:
div、p、h系列、ul、li、dl、dt、dd、form、header、anv、footer

    <style>
        div:nth-child(1) {
            /* 块级元素默认和父亲一样宽度 */
            height: 300px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <!-- 块级 -->
    <div></div>
</body>

css元素显示模式(行内、块级、行内块)_第1张图片
关于块级元素的一些想法

如果想让一个块级盒子,例如div在电脑上显示出来,可以不设置宽度,但是必须设置高度,否则在电脑屏幕上肉眼看不见

如果有二个盒子,只要子盒子有宽高,父盒子不用任何设置,都能被看到
例如:

    <style>
        div{
            background-color: pink;
        }
        button{
            height: 100px;
        }
    </style>
</head>
<body>
    <div>
        <button></button>
    </div>
</body>

css元素显示模式(行内、块级、行内块)_第2张图片

2.行内元素

特点:
1、一行可以显示多个
2、高度和宽度默认由内容撑开
3、不可以设置宽高

代表标签:
a、span、b、u、i、strong、ins、em、del

    <style>
        span {
            /* 行内不可以设置宽高 */
            width: 300px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <!-- 行内 -->
    <span>span</span>
    <b>b</b>
    <strong>strong</strong>
    <u>u</u>
    <i>i</i>
    <s>s</s>
    <del>del</del>
    <em>em</em>
    <ins>ins</ins>
</body>

css元素显示模式(行内、块级、行内块)_第3张图片

3.行内块元素

显示特点:
1、一行可以显示多个
2、可以设置宽高

代表标签:
input、textarea、button、select

    <style>
       img{
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <!-- 行内块 -->
    <img src="imgs/bg33.png">
</body>

css元素显示模式(行内、块级、行内块)_第4张图片

特殊情况:
img有行内块元素特点,但是chrome调试工具中显示的inline

4.显示模式转换

display: block;
display: inline-block;
display: inline;

5、html标签嵌套注意点

块级元素一般作为大容器,可以嵌套:文本级元素、行内元素、行内块元素等等.
但是: p标签中不要嵌套div、p、h等块级元素
a标签内部可以嵌套任意元素
但是:a标签不能嵌套a标签
css元素显示模式(行内、块级、行内块)_第5张图片

你可能感兴趣的:(css,css,css3,前端)