https://web.dev/learn/css/

盒模型

Demo: https://codepen.io/a2h1o9/pen/xxqppaP

  1. 盒模型从内到外分别为
    1. content
    2. padding
    3. border
    4. margin
    5. shadow（与margin共享空间）
    6. outline（与margin共享空间）
  2. 盒模型用于判断 width 和 height 的作用范围，如：box-sizing: content-box 为 宽高的设定作用在内容上。
  3. 盒模型分为：
    1. content-box
    2. padding-box（不起作用）
    3. border-box
    4. marging-box（不起作用）
  4. box-sizing 在 Emmet 中只有 bxs:bb 和 bxs:cb
  5. 把所有元素设置为盒模型
    1. *,
    2. *::before,
    3. *::after{
    4. box-sizing: border-box;
    5. }

    选择器

    Demo: https://codepen.io/a2h1o9/pen/BaWYKGz

选择器分为

  1. 通配符：*
  2. 标签名：div section 等
  3. 类名：.class-name
  4. ID名：#id_name
  5. 属性：[data-name] [data-name='value'] [data-name*='al'] [data-name^='val']``[data-name$='ue']
  6. 伪类：:hover :marker 等
  7. 伪元素：::before ::after 等
  8. 子孙元素：.level-1 .level-N
  9. 直系子元素：.level-1 > .level-1-1
  10. 共同父元素的相邻元素：.box .item-1 + .item
  11. 共同父元素的后续元素：.box .item-1 ~ .item

    级联

    级联是指在CSS中用于处理多个样式规则冲突的作用算法

级联的四个规则

  1. 规则位置（<link> < <style> < <a style=""）和顺序（后者覆盖前者）
  2. 具体的选择器（tag < class < id）选择器太复制会导致样式难以覆盖，要保持使用简单的选择器。
  3. 规则的来源：浏览器样式、浏览器插件样式、自己写的样式（明确度由低到高）
    1. User Agent base styles：来自浏览器的样式
    2. Local User styles：来自系统、浏览器插件的样式
    3. Authored CSS：写入的CSS
    4. Local User Styles !important 来自系统、浏览器插件的 !important 样式
    5. User Agent !important 来自浏览器的 !important 样式

  4. 重要程度（由低到高）

    1. 普通的样式，如：font-size , background , color 等
    2. animation 动画
    3. !important
    4. transition 形变（生效时，改变的状态时虚拟状态，导致重要程度变高）

      选择器

      选择器中样式是否生效在于选择器是否生效，而选择器是否生效则由选择器的分数决定

  5. * => 0

  6. div ::section => 1
  7. .class-name :hover [data-key] => 10 （其中 :not 不计分）
  8. #id => 1,000
  9. !important => 10,000

其中，选择器叠加则分数叠加

  • a.class-name => 11
  • .class-name.class-name-1 => 20
  • a#id.class-name li.class-name-1 => 1 + 1000 + 10 + 1 + 10 => 1022

还可以用 x-x-x 的方式，更直观的表达：

  • a.class-name => 0-1-1
  • .class-name.class-name-1 => 0-2-0
  • a#id.class-name li.class-name-1 => 1-2-2

当分数相同时，则按书写顺序，后者覆盖前者

继承

https://codepen.io/a2h1o9/pen/ExWQGoy

  1. 继承的逻辑是，当一个元素设置了一个可以被继承的属性时，这个元素的子孙辈的元素都能继承这个属性值。
  2. 点击这里查看可以被继承的属性
  3. inherit 这个值可以使得元素从父元素中继承样式，如，<p> 设置了 color: red ，而 <aside> 设置了 color: blue，此时 <aside> 中的 <p> 是红色的，设置 aside p 的 color: inherit 则可以使得 <aside> 中的 <p> 为蓝色。这样做的好处是无需关注 <p> 本身的颜色和需要给 aside p 设置什么颜色，只需关注 <aside> 的颜色即可
  4. initial 这个值可以使得属性值还原。每个属性都有一个初始值，这个值可以使得我们无需关注属性的初始值是什么，直接还原这个属性值。

  5. unset 这个值使得可以继承的属性设置为 inherit ，使得不能继承的属性设置为 initial。可以配合 all 使用：all: unset。

    颜色

    https://codepen.io/a2h1o9/pen/bGqLPQa

  6. 16进制颜色 #AABBCC 对应 RGB 的三个颜色，还有 #AABBCCDD 对应 RGBA 的三个颜色与透明度

  7. rgb() rgba()：其中 rgb() 可以 rgb(0 0 0) 和 rgb(0 0 0 / 50%) 不使用逗号和表示透明度
  8. hsl 第一个参数 0 - 360 或者是角度(deg) ，也可以像 rgb 一样不使用逗号和追加 / 50% 表示透明度
  9. 还有一些 颜色关键字

    Flexbox

    https://www.yuque.com/a2h1o9/leoxvw/wbpzih

Grid

https://www.yuque.com/a2h1o9/leoxvw/quicwb

伪元素(pseudo-elemets)

  • ::before 和 ::after
  • ::first-letter ：一个块级元素的一个字符
  • ::first-line ：一个块级元素的的第一行字符
  • ::backdrop
  • ::markder ：ol li ，ul li 和 summary 自带的标签
  • ::selection ：选中字符的样式
  • ::placeholder ：<input /> ，<textarea> 标签的提示语

  • ::cue

    伪类

    https://codepen.io/a2h1o9/pen/gOmezVd

  • :hover ：鼠标在元素上时

  • :active ：鼠标在元素上按下时（onmousedown）
  • :focus ：按钮，输入框，选中时（鼠标）
  • :focus-within ：当这个元素的子元素选中时，该元素会有这个伪类
  • :focus-visible ：按钮（键盘），输入框，选中时
  • :target ：转跳到锚点处时
  • :link ：<a> 标签中含有href属性时
  • :visited ：<a> 标签被访问后的样式
  • :disabled ：表单元素中有 disabled 属性的元素时
  • :enabled ：表单元素中没有 disabled 属性的元素时
  • :checked ：<input type="checkbox" /> 选中时
  • :indeterminate ：<input type="checkbox" /> 半选中，<progress> 没有固定值时
  • :placeholder-shown ：placeholder 有值且元素本身值为空时
  • :valid ：如 <input type="email" /> 符合正则规则时
  • :invalid ：如 <input type="email" /> 不符合正则规则时
  • :in-range ：如 <input type="number" min="1" max="10" /> 值在范围内时
  • :required ：如 <input required />
  • :optional ：如 <input />
  • first-child last-child only-child ：子元素中第一个，最后一个是当前标签时生效，不是当前标签时不生效
  • first-of-type last-of-type ：子元素中第一个，最后一个当前标签
  • nth-child(x) ：第几个子元素，若指定元素标签如 div:nth-child(x) 则第x个子元素为 <div> 才会生效
  • nth-of-type(x) ：如 div:nth-of-type(x) 为子元素中的第x个标签为 <div> 的元素
  • only-of-type ：如 strong:only-of-type 为子元素中若只有一个<strong> 标签则生效
  • :empty ：当一个元素没有子元素时（没有html标签，没有字符，甚至没有空格才行）
  • :is() ：可以简化CSS写法，如 .post img, post video{} => .post :is(img, video){}

  • :not() ：可以排除一些选择器，如 post :not(img)

    Border（border-image待）

  • 缩写：border: 1px solid #eee

  • border-style ：
    • 八种 style 样式：dotted dashed solid double groove ridge inset outset
    • 可以四个方向分别设置：border-top-style border-right-style border-bottom-style border-left-style
  • border-color：
    • 默认颜色为当前元素的字体颜色（来自 color 或者 继承的字体颜色）
    • 可以四个方向分别设置：border-top-color border-right-color border-bottom-color border-left-color
  • border-width：
    • 三个关键字：thin medium thick
    • 可以使用长度单位，如：px em rem %
    • 可以四个方向分别设置：border-top-width``border-right-width``border-bottom-width border-left-width
  • border-radius：
    • 可以四个方向分别设置：border-top-left-width``border-top-right-width``border-bottom-right-width border-bottom-left-width
    • 缩写：boder-radius: 5px 4px 3px 2px
    • 还能画椭圆：boder-radius: 5px 4px 3px 2px / 2px 3px 4px 5px
  • border-image ：

    Shadow

    https://codepen.io/a2h1o9/pen/zYZaBvE

box-shadow

  • box-shadow: <水平偏移量> <垂直偏移量> <阴影模糊半径> <阴影扩散半径> <阴影颜色>
  • 默认颜色为当前元素的字体颜色（来自 color 或者 继承的字体颜色）
  • 可以多个方向，多个颜色的叠加
  • 阴影形状受到 border-radius 的影响

  • 当 overflow: hidden 时，阴影不展示

    text-shadow

  • text-shadow: <水平偏移量> <垂直偏移量> <阴影模糊半径> <阴影颜色>

  • 默认颜色为当前元素的字体颜色（来自 color 或者 继承的字体颜色）
  • 可以多个方向，多个颜色的叠加

    Drop shadow（待）

    Focus（待）

    Z-index（待Creating a stacking context）

    https://codepen.io/a2h1o9/pen/jOBKMaK

  1. 控制Z方向上的顺序
  2. 在一般情况下，设置了 z-index 但是不生效时，需要给元素 position 设置一个 static 以外的值（flexbox和grid不需要）。
  3. 可以通过给 z-index 设置负值，使得元素Child展示在元素Parent后面，但需要元素P z-index: auto ，如果不行，参考2
  4. z-index 的堆叠根据父节点的 z-index ，父元素不同时，根据父元素的优先级来堆叠，同一父元素，根据元素本身堆叠
  5. Creating a stacking context

    Function（clamp等 待）

    https://codepen.io/a2h1o9/pen/PopavNQ

  • 大多数都是纯函数
  • 在某些情况下可以互相嵌套
  • 定义属性需要写在 :root 中，且变量需要已 -- 开头，如 --color-red ，且大小写敏感
  • 使用 var() 调用自定义的属性，可以传入两个参数，当属性不存在时，返回第二个参数，如 var(--color-red, red)
  • attr() 可以返回标签上的属性值
  • url() 常用于 img 等
  • calc() 计算数字，min() 取最小值，max() 取最大值
  • clamp() 待
  • clip-path 裁剪，配合 circle 等使用，创建各种形状的显示区域
  • transform 形变
    • rotarteX() rotateY() rotateZ()
    • scaleX() scaleY() scaleZ()
    • translateX() translateY() translateZ()
  • skew skew() skewX() skewY()

  • perspective 透视

    渐变

    https://codepen.io/a2h1o9/pen/YzZvoag

  • linear-gradient() 线性渐变，可以传入两个或多个颜色，还可以传入一个方向（角度45deg、关键字to right）

  • radial-gradient() 圆形渐变，从圆心开始，圆心位置首 background-position 影响
  • conic-gradient() 圆锥型渐变，conic-gradient(form <起始角度> at <锥形中心x坐标> <锥形中心y坐标>, <颜色> [角度] [角度])
  • 重复 repeating-linear-gradient() repeating-radial-gradient() repeating-conic-gradient()

  • 混合 如 backgrand: linear-gradient(), linear-gradient();

    动画Animation

    @keyframe

  • 定义动画的名称和某个时刻的状态，如 @keyframe bling {form:{} to:{}}

  • 可以使用 from {} to{} 也可以使用百分比 10%{} 50%{} 100%{}

    animation properties

  • animation-during 一次完整的动画的持续时间，完成一次 @keyframe 过程的时间

  • animation-timing-function 变化曲线，如 linear ease ease-in 等，还可以自定义曲线 cubic-bezier()
  • animation-iteration-count 动画的重复次数，可以传入具体次数或一直重复（ 10/infinite ）
  • animation-direction 动画方向，如 normal reverse alternate alternate-reverse
  • animation-delay 动画开始的延迟时间
  • animation-play-state 动画运行中、暂停的状态，running paused

  • animation-fill-mode CSS动画在执行之前和之后如何将样式应用于其目标

    更多内容

    CSS reset

  • https://piccalil.li/blog/a-modern-css-reset