这是我参与「第五届青训营」伴学笔记创作活动的第 2 天

一、本节课重点内容：

1.CSS 选择器的特异

2.CSS 继承

3.CSS 求值过程解析

4.CSS 布局方式及相关技术

二、详细知识点介绍:

1.哪条规则生效?

根据选择器特异度，.title生效

选择器特异度

多个选择器则特异度进行相加

2.继承

strong继承p标签中的blue属性和文字相关属性可继承，和盒子模型相关的大多不可继承例如width不继承，color，font-size继承

3.显示继承

inherit让不可继承属性可继承

4.初始值

initial初始值

5.CSS求值过程

6.布局是什么?

在HTML中，浮动就是让元素可以向左或向右移动，直到它的外边距碰到其父级的内边距或者是上一个元素的外边距，只需要给元素设置“float:left|right|none|inherit”样式即可。
绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素，基于绝对定位的元素不会占据空间。
绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定为的元素没有已定位的祖先元素作为参考值，则相对于整个网页。

6.盒子模型

margin-top和margin-bottom同时设置不会叠加取较大的一个值进行合并。

box-sizing: border-box，包含border，padding，content在内的盒子

三、实践练习例子:

1.元素选择

btn中primary选择button样式

2.利用border属性做三角形

<!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>triangle</title>
    <style>
      .border-basis {
        border-width: 50px;
        height: 100px;
        width: 100px;
        border-style: solid;
        border-color: aquamarine red yellow green;
        /* border本质上是三角形 */
        /* 把宽高设置成0，可以得到三角形 */
      }
      .triangle {
        border-width: 50px;
        height: 0px;
        width: 0px;
        border-style: solid;
        border-color: aquamarine red yellow green;
        /* border本质上是三角形 */
        /* 把宽高设置成0，可以得到三角形 */
      }
    </style>
  </head>
  <body>
    <div class="triangle"></div>
    <div class="border-basis"></div>
  </body>
</html>

border本质上是三角形
把宽高设置成0，可以得到三角形

3.border-box

对于.a默认为content-box .a的100%对于文字，所以盒子会超出屏幕。

四、课后个人总结:

今天学习了，CSS 选择器的特异度，CSS 继承，CSS 求值过程解析，CSS 布局方式及相关技术。做了一些实践的例子如border属性做三角形，了解border本质是三角形，以及border-box的案例，默认为content-box，我们开发中大多常用border-box。

深入CSS(1) | 青训营笔记