CSS进阶-元素显示模式

最新推荐文章于 2026-01-05 11:04:12 发布

原创最新推荐文章于 2026-01-05 11:04:12 发布 · 117 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

本文介绍了CSS中的块级元素、行内元素及行内块元素的特点，并详细解释了如何使用display属性来转换这些元素的显示模式，以实现灵活的页面布局。

CSS进阶03

块级元素
行内标签
行内块
元素显示模式转换
- 拓展
CSS特性

块级元素

显示特点
1 . 独占一行
2 . 宽度默认是父元素的宽度高度默认由内容撑开
3 . 可以设置宽高
代表标签
div、p、h系列

行内标签

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

行内块

显示特点
1 . 一行显示多个
2 . 可以设置宽高
代表标签
img、input、textarea、button、select.

元素显示模式转换

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

语法

属性	效果
display：block	转换成块级元素
display：inline- block	转换成行内块元素
display：inline	转换成行内元素

在style里

拓展

块级元素一般可以嵌套
但是p标签不能嵌套p、div、h等块级元素
a标签内部可以嵌套任意元素
但a标签不能嵌套a标签

CSS特性

继承性

子元素默认继承父元素的样式特点

文字控制属性都可以继承

特殊情况

1.a标签的color会继承消失

2.h系列标签的font-size会继承失效

层叠性

给同一个标签设置不同的样式-此时样式会叠加

注意事项
当样式冲突时，只有当选择器优先级相同时，才通过层叠性判断结果

<!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>
        a{
            text-decoration: none; 
            /* 去除下划线 */
            width: 100px;
            height: 50px;
            background-color: red;
            display: inline-block;
            color: white;
            text-align: center;
            /* 居中 */
            line-height :50px;
        }
        a:hover{
            background-color: orange;
        }
    </style>
</head>
<body>
    <a href="#">导航1</a>
    <a href="#">导航2</a>
    <a href="#">导航3</a>
    <a href="#">导航4</a>
    <a href="#">导航5</a>
</body>
</html>