CSS3-显示模式

最新推荐文章于 2024-08-03 16:08:54 发布

Q _Q

最新推荐文章于 2024-08-03 16:08:54 发布

阅读量1k

点赞数

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.csdn.net/weixin_54021642/article/details/131315327

版权

CSS3 专栏收录该内容

42 篇文章 5 订阅

订阅专栏

本文介绍了HTML元素的四种显示模式：块级显示、行内显示、行内块显示及其转换，包括各自的特点、代表标签以及应用场景。同时提到了元素显示模式转换在布局设计中的重要性，并给出了HTML嵌套规范和居中方法的总结。

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

显示模式

1 块级显示

2 行内显示

3 行内块显示

4 元素显示模式转换

5 拓展

1 块级显示

属性：display:block

显示特点：

1 独占一行（一行只能显示一个）

2 宽度默认是父元素的宽度，高度默认由内容撑开

3 可以设置宽高

代表标签：

div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

2 行内显示

属性：display:inline

显示特点：

1 一行可以显示多个

2 宽度和高度默认由内容撑开

3 不可以设置宽高

代表标签：

a、span 、b、u、i、s、strong、ins、em、del……

3 行内块显示

属性：display:inline-block

显示特点：

1 一行可以显示多个

2 可以设置宽高

代表标签：

1 input、textarea、button、select……

2 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

4 元素显示模式转换

目的：改变元素默认的显示特点，让元素符合布局要求

使用较多：display:block（块级显示） display:inline-block（行内块显示）

使用较少：display:inline（行内显示）

5 拓展

HTML嵌套规范注意：

1 块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等，但是：p标签中不要嵌套div、p、h等块级元素

2 a标签内部可以嵌套任意元素，但是：a标签不能嵌套a标签

居中方法总结：

水平居中：

text-align:center

1 文本

2 行内元素 span、a

3 行内块元素 input、img

注意：text-align:center 直接设置在元素的父标签即可

margin:0 auto

1 块级元素

注意：margin:0 auto 直接设置在当前标签即可

垂直居中：

line-height 单行文本

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            background-color: #abc;
            /* 显示模式：块级-->行内块 */
            display: inline-block;
        }
        /* 块级显示 */
        div {
            width: 500px;
            height: 300px;
            background-color: pink;
        }
        /* 行内显示 */
        span {
            background-color: yellow;
        }
        
        b {
            background-color: green;
        }
        
        u {
            background-color: red;
        }
        
        i {
            background-color: purple;
        }
        /* 行内块显示 */
        input {
            background-color: #ff7;
        }
        
        textarea {
            background-color: #fa9;
        }
    </style>

</head>

<body>
    <h1>
        这是h1标签111
    </h1>
    <h1>
        这是h1标签222
    </h1>
    <div>
        display:block（块级显示）<br> 显示特点：
        <br> 1 独占一行（一行只能显示一个）<br> 2 宽度默认是父元素的宽度，高度默认由内容撑开<br> 3 可以设置宽高<br>
    </div>
    <span>
        display:inline（行内显示）
    </span>
    <b>
        1 一行可以显示多个
    </b>
    <u>
        2 宽度和高度默认由内容撑开
    </u>
    <i>
        3 不可以设置宽高
    </i>
    <br>
    <img src="./images/1.jpg" alt="">
    <input type="text" name="" id="">
    <textarea name="" id="" cols="30" rows="10"></textarea>
</body>

</html>

效果图：