CSS元素的显示模式

最新推荐文章于 2024-04-18 15:26:45 发布

黑马程序员小张

最新推荐文章于 2024-04-18 15:26:45 发布

阅读量449

点赞数 1

文章标签： html5 css

本文链接：https://blog.csdn.net/z000802/article/details/123909847

版权

本文介绍了CSS中的三种主要元素显示模式：块级模式、行内元素和行内块元素，详细阐述了它们的显示特点，并给出了各模式代表性的HTML标签。此外，还讨论了元素显示模式的转换及其在布局设计中的作用，以及HTML嵌套规范中的一些注意事项。

摘要由CSDN通过智能技术生成

1.块级模式

显示特点：
1. 独占一行(一行只能显示一个)
2. 宽度默认是父元素的宽度，高度默认由内容撑开
3. 可以设置宽高
代表标签：
- div、p、h系列、ul、li、dl、dt、dd、form、header、Nav、footer........

 <style>
        /* 块级元素：独占一行 宽度默认是父级的100%，添加宽高都生效 */
        div {
            width: 300px;
            height: 300px;
            background-color: pink;


            /* 行内块 */
            /* display: inline-block; */

            /* 行内 */
            display: inline;
        }
    </style>
</head>

<body>
    <div>1111111</div>
    <div>2222222</div>
</body>

2.行内元素

显示特点：
1. 一行可以显示多个
2. 宽度和高度默认由内容撑开
3. 不可以设置宽高
代表标签：
- a、span、b、u、i、s、strong、ins、em、del.........

 <style>
        /* 行内标签：不换行；设置宽高不生效，尺寸和内容的大小相同 */
        span {
            width: 300px;
            height: 300px;
            background-color: pink;

            /* 行内块 */
            /* display: inline-block; */

            /* 块 */
            display: block;
        }
    </style>
</head>

<body>
    <span>span</span>
    <span>span</span>
</body>

3.行内块元素

显示特点：
1. 一行可以显示多个
2. 可以设置宽高
代表标签：
- input、textarea、button、select......
- 特殊情况：img标签有行内块元素特点，但是Cheome调试工具中显示结果是inline

<style>
        /* 行内块标签：一行显示多个；加宽高生效 */
        img {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <img src="./images/1.jpg" alt="">
    <img src="./images/1.jpg" alt="">

</body>