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

学习 CSS 的几点建议

充分利用 MDN 和 W3C CSS 规范；
保持好奇心，善用浏览器的开发者工具；
持续学习， CSS 新特性还在不断出现。

CSS 如何工作的

graph TD
加载HTML --> 解析HTML --> 创建DOM树 --> 展示页面
解析HTML --> 加载CSS --> 解析CSS -- 添加样式到DOM节点 --> 创建DOM树

伪类

不基于标签和属性定位元素
2种伪类
        •状态伪类
                主要用于链接和表单两个方面：
                        链接：未访问过的链接、访问过的链接、鼠标悬停、被选择的链接（鼠标按下去）；
                        表单：只读、必选、禁用、获得焦点。
        •结构性伪类
                :first-child ，:last-child ，:nth-child()， ……

        超链接访问过后 hover 样式就不再出现了，被点击访问过的超链接样式不具有 hover 和 active 了？
        解决：改变 CSS 属性的排列，排列顺序为： link （未访问过的链接）、 visited (访问过的链接)、 hover (鼠标悬停)、 active (被选择的链接，鼠标按下去)

样式优先级

!important > 内联样式 > id 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签（元素）选择器 = 伪元素选择器 > 通配选择器 > 继承得到的样式 > 浏览器默认样式；
优先级相同，靠后加载的样式覆盖之前的样式；
复合选择器样式的优先级权重计算（!important 最高；内联样式 1000；id 选择器 100；类选择器 10；元素选择器 1；通配选择器 0；继承来的样式没有优先级）。

和文字相关的一些属性都是可以继承的，和盒模型相关的一些属性都是不可以继承的。

!important

写在属性值之后，“;”之前。
<div style="background-color: green !important;"></div>

内联样式

直接写在标签的 style 属性上。
<div style="background-color: green !important;"></div>

选择器

1. id 选择器

给标签的 id 属性赋值， id 选择器由“#”和 id 属性值直接相连构成。
语法： #id值

2. 类选择器

给标签的 class 属性赋值，类选择器由“.”和 class 属性值直接相连构成。
语法： .class值

3. 属性选择器

根据标签的属性来选中标签。
        语法：[属性名] 选中含有指定属性名的所有标签；
        语法1：[属性名='h'] 选中属性名且该属性值为 h 的所有标签；
        语法2：[属性名~='chu'] 选中属性名且该属性值中包含 chu （用空格分隔的字词列表，例如：<p name="jiu chu"></p>）的所有标签；
        语法3：[属性名|='h'] 选中属性名且该属性值以 h 开头的所有标签；
        语法4：[属性名^='h' i] 选中属性名且该属性值以 h 开头的所有标签，后面加 i 表示忽略大小写；
        语法5：[属性名$='h' i] 选中属性名且该属性值以 h 结尾的所有标签，后面加 i 表示忽略大小写；
        语法6：[属性名*='h' i] 选中属性名且该属性值中含有字母 h 的所有标签，后面加 i 表示忽略大小写。

4. 标签（元素）选择器

语法：标签名

5. 通配选择器

选中页面种所有的元素
语法：*

复合选择器

6. 伪类选择器

一般用来表示元素的一些特殊的状态或特殊位置。
语法：标签名:···（“···” 为 :hover ，:nth-child()， ……）

7. 伪元素选择器

表示一些特殊的元素。
语法：标签名::···（中间一般为两个英文状态下的冒号，“···” 为 ::before ，::after， ……）

伪类和伪元素的区别：

伪类作用对象是整个元素，伪元素作用于元素的一部分。

8. 交集选择器

多个选择器连用，中间不用空格隔开。
例如：p.hello {color: blue;} // 选中所有 class 值为 hello 的 p 标签， p 为标签选择器， .hello 为类选择器（不仅仅局限于标签选择器，也可以是类选择器、……）

9. 并集选择器

多个选择器之间用英文状态下的“,”隔开。
例如：p, div {color: blue;} // 选中所有的 p 标签和 div 标签（不仅仅局限于标签选择器，也可以是类选择器、……）

10. 后代选择器

选中指定元素的指定后代，多个选择器之间用空格隔开。
例如：div p {color: blue;} // 选中 div 标签内的所有 p 标签（不仅仅局限于标签选择器，也可以是类选择器、……）

11. 子元素选择器

选中指定父元素的指定子元素，多个选择器之间用“>”隔开。
例如：div > p {color: blue;} // 选中 div 标签内的子 p 标签（不仅仅局限于标签选择器，也可以是类选择器、……）

<body>
    <p>aa</p>
    <div>
        <div></div>
        <p>bb</p><!-- 既被后代选择器选中，也被子元素选择器选中 -->
        <p><!-- 既被后代选择器选中，也被子元素选择器选中 -->
            <p>cc</p><!-- 只被后代选择器选中 -->
        </p>
        <p>dd</p><!-- 既被后代选择器选中，也被子元素选择器选中 -->
        <div></div>
    </div>
    <p>ee</p>
</body>

12. 兄弟选择器

选中指定元素的指定兄弟元素，多个选择器之间用“~”隔开。
例如：div ~ p {color: blue;} // 与 div 标签同级且在 div 标签之后的所有 p 标签（不仅仅局限于标签选择器，也可以是类选择器、……）

13. 相邻选择器

选中指定元素的指定的单个兄弟元素，多个选择器之间用“+”隔开。
例如：div + p {color: blue;} // 与 div 标签同级且在 div 标签之后的第一个 p 标签（不仅仅局限于标签选择器，也可以是类选择器、……）

<body>
    <p>aa</p>
    <div></div>
    <hr>
    <p>bb</p><!-- 既被兄弟选择器选中，也被相邻选择器选中 -->
    <p><!-- 只被兄弟选择器选中 -->
        <p>cc</p>
    </p>
</body>

部分优先级的比较：

样式优先级不是权重的简单相加就可以跨越的

部分 CSS 属性

容器有指定的高度时，属性值设置成百分数才会生效。

颜色

        #12345678 （12为红色区域 00~ff ，34为绿色区域 00~ff ，56为蓝色区域 00~ff ，78为透明度区域 00~ff）
        rgb(红 0~255, 绿 0~255, 蓝 0~255, 透明度 0~1) rgb() 指定第四个参数时相当于 rgba()
        hsl(色相 0~360, 饱和度 0%~100%, 亮度 0%~100%, 透明度 0~1)

font-family：可以同时设置多个字体，多个字体之间用英文状态下的逗号隔开，系统能支持使用设置的第一个字体就用第一个设置的字体，不能就尝试用下一个设置的字体。
        例如： font-family: Optima, Georgia, serif; 系统尝试用 Optima 字体，不支持就尝试用 Georgia 字体。
        使用建议：
                1. 字体列表最后协商通用字体族；
                2. 英文字体放在中文字体前面，例如： font-family: Helvettica, 微软雅黑; 微软雅黑字体里面包含字母，放在前面就会导致所有字体都是用微软雅黑；放在后面，中文为微软雅黑字体，字母为 Helvettica 字体。

font-size：设置字体大小。
        关键字： small 、 medium 、 large ；
        长度： px 、 em ；
        百分数：相对于父元素字体大小。

font-weight：跟字体相关，并不是所有的字体在设计时都设计了那么多字重（100~900，跨度100，400 为 normal ，700 为 bold）。

font-face：css3 中允许使用自定义字体的一个模块，主要是把自己定义的 web 字体嵌入到你的网页中。

@font-face {
    font-family: 'diyfont'; /* 字体名称（自定义） */
    src: url('diyfont.eot'); /* IE9+ ，url 自定义字体在当前服务器的位置（可填相对路径和绝对路径）*/
    src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 ， format 属性：字体的格式，主要用于浏览器识别；通常有以下几种：truetype 、 opentype 、 truetype-aat 、 embedded-opentype 、 avg 等 */
        url('diyfont.woff') format('woff'), /* chrome、firefox */
        url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
}

line-height：行高，想要字体在块级元素中垂直居中时，行高等于块级元素的 height 。

text-align：设置文本（图片）对齐方式，只对块元素生效。
        left：文本左对齐，默认值；
        right：文本右对齐；
        center：文本居中；
        justify：实现两端对齐文本效果（没用过）；
        inherit：从父元素中继承 text-align 属性的值（我几乎不用）。

letter-spacing：每个字符的间距。

word-spacing：每个单词之间的间距。

text-indent：块元素首行文本缩进。

text-decoration：文本的修饰（例如加下划线），修饰的颜色由 color 属性设置。
        none：无任何修饰，默认值；
        underline：下划线；
        overline：上划线；
        line-through：删除线；
        blink：闪烁的文本（没用过，看起来跟 none 一样）；
        inherit：从父元素中继承 text-decoration 属性的值（我几乎不用）。

html 里有多个连续的空格会被合并成一个，怎么规避呢？

white-sapce：指定元素内的空白和换行怎样处理。
        normal：一行内显示不下时会自动换行，多个连续的空格会被合并成一个，默认值；
        nowrap：强制不换行，出滚动条，多个连续的空格会被合并成；
        pre：不会自动换行，保留所有，包括空格和换行；
        pre-wrap：一行内显示不下时会自动换行，保留所有的空格和换行；
        pre-line：合并空格保留换行。

overflow-wrap：用于指定浏览器可以在任何目标元素内中断文本行，以防止在原始字符串太长而无法容纳时溢出。
        normal：允许内容顶开或溢出指定的容器边界；
        break-word：内容将在边界内换行，如果需要，单词内部允许断行。

white-sapce: pre-wrap; 和 overflow-wrap:break-word; 的区别：

某个单词太长直接超出边界， white-sapce: pre-wrap; 不会换行， overflow-wrap:break-word; 会对超出部分直接进行换行。

box-sizing：定义如何计算一个元素的总宽度和总高度。
        content-box：width(宽度) + padding(内边距) + border(边框) = 元素实际宽度（同理元素实际高度）；
        border-box： width(宽度) = 元素实际宽度（同理元素实际高度）；
        inherit：从父元素中继承 box-sizing 属性的值（我几乎不用）。

display：规定元素应该生成的框的类型。
        block：块级元素；
        inline：行级元素；
        inline-block：本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行；
        none：排版时完全被忽略。
        ……

CSS 中，每个属性都有一个初始值：
        例如：
                background-color 的初始值为 transparent ;
                margin-left 的初始值为 0;
可以用 initial 关键字显式重置为初始值：
        例如：background-color: initial;

CSS 工作原理

6cf30040d6024a488cbf346a781c0fd9~tplv-k3u1fbpfcp-zoom-in-crop-mark 3024 0 0 0.webp

margin 折叠（margin-collapse）

www.jianshu.com/p/54ac2a881…

三种比较大的布局方式：

常规流（也叫文档流，行级、块级、表格布局、 Flex Box 、 Grid 布局）、浮动、绝对定位。

常规流(Normal Flow)：
        •根元素、浮动和绝对定位的元素会脱离常规流，其它元素都在常规流之内（in-flow）;
        •常规流中的盒子，在某种排版上下文中参与布局。
                I. 行级排版上下文（Inline Formatting Context（IFC））
                        只包含行级盒子的容器会创建一个 IFC；
                        IFC 内的排版规则：
                                1. 盒子在一行内水平摆放；
                                2. 一行放不下时，换行显示；
                                3. text-align 决定一行内盒子的水平对齐；
                                4. vertical-align 决定一个盒子在行内的垂直对齐；
                                5. 避开浮动（float）元素。
                II. 块级排版上下文（Block Formatting Context（BFC））
                        某些容器会创建一个 BFC；
                                1. 根元素；
                                2. 浮动、绝对定位、 inline-block；
                                3. Flex 子项和 Grid 子项；
                                4. overflow 的值不是 visible 的块盒；
                                5. display: flow-root 、 flex 、 inline-block 、 table-cell 等;。
                        BFC 内的排版规则；
                                1. 盒子从上到下摆放；
                                2. 垂直 margin 合并；
                                3. BFC 内盒子的 margin 不会于外面的合并；
                                4. BFC 不会和浮动元素重叠。
                III. Flex Box（Inline Formatting Context（IFC））
                        它可以控制子级盒子的；
                                1. 摆放的流向（-> 、 <- 、<-（顺时针旋转90°）、 <-（逆时针旋转90°））；
                                2. 摆放顺序；
                                3. 盒子宽度和高度；
                                4. 水平和垂直方向的对齐；
                                5. 是否运行折行。
浮动 float
绝对定位 position: absolute;
         脱离常规流；
         相对于最近的非 static 祖先定位；
         使用 top 、 left 、 bottom 、 right 设置偏移长度；
         不会对流内元素布局造成影响。

选择器及部分 CSS 属性|青训营笔记