理解CSS ｜ 青训营笔记

文章第一句话为“这是我参与「第四届青训营 」笔记创作活动的第1天

CSS基础

CSS的全称是层叠样式表 （Cascading Style Sheets，缩写为 CSS ），是一种样式表语言，用于描述 HTML 或 XML 文档的呈现。

css的语法

• 像这样，一个属性与值的键值对称为声明

    background: blue;
  

  $\qquad$想对一个元素声明多个属性时可将声明的值卸载 { } 代码块（declaration block）

    {
        background: blue;
        color: red;
    }
  

css的使用方式

css有三种使用方式，外链式(推荐)、嵌入式、内联式

$\qquad$1、外链式

$\qquad\qquad$使用HTML标签 导入外部css，除此之外 标签还能导入别的资源，比如图片、脚 $\qquad\qquad$本和字体等；

        <link rel="stylesheet" href="./demo01.css">

$\qquad$2、嵌入式

$\qquad\qquad$在HTML页面的 标签内嵌入 标签

        <style>
            body {
                background: blue;
                color: red;
                }
        </style>

$\qquad$3、内联式

$\qquad\qquad$在HTML标签内 添加 style 属性

        <div style="width: 100px;height :100px;"></div>
    

选择器

选择器的作用就是，将CSS中的样式能与HTML中的元素一一对应

基础选择器

$\qquad$标签选择器 ： div

$\qquad\qquad$选择元素为 div 的元素

        div{
            width : 100px;
        }

$\qquad$类选择器 ： .box1

$\qquad\qquad$选择元素 class 值为box1的元素

        .box1{
            width : 100px;
        }

$\qquad$id选择器 ： #picker

$\qquad\qquad$选择元素的 id 值为 picker的元素

        #picker{
            width : 100px;
        }

$\qquad$通配选择器 ： *

$\qquad\qquad$选择所有元素

        *{
            width : 100px;
        }

$\qquad$属性选择器

$\qquad$[属性名] 选择含有指定属性的元素
$\qquad$[属性名=属性值] 选择含有指定属性和属性值的元素
$\qquad$[属性名^=属性值] 选择属性值以指定值开头的元素
$\qquad$[属性名$=属性值] 选择属性值以指定值结尾的元素
$\qquad$[属性名*=属性值] 选择属性值中含有某值的元素的元素

        //所有拥有属性名href的a元素，且属性值以example开头的元素
        a[href^="example"] {
          color : red;
        }
        //所有拥有属性名href的元素，且属性值以.org结尾的元素
        [href$=".org"] {
          color : red;
        }

选择器的组合

名称	语法	说明	示例
直接组合	AB	满足A同时满足B	input:focus
后代组合	A B	选中B ， 如果它是A的子孙	nav a
亲自组合	A > B	选中B ， 如果它是A的子元素	Section > p
兄弟选择器	A ~ B	选中B ， 如果它在A后且和A同级	h2 ~ p
相邻选择器	A + B	选中B ， 如果它紧跟在A后面	h2 + p

交集选择器

$\qquad$选中同时符合多个条件的元素

$\qquad$语法：选择器1选择器2选择器3选择器n{}

        div.red{
            font-size: 30px;
        }
        .a.b.c{
            color: rosybrown;
        }

$\qquad$注意：交集选择器中如果有元素选择器，必须使用元素选择器开头

选择器组

$\qquad$多个元素拥有相同的样式时，可以用选择器组将这些元素统一设置样式

        body,h1,h2,li{
        color : red;
        }


        [type = "checkbox"],[type = "radio"]{
        box-sizing : border-box;
        }

  伪类    

条件伪类 ：

$\qquad$:lang()：基于元素语言来匹配页面元素；-
$\qquad$:dir()：匹配特定文字书写方向的元素；-
$\qquad$:has()：匹配包含指定元素的元素；-
$\qquad$:is()：匹配指定选择器列表里的元素；-
$\qquad$:not()：用来匹配不符合一组选择器的元素； 

行为伪类 ：

$\qquad$:active：鼠标激活的元素；-
$\qquad$:hover：鼠标悬浮的元素；-
$\qquad$::selection：鼠标选中的元素；

状态伪类 ：

$\qquad$:target：当前锚点的元素；-
$\qquad$:link：未访问的链接元素；-
$\qquad$:visited：已访问的链接元素；-
$\qquad$:focus：输入聚焦的表单元素；-
$\qquad$:required：输入必填的表单元素；-
$\qquad$:valid：输入合法的表单元素；-
$\qquad$:invalid：输入非法的表单元素；-
$\qquad$:in-range：输入范围以内的表单元素；-
$\qquad$:out-of-range：输入范围以外的表单元素；-
$\qquad$:checked：选项选中的表单元素；-
$\qquad$:optional：选项可选的表单元素；-
$\qquad$:enabled：事件启用的表单元素；-
$\qquad$:disabled：事件禁用的表单元素；-
$\qquad$:read-only：只读的表单元素；-
$\qquad$:read-write：可读可写的表单元素；-
$\qquad$:blank：输入为空的表单元素；-
$\qquad$:current()：浏览中的元素；-
$\qquad$:past()：已浏览的元素；-
$\qquad$:future()：未浏览的元素；  

结构伪类 ：

$\qquad$:root：文档的根元素；-
$\qquad$:empty：无子元素的元素；-
$\qquad$:first-letter：元素的首字母；-
$\qquad$:first-line：元素的首行；-
$\qquad$:nth-child(n)：元素中指定顺序索引的元素；-
$\qquad$:nth-last-child(n)：元素中指定逆序索引的元素；；-
$\qquad$:first-child：元素中为首的元素；-
$\qquad$:last-child：元素中为尾的元素；-
$\qquad$:only-child：父元素仅有该元素的元素；-
$\qquad$:nth-of-type(n)：标签中指定顺序索引的标签；-
$\qquad$:nth-last-of-type(n)：标签中指定逆序索引的标签；-
$\qquad$:first-of-type：标签中为首的标签；-
$\qquad$:last-of-type：标签中为尾标签；-
$\qquad$:only-of-type：父元素仅有该标签的标签；   

$\qquad$链接：juejin.cn/post/694120…

伪元素 ：

$\qquad$::before：在元素前插入内容；

$\qquad$::after：在元素后插入内容；

颜色

颜色关键字、RGB 颜色、HSL 颜色

颜色关键字 ： 是不区分大小写的标识符，它表示一个具体的颜色，比如 white（白），黑（black）等；

• RGB[A]颜色 ： 颜色是由 R(red)-G(green)-B(blue)-A(alpha) 组成的色彩空间。
• •   在CSS中有两种表现形式 ：
  • 1、十六进制符号(#ff0000[aa])
  • 2、函数符rgb(255, 0, 0)， 或者 rgb(100%, 0, 0)
  •   十六进制符号 ：
  •     RGB 中的每种颜色的值范围是 00~ff，值越大表示颜色越深。所以一个颜色正常是 6 个十六进制字符加上 # 组成，比如红色就是 #ff0000。
  •     如果 RGB 颜色需要加上不透明度，那就需要加上 alpha 通道的值，它的范围也是 00~ff，比如一个带不透明度为 67% 的红色可以这样写 #ff0000aa。
  •     使用十六进制符号表示颜色的时候，都是用 2 个十六进制表示一个颜色，如果这 2 个字符相同，还可以缩减成只写 1 个，比如，红色 #f00；带 67% 不透明度的红色 #f00a。
  •   函数符 ：
  •     当 RGB 用函数表示的时候，每个值的范围是 0~255 或者 0%~100%，所以红色是 rgb(255, 0, 0)， 或者 rgb(100%, 0, 0)。
  •     如果需要使用函数来表示带不透明度的颜色值，值的范围是 0~1 及其之间的小数或者 0%~100%，比如带 67% 不透明度的红色是 rgba(255, 0, 0, 0.67) 或者 rgba(100%, 0%, 0%, 67%)

  • 需要注意的是 RGB 这 3 个颜色值需要保持一致的写法，要嘛用数字要嘛用百分比，而不透明度的值的可以不用和 RGB 保持一致写法。比如 rgb(100%, 0, 0) 这个写法是无效的；而 rgb(100%, 0%, 0%, 0.67) 是有效的。

  •     在第 4 代 CSS 颜色标准中，新增了一种新的函数写法，即可以把 RGB 中值的分隔逗号改成空格，而把 RGB 和 alpha 中的逗号改成 /，比如带 67% 不透明度的红色可以这样写 rgba(255 0 0 / 0.67)。另外还把 rgba 的写法合并到 rgb 函数中了，即 rgb 可以直接写带不透明度的颜色。
  •      链接：juejin.cn/post/694120…

• HSL[A] 颜色 ： 是由色相(hue)-饱和度(saturation)-亮度(lightness)-不透明度组成的颜色体系。
• • 
  •   写法上可以参考 RGB 的写法，只是参数的值不一样。

\

• 字体

• •   字体族
  •     font-family: "Gill Sans Extrabold", sans-serif;
  •     为了兼容性问题，字体族会设置多个，按从左向右的顺序匹配。
  •     通用字体族分别为：
  • Serif 衬线体；
  • Sans-Serif 无衬线体；
  • Cursive 手写体；
  • Fantasy：梦幻字体族；
  • Monospace：等宽字体。
  •   远程字体 ：
  •     可以将服务器中的字体直接提供给用户使用

  • @font-face {
                /* 指定字体名 */
                font-family: myfont;
                /* 服务器中字体的路径 */
                src: url( )format("") ;
    }
    

  •     问题
  •       1.加载速度
  •       2.版权问题
  •   字体常用样式 ：
  •      color ： 用来设置字体颜色
  •     font-size ： 字体大小
  •       有三种取值方式，关键字、长度单位(px、em)、百分比。
  •       当字体使用百分比时是相对父元素字体大小的。
  •     font-style ： 字体样式
  •       normal(默认)、italic(斜体)、oblique(倾斜体，字体库不存在倾斜体时会用斜体替代)
  •     font-weight ：字体粗细
  •       font-weight，可以取数字值（100-900），也可以使用关键字 normal（400）、bold（700）。需要注意的是，不是所有的字体粗细都存在数字表示的。
  •     font-family 字体族（字体的格式）

  • serif	衬线字体
    sans-serif	非衬线字体
    monospace	等宽字体

  •       指定字体类别，浏览器会自动使用该类别下的字体
  •       -font-family可以同时指定多个字体，多个字体间使用 ‘ , ’隔开字体生效时优先使用第一个，第一个无法使用则使用第二个 以此类推
  •     line-height ： 行高
  •       行高指的是文字占有的实际高度，可以直接指定一个大小（px em）也可以直接为行高设置一个整数。如果是一个整数的话，行高将会是字体的指定的倍数
  •       行高还经常用来设置文字的行间距
  •       行间距 = 行高 - 字体大小
  •       默认行高line-height：1.33；
  •     font-size ：字体框
  •       字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度行高会在字体框的上下平均分配
  •   文本样式 :
  •     text-align : 文件的水平对齐 可选值left(左对齐)、right(右对齐)、center(居中对齐)、justify(两端对齐)
  •     vertical-align : 设置元素垂直对齐的方式 可选值baseline(默认值 基线对齐)、top(顶部对齐)、bottom(底部对齐)、mddle(居中对齐)
  •     text-decoration : 设置文本修饰 可选值 none(无)、 underline(下划线)、 line-through(删除线)、 overline(上划线)
  •     white-space : 设置网页如何处理空白 可选值 normal(正常)、 nowrap(不换行)、 pre(保留空白)

\

CSS进阶

• 选择器的权重

• •   样式冲突 ： 当通过不同选择器，选中相同的元素，并且为相同的样式设置不同值时，此时就发生了样式冲突

  • \

  •   发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定

  • 内联样式	1	0	0	0
    id选择器	0	1	0	0
    类和伪类选择器	0	0	1	0
    元素选择器	0	0	0	1
    通配选择器	0	0	0	0
    继承选择器	没有优先级	没有优先级	没有优先级	没有优先级

  •   比较优先级时，需将所有选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）

  •   选择器的累加不会超过最大的数量级，如：类选择器再高也不会超过id选择器如果优先级计算后相同，则使用靠下的样式

  •   在样式后面添加一个!important,升至最大优先级甚至超过内联样式 慎用！！！

• 样式的继承
• •   样式的继承 为一个元素设置样式的同时也会应用到他的后代元素上
  •   利用继承，可将一些通用的样式统一设置到共同的祖先元素上
  • 注意：并不是所有的样式都会被继承
  • 如 ：背景相关的,布局相关等这些样式不会被继承

• css的工作原理

• •   浏览器显示文档时，要将文档的内容与样式内容结合，在处理文档的时候包含两个阶段 ：
  •     1、浏览器将HTML和CSS转换为DOM(Document Object Model)，DOM在计算机内存中表示文档，使得文档和CSS结合
  •     2、浏览器显示DOM的内容
  • 
  •     计算机从上而下加载HTML文件并对其进行解析生成DOM树，同时在解析完HTML后加载并解析CSS文档，然后将解析好的CSS样式赋给DOM树中对应的元素，最后有浏览器展示出来

  • ---

  •     DOM简介：
  •       DOM是一个树形结构，在HTML中的每一个元素，属性，甚至于文本都可以被转换为DOM中的一个节点。每个节点在节点树中都有对应的关系节点(比如父节点，兄弟节点)
  •     浏览器是如何渲染页面的 ：
  •       根据html文件构造DOM树根据css文件构造CSSOM树。构建树期间，如果遇到JS，则阻塞DOM树和CSSOM树的构建，优先加载JS文件，加载完毕后再继续构建DOM树和CSSOM 树。(JS会对DOM节点进行操作，浏览器无法预测未来的DOM节点的具体内容，为了防止无效操作，节省资源，只能阻塞DOM树的构建。譬如，若不阻塞DOM树的构建，若JS删除了某个DOM节点A，那么浏览器为构建此节点A花费的资源就是无效的。)
  •        HTML 文档中的所有内容皆是节点，各节点之间拥有层级关系，如父子关系、兄弟关系等，彼此相连，构成DOM树。
  •        CSS文档中，所有元素皆是节点，与HTML文件中的标签节点一一对应。CSS中各节点之间同样拥有层级关系，如父子关系、兄弟关系等，彼此相连，构成CSSOM树。
  •       ————————————————
  •     原文链接：blog.csdn.net/qq_42685979…

\

\

\

块元素 ： 块元素会在页面中独占一行默认宽度是父元素的全部（会把父元素盛满）默认高度是被内容撑开（子元素）

行内元素 ： 行内元素不会独占页面的一行，只占自身大小行内元素在页面中由左向右水平排列，如果一行之中不能容纳所有的行内元素则会换到第二行继续排列行内元素的宽高总是被内容撑开

• 文档流

• •   在 CSS 的世界中，会把内容按照从左到右、从上到下的顺序进行排列显示。正常情况下会把页面分割成一行一行的显示，而每行又可能由多列组成，所以从视觉上看起来就是从上到下从左到右，而这就是 CSS 中的流式布局，又叫文档流。文档流就像水一样，能够自适应所在的容器，一般它有如下几个特性：

  • 块级元素默认会占满整行，所以多个块级盒子之间是从上到下排列的；

  • 内联元素默认会在一行里一列一列的排布，当一行放不下的时候，会自动切换到下一行继续按照列排布；

  •   如何脱离文档流呢？

  •   脱流文档流指节点脱流正常文档流后，在正常文档流中的其他节点将忽略该节点并填补其原先空间。文档一旦脱流，计算其父节点高度时不会将其高度纳入，脱流节点不占据空间。有两种方式可以让元素脱离文档流：浮动和定位。

  • 使用浮动（float）会将元素脱离文档流，移动到容器左/右侧边界或者是另一个浮动元素旁边，该浮动元素之前占用的空间将被别的元素填补，另外浮动之后所占用的区域不会和别的元素之间发生重叠；

  • 使用绝对定位（position: absolute;）或者固定定位（position: fixed;）也会使得元素脱离文档流，且空出来的位置将自动被后续节点填补。

  • \

  •   链接：juejin.cn/post/694120…

  • ---

  • 自我理解 ：网页是一层罗着一层通过CSS可以分别为每一层设计样式作为用户来讲只能开到最顶层这些层中最底层成为文档流，文档流是网页的基础

  • \

  • \

• 盒模型
• •   在 CSS 中任何元素都可以看成是一个盒子，而一个盒子是由 4 部分组成的：内容（content）、内边距（padding）、边框（border）和外边距（margin）。
  •   盒模型有 2 种：标准盒模型和 IE 盒模型，本别是由 W3C 和 IExplore 制定的标准。

  • .box {
        width: 200px;
        height: 200px;
        padding: 10px;
        border: 1px solid #eee;
        margin: 10px;
    }
    

  •   标准盒模型认为：盒子的实际尺寸 = 内容（设置的宽/高） + 内边距 + 边框
  • 
  •   所以 .box 元素内容的宽度就为 200px，而实际的宽度则是 width + padding-left + padding-right + border-left-width + border-right-width = 200 + 10 + 10 + 1 + 1 = 222。
  •   IE 盒模型认为：盒子的实际尺寸 = 设置的宽/高 = 内容 + 内边距 + 边框
  • 
  •   .box 元素所占用的实际宽度为 200px，而内容的真实宽度则是 width - padding-left - padding-right - border-left-width - border-right-width = 200 - 10 - 10 - 1 - 1 = 178。
  •   现在高版本的浏览器基本上默认都是使用标准盒模型
  •   在 CSS3 中新增了一个属性 box-sizing，允许开发者来指定盒子使用什么标准，它有 2 个值：
  • content-box：标准盒模型；
  • border-box：IE 盒模型；

• 布局

  

    格式化上下文    

  • 格式化上下文（Formatting Context）是 CSS2.1 规范中的一个概念，大概说的是页面中的一块渲染区域，规定了渲染区域内部的子元素是如何排版以及相互作用的。    不同类型的盒子有不同格式化上下文，大概有这 4 类：- BFC (Block Formatting Context) 块级格式化上下文；- IFC (Inline Formatting Context) 行内格式化上下文；- FFC (Flex Formatting Context) 弹性格式化上下文；- GFC (Grid Formatting Context) 格栅格式化上下文；    其中 BFC 和 IFC 在 CSS 中扮演着非常重要的角色，因为它们直接影响了网页布局，所以需要深入理解其原理。

  BFC

  •     块格式化上下文，它是一个独立的渲染区域，只有块级盒子参与，它规定了内部的块级盒子如何布局，并且与这个区域外部毫不相干。
  • 

  BFC 渲染规则

  • 内部的盒子会在垂直方向，一个接一个地放置；
  • 盒子垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻盒子的 margin 会发生重叠；
  • 每个元素的 margin 的左边，与包含块 border 的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此；
  • BFC 的区域不会与 float 盒子重叠；
  • BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  • 计算 BFC 的高度时，浮动元素也参与计算。

  如何创建 BFC？

  • 根元素：html

  • 非溢出的可见元素：overflow 不为 visible

  • 设置浮动：float 属性不为 none

  • 设置定位：position 为 absolute 或 fixed

  • 定义成块级的非块级元素：display: inline-block/table-cell/table-caption/flex/inline-flex/grid/inline-grid

  BFC 应用场景

  • 自适应两栏布局

  • 清除内部浮动

  • 防止垂直 margin 合并

  •     资料参考于掘金：大海我来了 链接：juejin.cn/post/694120…

  IFC

  •     IFC 的形成条件非常简单，块级元素中仅包含内联级别元素，需要注意的是当IFC中有块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个 IFC。

  IFC 渲染规则

  • 子元素在水平方向上一个接一个排列，在垂直方向上将以容器顶部开始向下排列；
  • 节点无法声明宽高，其中 margin 和 padding 在水平方向有效在垂直方向无效；
  • 节点在垂直方向上以不同形式对齐；
  • 能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的线盒（line box）。线盒的宽度是由包含块（containing box）和与其中的浮动来决定；
  • IFC 中的 line box 一般左右边贴紧其包含块，但 float 元素会优先排列。
  • IFC 中的 line box 高度由 line-height 计算规则来确定，同个 IFC 下的多个 line box 高度可能会不同；
  • 当内联级盒子的总宽度少于包含它们的 line box 时，其水平渲染规则由 text-align 属性值来决定；
  • 当一个内联盒子超过父元素的宽度时，它会被分割成多盒子，这些盒子分布在多个 line box 中。如果子元素未设置强制换行的情况下，inline box 将不可被分割，将会溢出父元素。

  IFC 应用场景

  • 水平居中：当一个块要在环境中水平居中时，设置其为 inline-block 则会在外层产生 IFC，通过 text-align 则可以使其水平居中。
  • 垂直居中：创建一个 IFC，用其中一个元素撑开父元素的高度，然后设置其 vertical-align: middle，其他行内元素则可以在此父元素下垂直居中。
  •     资料参考于掘金：大海我来了 链接：juejin.cn/post/694120…

  position

  •      定位(position)定位是一种更高级的布局手段，通过定位可以将元素摆放到页面的任意位置使用position属性设置定位

  • static	默认值 元素是静止的没有开启定位
    relative	开启元素的相对定位
    absolute	开启元素的绝对定位
    fixed	开启元素的固定定位
    sticky	开启元素的粘滞定位

  •     相对定位 ：当元素的position属性值设置为relative时则开启了元素的相对定位

  •       相对定位的特点：

  • 元素开启相对定位后，如果不设置偏移量元素不会发生任何变化

  • 相对定位是参照于元素在文档流中的位置进行定位的

  • 相对定位会提升元素的层级

  • 相对定位不会使元素脱离文档流

  • 相对定位不会改变元素的性质块还是块，行内还是行内

  •      绝对定位 ：当元素的属性值设置为absolute时，则开启了元素的绝对定位

  •       绝对定位特点

  • 开启绝对行为后，如果不设置偏移量元素的位置不会发生变化

  • 开启绝对定位后，元素会从文档流中脱离

  • 绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开

  • 绝对定位会使元素提升一个层级

  • 绝对定位元素是相对于其包含块进行定位的

  •     固定定位 ：将元素的position属性设置为fixed则开启了元素的固定定位

  •       固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样唯一不同的是固定定位永远参照于浏览器的视口进行定位固定定位的元素不会随网页的滚动条滚动

  •     元素的层级

  •       对于开启了定位的元素，可以通过z—index属性来指定元素的层级 z-index需要一个整数作为参数，值越大元素的层级越高元素的层级越高越优先显示如果元素层级一样则优先显示靠下的祖先元素层级再高也不会盖住后代元素

  •     偏移量（offset）当元素开启了定位以后，可以通过偏移量来设置元素的位置

  •       top ： 定位元素和定位位置上边的距离

  •       bottom ： 定位元素和定位位置下边的距离

  •       定位元素垂直方向的位置由top和bottom两个属性来控制通常情况下我们只会使用其一top值越大，定位元素越向下移动bottom值越大，定位元素越向上移动
    

  •       left ： 定位元素和定位位置左侧的距离

  •       right ： 定位元素和定位位置右侧的距离

  •       定位元素水平方向的位置由left和right两个属性来控制通常情况下我们只会使用其一left值越大，定位元素越向右移动right值越大，定位元素越向左移动

• Flex 布局
  •   可参阅掘金“精制动画讲解所有flex布局方式！”文章学习
  •   作者：掘金干货君 链接：juejin.cn/post/711707… 来源：稀土掘金

• Grid布局
  •   可参阅掘金“最强大的 CSS 布局 —— Grid 布局”
  •   作者：Gopal 链接：juejin.cn/post/685457… 来源：稀土掘金