第三部分 CSS进阶 | 青训营笔记

这是我参与第四届青训营笔记创作活动的第2天，本节学习了CSS选择器权重之间的比较，对于CSS布局有了很好的了解和认识，对于浮动，定位的使用有了更好的理解

1.关于选择器的权重比较

<style>
    .title {
        color: blue;
    }
    article h1 {
        color: red;
    }
</style>
<article>
        <h1 class="title">这是一个标题</h1>
</article>

问题： 那条规则会生效？

1.结果会是蓝色字体 2.原因是前者权重（特异度）较大

注意：

1.比较方式是，从左到右依次比较，相同则向右比较，如果某一个比较大，则一定大，最后会产生对应设置的属性；如果值都相同，则书写在后面的会层叠掉前面的属性（两种选择器同时设置相同的属性时）

注意：

1..btn.primary表示同时属于两个类

2.继承

注意：

1.某些与文字相关的可以继承

注意：

1.设置了之后，后代都会继承该属性 2.将不可继承的属性变成可继承的属性 3.如果没有继承父类的某些元素，会执行默认值

3.初始值

CSS中，每个属性都有一个初始值 1.background-color的初始值为transparent 2.margin-left的初始值为0

可以使用initial关键字显式重置为初始值 1.background-color: initial;

4.CSS解析

注意：

1.继承的是父级的计算值

5.布局

6.简单盒模型

注意：

margin外边距 padding内边距

7.内边距

注意：

1.百分数是相对于容器的宽度

7.边框

注意：

1.可以给不同边设置不同颜色

注意：

1.盒子高度和宽度设置成0 2.给边设置宽度，隐藏不需要的边 3.给显示的边设置颜色，最后会得到一个三角形

8.外边距

注意：

1.盒子必须是块级元素

注意：

1.外边距合并

9.border-box;

注意：

1.建议

10.溢出

注意：

visible：溢出显示 hidden：溢出隐藏 scroll：溢出显示滚动条

11.布局规则

注意：

1.块级单独占一行 2.行级可以设置margin-left

注意：

1.通过display可以转换布局规则

注意：

inline-block元素之间存在空隙

12.行级

13.块级

14.Flex布局

参考例子：

主轴与侧轴

主轴方向的对齐方式

基线对齐

弹性布局

注意：

1.按照比例分配

注意：

1.可以简写

15.Grid布局

注意：

1.通过线的编号表示

参考例子

注意：

1.通过浏览器检查可以查看网格线的信息

16.浮动

注意：

1.最初是为了实现文字环绕效果

17.定位

绝对定位

注意：

1.子绝父相

固定定位

注意：

1.是相对于窗口而言的

粘性定位

。。。

\