CSS个人学习笔记（day 5）

loney_k

已于 2022-04-25 15:26:05 修改

阅读量696

点赞数 18

文章标签： css

于 2022-04-23 23:44:12 首次发布

本文链接：https://blog.csdn.net/loney_k/article/details/124356205

版权

八、元素显示模式

8.1.1 显示模式- 块级元素

显示特点：

1. 独占一行(一行只能显示一个)

2. 块级标签的宽度默认是和父元素的宽度相等,高度默认为内容撑开

3. 可以设置宽高

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

<body>
    <div>111</div>
    <div>222</div>
</body>

示例：

常见的块级标签：div、p、h系列、ul、li、table、dl、dt、dd、form、header、nav、footer...

8.1.2 显示模式- 行内元素

显示特点：

1. 一行可以显示多个

2. 宽度和高度默认由内容撑开，尺寸和内容的大小相同

3. 不可以设置宽高

 <style>
        /* 行内：不换行; 设置宽高不生效; 尺寸和内容的大小相同 */
        /* 如果不知道这个标签是什么元素可以设置宽高和颜色来分辨 */
        span {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>

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

示例：

常见的行内元素： a,span,strong,b,i,u,s,em,del...

8.1.3 显示模式- 行内块元素

显示特点：

1. 一行可以显示多个

2. 可以设置宽高

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

<body>
     <img src="../images/cat.gif" alt="">
</body>

示例：

常见的行内块元素：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>
</head>

<body>
    <!-- 意义：当一个标签使用了多个选择器,样式冲突的时候,到底谁生效 -->
    <!-- 行内样式 -->
    <div class="box" id="box" style="color: pink;">测试优先级</div>
</body>

示例：

注意点：

! important写在属性值的后面, 分号的前面
! important不能提升继承的优先级, 只要是继承优先级最低！
实际开发中不建议使用! important

9.1.4 CSS特性- 优先级叠加计算

权重叠加计算场景：如果是复合选择器,此时需要通过权重叠加计算方法，判断最终哪个选择器优先最高会生效

权重叠加计算公式：(每一级之间不存在进位)

比较规则：

1. 先比较第一级数字, 如果比较出来了, 之后的统统不看

2. 如果第一级数字相同，此时再去比较第二级数字, 如果比较出来了,之后的统统不看

3. 如果最终所有数字都相同,表示优先级相同,则比较层叠性 (谁写在下面,谁说了算！)

<style>
        /* (行内, id , 类, 标签) */

        /* (0, 1, 0, 1) */
        div #one {
            color: orange;
        }

        /* (0, 0, 2, 0) */
        .father .son {
            color: skyblue;
        }

        /* (0, 0, 1, 1) */
        .father p {
            color: purple;
        }

        /*(0, 0, 0, 2) */
        div p {
            color: pink;
        }
</style>

示例：