一、课堂速记

css选择器与权重计算
hsl和rgb 两种颜色选择函数
伪类
font-size 字体单位 em rem vh vw % px
font-family

建议:字体列表最后加上通用字体族 , 英文字体放中文字体前面

对于自定义字体包过大，可以采用工具采取使用过的字体作为子包，而不是完整引入全部的字体包。
font-weight :(100-900)
继承：

某些属性会自动继承继承父元素的计算值

inherit 关键字

跟文字相关的一般可继承

跟盒模型相关的一般不继承
css求值过程
1. 计算值（例如60%,百分比单位）布局前的值
2. 使用值布局后的值
3. 实际值最终值
布局
- 常规流 (文档流)
  - 行级 IFC
  - 块级 BFC
  - 表格布局
  - FlexBox
  - Grid
- 浮动
- 绝对定位

二、课后学习：

1.属性继承

MDN

在css中，每个CSS 属性定义的概述都指出了这个属性是默认继承的("Inherited: Yes") 还是默认不继承的("Inherited: no")。这决定了当你没有为元素的属性指定值时该如何计算值。当元素的一个继承属性（inherited property）没有指定值时，则取父元素的同属性的计算值 computed value (zh-CN)。只有文档根元素取该属性的概述中给定的初始值（initial value）（这里的意思应该是在该属性本身的定义中的默认值）。

简单来说，就是继承属性会自动继承继承父元素的计算值。如果直到文档根元素，就是html标签，都还没有同属性的指定值，就使用html标签的初始值。如果找到了父元素的计算值，就使用父元素的计算值。

注意！！！ 继承的是计算值。具体什么是计算值，会在下面“css值的计算”中讲到，也可以去MDN了解。

非继承属性，如果没有指定值的，就会使用默认值。

小结：跟文字相关的一般可继承（color,font-size），跟盒模型相关的一般不继承(margin,padding)

关键字

inherit ：

inherit 关键字使得元素获取其父元素的计算值。对于继承属性，inherit 关键字只是增强了属性的默认行为，通常只在覆盖原有的值的时候使用。继承始终来自文档树中的父元素，即使父元素不是包含块。

简单来说，使用inherit关键字，可以使得当前属性类似继承属性一样，往父节点寻值

继承属性寻值：

如果没有指定值：子元素 --> 父元素 --> 祖先元素 --> 根元素 --> 浏览器默认样式表 --> initial（CSS初始值）

initial：

CSS关键字将属性的初始（或默认）值应用于元素。不应将初始值与浏览器样式表指定的值混淆。它可以应用于任何CSS属性。initial 可用于将所有CSS属性恢复到其初始状态。

    <style>
        div {
            display: initial;
        }
    </style>

<body>
    <div>
    </div>
</body>

display 的默认值是 inline，而这里的block是从User-agent 中获取的。

User-agent 是浏览器针对 HTML 元素所定义的基本样式表。

unset

MDN：

CSS关键字 unset 可以分为两种情况，如果这个属性本来有从父级继承的值（这个属性默认可以继承，且父级有定义），则将该属性重新设置为继承的值，如果没有继承父级样式，则将该属性重新设置为初始值。换句话说，在第一种情况下（继承属性）它的行为类似于inherit ，在第二种情况下（非继承属性）类似于initial。

简单来说，如果属性是继承属性，那么unset=inherit ,如果是非继承属性，则unset=initial

继承属性：color

    <style>
        .foo {
            color: blue;
        }
        .bar {
            color: green;
        }

        p {
            color: red;
        }
        .bar p {
            color: unset;
        }
    </style>
<body>
<p>This text is red.</p>
<div class="foo">
    <p>This text is also red.</p>
</div>
<div class="bar">
    <p>This text is green (default inherited value).</p>
</div>
</body>

非继承属性：display

    <style>
        .bar{
            display: flex;
        }
        .bar div {
            display: unset;
        }
    </style>
<body>

<div class="bar">
    <div>This text is green (default inherited value).</div>
</div>

2.css求值过程

老师的图很清晰,

简单来说，就是css先进行匹配相对应的选择器、属性、 media，找到相对应的元素进行样式计算。

然后根据权重计算，找到权重最高的css属性进行匹配，如果是没有指定值，就使用继承值或者初始值。

然后那个属性就有值了，下一步就是将相对值转换为绝对值，例如em，rem，相对路径，这时候得到了计算值 computed value (zh-CN)。继承也是继承属性的计算值，百分比也是**计算值 computed value (zh-CN)**。

下一步就是将计算值进行转换，得到使用值，就是实际的布局时用的数值， px

最后就是将这个使用值进行格式化，去除小数，化为整数，得到最终渲染的实际值。

window.getComputedStyle

MDN： Window.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。私有的CSS属性值可以通过对象提供的API或通过简单地使用CSS属性名称进行索引来访问。

接收两个参数，第一个参数是dom对象，第二个参数是可选的（只要找伪类的样式的时候，才会使用）。返回的style是一个实时的 CSSStyleDeclaration 只读对象，当元素的样式更改时，它会自动更新本身。

与element.style不同点： window.getComputedStyle得到的对象是dom对象最终的样式，而element.style得到的样式是内联样式。

let style = window.getComputedStyle(element, [pseudoElt]);

getComputedStyle的返回值是 resolved values, 通常跟CSS2.1中的computed values是相同的值。但对于一些旧的属性，比如width, height, padding 它们的值又为 used values。最初, CSS2.0定义的计算值Computed values 就是属性的最终值。但是CSS2.1 重新定义了 computed values（计算值）为布局前的值， used values（使用值）布局后的值。布局前与布局后的区别是， width 或者 height的百分比可以代表元素的宽度，在布局后会被像素值替换.

   <style>
    #bar{
        height: 30%;
        width: 30%;
    }
    </style>
</head>
<body>
<div style="height: 300px">

    <div id="bar">
    </div>
</div>

</body>
<script>
    let div=document.getElementById('bar')
    console.log(window.getComputedStyle(div));
</script>

常用伪类

:hover （例子：a:hover）选择鼠标悬停其上的a标签。
:focus （例子：input:focus）选择获得焦点的input标签。
:first-child（例子：li:first-child）选择父元素下的第一个li标签
:nth-child(n) (p:nth-child(2)) 选择作为其父的第二个子元素的每个p 标签。

更多可以去这里看：css伪类

CSS常用选择器

.class 类选择器权重为10 （例子 .bar）选择class="bar" 的标签
#id 选择器权重为100 (例子 #foo) 选择 id="foo" 的标签
标签选择器权重1（例子：h1div p 等）选择h1标签、div标签、 p标签等
[prop='xxx'] 权重10 属性选择器 (例子 [target=_blank]) 选择带有 target="_blank" 属性的所有元素。

更多选择器从这里看:CSS选择器

权重计算

　1.css选择规则的权值不同时，权值高的优先；

　2.css选择规则的权值相同时，后定义的规则优先；

　　3. css属性后面加 !important 时，无条件绝对优先；

例子: #nav .list li a:link 这个选择器权重为122, 100+ 20 +1 +1

.hd ul.links a 这个选择器权重为22 , 10+10 +1 +1

如果这两个选择器匹配到同一标签,则以权重高的选择器为准

3.BFC

BFC 即 Block Formatting Contexts (块级排版上下文)，它属于上述定位方案的普通流。

我的理解就是一种容器，这个容器有形成条件以及其自身特性。

形成条件

1、浮动元素
2、绝对定位
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、有overflow属性，且overflow的值不是visible
5、html标签

html标签节点中，满足上述条件中的一种，就是一个BFC标签。

特性

1、同一个 BFC 下外边距会发生折叠

代码：

    <style>
      div{
          height: 200px;
          width: 200px;
          margin:100px ;
          background: aqua;
      }
    </style>
</head>
<body>
<div></div>
<div></div>
</body>

html标签是一个BFC容器，在body下，有两个div标签，div的外边距是100px

网页图：

可以看到，上面div标签的下外边距和下面div标签的上外变距重叠了。

解决办法：

其中一个div放在一个全新的BFC容器里

代码：

    <style>
        .box {
            height: 200px;
            width: 200px;
            margin: 100px;
            background: aqua;
        }
        .container{
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="box"></div>

<div class="container">
   <div class="box"></div>
</div>
</body>

网页效果：

这样外边距就没有重叠了。

2、计算BFC的高度时，浮动元素也参与计算。

代码：

    <style>
        .box {
            height: 200px;
            width: 200px;
            margin: 100px;
            float: left;
            background: aqua;
        }
        .container{
            
        }
    </style>
</head>
<body>
<div class="container">
   <div class="box"></div>
</div>
</body>

网页效果：

可以看到，这里只有div.box有宽高，而div.container没有高度

当.container成为BFC之后

.container {
    overflow: hidden;
}

高度就回来了。

BFC内部会计算浮动元素的高度。

3、BFC 可以阻止元素被浮动元素覆盖

代码：

    <style>
        .box {
            height: 200px;
            width: 200px;
            margin: 100px;
            float: left;
            background: aqua;
        }

        .container {
            background: red;
            overflow: hidden;
            height: 400px;
        }
    </style>
</head>
<body>
<div class="box"></div>
<div class="container">
    <div class="box"></div>
</div>
</body>

网页效果：

若右边盒子不是一个BFC，既去除overflow:hidden,则网页效果是：

三、小结

css的世界很大,属性特别多,需要不断的学习,上面课后学习的内容只是css中很小的一部分(0.0)

内容太多了,之后再补充吧.....

学不完啊学不完 (╥╯^╰╥)

老师说,我们不需要把所有东西都记下来,但需要知道有这东西,并且指知道它用来干什么就行了,用到的时候翻阅文档,要从使用场景理解这个东西存在的意义

有一说一,老师讲的真棒 (0_ 0)

【字节青训营】理解CSS

一、课堂速记

二、课后学习：

1.属性继承

MDN

关键字

inherit ：

initial：

unset

2.css求值过程

window.getComputedStyle

常用伪类

CSS常用选择器

权重计算

3.BFC

形成条件

特性

1、同一个 BFC 下外边距会发生折叠

2、计算BFC的高度时，浮动元素也参与计算。

3、BFC 可以阻止元素被浮动元素覆盖

三、小结

四、引用参考：

【字节青训营】 理解CSS

一、课堂速记

二、课后学习：

1.属性继承

MDN

关键字

inherit ：

initial：

unset

2.css求值过程

window.getComputedStyle

常用伪类

CSS常用选择器

权重计算

3.BFC

形成条件

特性

1、 同一个 BFC 下外边距会发生折叠

2、计算BFC的高度时，浮动元素也参与计算。

3、BFC 可以阻止元素被浮动元素覆盖

三、小结

四、引用参考：

【字节青训营】理解CSS

1、同一个 BFC 下外边距会发生折叠