2024年CSS个人学习笔记（day 5）_acss9(1)，2024年最新阿里牛逼

最新推荐文章于 2024-11-14 19:11:37 发布

2401_84975360

最新推荐文章于 2024-11-14 19:11:37 发布

阅读量737

点赞数 13

分类专栏：程序员文章标签： c语言 c++ 学习

本文链接：https://blog.csdn.net/2401_84975360/article/details/138794595

版权

程序员专栏收录该内容

43 篇文章 0 订阅

订阅专栏

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

        width: 100px;
        height: 100px;
    }
</style>

```

示例：

**常见的行内块元素：**img,input,textarea,button,select…

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

8.1.4 显示模式- 元素显示模式转换

**目的：**改变元素默认的显示特点, 让元素符号布局要求

语法：

属性效果使用频率

display:block 转换成块级元素较多

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

display:inline 转换成行内元素较少

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

            /* 块元素转换为行内块元素 */
            /* display: inline-block; */

            /*块元素转换位行内元素  */
            /* display: inline; */
        }

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

            /* 行内元素转换为块元素 */
            /* display: block; */

            /* 行元素转换为行内块元素 */
            display: inline-block;
        }
 </style>

标签之间的区别

**块元素：**独自占领一行、可以进行宽高的数值的设定；

**行元素：**在一行内显示、不可以进行宽高的数值设定；

**行内块元素：**能和其他元素待在一行，能设置宽高；

**标签间的嵌套规则：**块标签可以套行标签，行标签不可以套块标签。

8.1.5 显示模式- HTML嵌套规范注意点

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

但是：p标签中不要嵌套div、p、h等块级元素

2. a标签内部可以嵌套任意元素

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

<body>
    <!-- p 和 h 标题不能相互嵌套 -->
    <!-- <p>
        <h1>一级标题</h1>
    </p> -->

    <!-- p里面不能包含div -->
    <p>
        <div>div</div>
    </p>
</body>

九、CSS三大特性

9.1.1 CSS特性- 继承性

**继承性特性：**子元素有默认父元素样式的特点 (子承父业)

可以继承的常见属性 (文字控制属性都可以继承)

1. color

2. font-style、font-weight、font-size、font-family

3. text-indent、text-aligh

4. line-height

5. …

<style>
        /* 控制文字的属性都能继承，不是控制文字的都不能继承 */
        div {
            color: red;
            font-size: 30px;
            height: 300px;
        }
</style>
</head>
<body>
    <div>
        这是div里面的文字
        <span>这是div里面的span</span>
    </div>
    
</body>

示例：

注意点：

可以通过调试工具判断样式是否可以继承
所有控制文字的都可以继承,控制标签本身的都不能继承

**继承失效的特殊情况：**如果元素有浏览器默认样式,此时继承性依然存在，但是优先显示浏览器的默认样式

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

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

<style> 
       div {
           /* a标签的color会继承失效 */
           color: red;

           /* h标签的font-size会继承失效 */
           font-size: 12px;
       }
        
       /* 继承原则我没有就继承父类的，我要有就自己写  */
       a {
           color: red;
       }
</style>
</head>
<body>
    <div>
        <a href="#">超链接</a>
        <h1>一级标题</h1>
    </div>
</body>

示例：

9.1.2 CSS特性- 层叠性

层叠性特性：

1. 给同一个标签设置不同的样式 -> 此时样式会层叠叠加 -> 会共同作用在标签上

2. 给同一个标签设置相同的样式 -> 此时样式会层叠覆盖 -> 最终写在最后的样式会生效

<style>
       div {
           color: red;
           color: green;
       }
       .box {
           font-size: 30px;
       }
</style>
</head>
<body>
    <div class="box">文字</div>
</body>

示例：

注意点：

1. 当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断结果

9.1.3 CSS特性- 优先级

**优先级特性：**不同选择器具有不同的优先级, 优先级高的选择器样式会覆盖优先级低选择器样式

优先级公式：

继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内选择器 < ! important

优先级原则： 1. 哪个选择器可以更加精准的选到标签，它的优先级就比较高

2. 哪个选择器选中的范围越广，它的优先级就低

3. 优先级最低是继承，优先级最高是加属性值 ! important

4. 当css都是继承的时候,看继承里面谁最高，看继承哪个父级，哪个是第一继承的,哪个选择器就生效

<style>
       #box {
            color:orange ;
       }
       .box {
           color: blue;
       }
       div {
           color: green !important;
       }

       /* !important不要给继承的添加,自己有样式无法继承父类样式 */

       body {
           color: red;
       }
        
</style>


![img](https://img-blog.csdnimg.cn/img_convert/6da49cf31f3fa47ed47de81a7c6a0110.png)
![img](https://img-blog.csdnimg.cn/img_convert/1b8092080c8597019cf6c283df71c26b.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以添加戳这里获取](https://bbs.csdn.net/topics/618668825)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

</style>


[外链图片转存中...(img-8dQIEXk0-1715570353676)]
[外链图片转存中...(img-klPbacr0-1715570353677)]

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以添加戳这里获取](https://bbs.csdn.net/topics/618668825)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**