【Web前端开发基础】CSS的元素显示模式和三大特性

最新推荐文章于 2023-09-29 13:19:23 发布

凌云(mlinyun)

最新推荐文章于 2023-09-29 13:19:23 发布

阅读量616

点赞数

分类专栏： Web前端开发基础文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_62611367/article/details/129226702

版权

Web前端开发基础专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1 元素显示模式

目标：能够认识三种常见的元素显示模式，并通过代码实现不同元素显示模式的转换

1.1 块级元素

属性：display: block
显示特点：
1. 独占一行（一行只能显示一个）
2. 宽度默认是父元素的宽度，高度默认由内容撑开
3. 可以设置宽高
代表标签：div p h系列 ul li dl dt dd form header nav footer …

1.2 行内元素

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

1.3 行内块元素

属性：display: inline-block
显示特点：
1. 一行可以显示多个
2. 可以设置宽高
代表标签：
- input textarea button select …
- 特殊情况：img标签有行内块元素的特点，但是调试工具中显示默认显示模式为inline

1.4 元素显示模式转换

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

属性效果使用频率
display: block; 转换成块级元素较多
display: inline-block; 转换成行内块元素较多
display: inline 转换成行内元素极少

属性	效果	使用频率
display: block;	转换成块级元素	较多
display: inline-block;	转换成行内块元素	较多
display: inline	转换成行内元素	极少

1.5 html的嵌套规范

块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等……

但是：p标签中不能嵌套div、h系列标签等常见的块级标签
a标签内部可以嵌套任意元素

但是：a标签中不能够嵌套a标签

1.6 居中方法总结

在这里插入图片描述

2. CSS三大特性

目标：能够认识CSS的继承和层叠特性，会计算CSS的优先级和权重比较

2.1 继承性

特性：子元素有默认继承父元素样式的效果（子承父业）
可以继承的常见属性：
1. color
2. font-相关的属性
3. text-相关的属性
4. line-height 行高
5. ……
注意点：可以通过调试工具判断样式是否可以继承
继承性的应用

好处：可以在一定程度上减少代码

常见应用场景：
1. 去除列表默认的样式（小圆点）
  
  可以直接给ul设置 ul {list-style: none;} 属性，从而去除列表默认的小圆点样式
2. 统一不同浏览器默认的文字大小
  
  谷歌浏览器默认文字大小：16px
  
  不同浏览器可能显示的默认字体大小不一致，开发的时候通常会给body标签设置统一的font-size保证不同浏览器效果一致
继承失效的特殊情况

如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式
1. a标签的颜色继承会失效
  
  其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
2. h系列标签的font-size会继承失效
  
  其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
3. div的高度不能继承，但是宽度有类似于继承的效果
  
  宽度属性不能基继承，但是div有独占一行的特性

2.2 层叠性

特性：
1. 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
2. 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
注意点：当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

3. 总结及能力

能够使用后代选择器选择标签选择器1 选择器2 {属性名:属性值;}
能够使用hover伪类选择器设置标签的鼠标悬停状态 a:hover {属性名:属性值;}
能够设置标签的背景颜色和背景图片

背景颜色 background-color
背景图片 background-image:url(“图片的路径”)
能够说出常见元素显示模式分为三种

块级元素 display: block
行内元素 display: inline
行内块元素 display: inline-block
能够说出块级元素、行内元素、行内块元素的显示特点

块级元素

① 独占一行
② 宽度默认占满父元素的宽度，高度默认由内容撑开
③ 可以以设置宽高
行内元素
① 一行可以显示多个
② 宽度和高度默认由内容撑开
③ 不可以设置宽高
行内块元素

① 一行可以显示多个
② 可以设置宽高

能够说说出块级元素和行内元素的区别

块级元素

① 独占一行
② 宽度默认占满父元素的宽度，高度默认由内容撑开
③ 可以设置宽高
行内元素

① 一行显示多个
② 宽度和高度默认由内容撑开
③ 不可以设置宽高

能够写出将元素转换成块级元素和行内块元素的代码

转换成块级元素 display: block
转换成行内块元素 display: inline-block

能够说出有那些常见的属性可以继承

color
font相关属性 font-size font-weight font-style font-famliy
text相关属性 text-align text-indent
line-height

能够说出块级元素水平居中的方法 margin: 0px auto
能够说出行内元素、行内块元素水平居中的方法 text-align: center

4. 综合案例

4.1 普通导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            width: 80px;
            height: 50px;
            background-color: red;
            /* 转换成行内块元素 */
            display: inline-block;
            /* 文本水平居中 */
            text-align: center;
            /* 文本垂直居中 */
            line-height: 50px;
            /* 文字文本修饰 */
            text-decoration: none;
            color: #fff;
        }
        
        a:hover {
            background-color: orange;
        }
    </style>
</head>
<body>
    <!-- a{导航$}*5 -->

    <a href="#">导航1</a>
    <a href="#">导航2</a>
    <a href="#">导航3</a>
    <a href="#">导航4</a>
    <a href="#">导航5</a>
</body>
</html>

在这里插入图片描述

4.2 五彩导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            width: 120px;
            height: 58px;
            background-color: pink;
            /* 转换成行内块元素 */
            display: inline-block;
            /* 文本水平居中 */
            text-align: center;
            /* 文本垂直居中 */
            line-height: 50px;
            /* 文字文本修饰 */
            text-decoration: none;
            color: #fff;
        }
        
        .one {
            background: url('./images/bg1.png');
        }
        
        .two {
            background: url('./images/bg2.png');
        }
        
        .three {
            background: url('./images/bg3.png');
        }
        
        .four {
            background: url('./images/bg4.png');
        }
        
        .one:hover {
            background: url('./images/bg5.png');
        }
        
        .two:hover {
            background: url('./images/bg6.png');
        }
        
        .three:hover {
            background: url('./images/bg7.png');
        }
        
        .four:hover {
            background: url('./images/bg8.png');
        }
    </style>
</head>
<body>
    <a href="#" class="one">五彩导航</a>
    <a href="#" class="two">五彩导航</a>
    <a href="#" class="three">五彩导航</a>
    <a href="#" class="four">五彩导航</a>
</body>
</html>

在这里插入图片描述

凌云(mlinyun)

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【Web前端开发基础】CSS的元素显示模式和三大特性

目标：能够认识CSS的继承和层叠特性，会计算CSS的优先级和权重比较能够使用后代选择器选择标签选择器1 选择器2 {属性名:属性值;能够使用hover伪类选择器设置标签的鼠标悬停状态 a:hover {属性名:属性值;能够设置标签的背景颜色和背景图片背景颜色 background-color背景图片 background-image:url(“图片的路径”)能够说出常见元素显示模式分为三种块级元素 display: block行内元素 display: inline。
复制链接

扫一扫