zhangdizhangdi

CSS

简介

Cascading Style Sheets，层叠样式表

盒模型

一个盒子由四个部分组成：content padding border margin

box-sizing 用来控制元素的盒子模型的解析模式，默认为 content-box

  • context-box：标准盒模型，默认
    • 设置的height/width = content
  • border-box：替代盒模型
    • 设置的height/width = content + padding + border
参考

BFC

Block Formatting Context，块级格式化上下文。
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素。

特性：

  • 包含内部浮动
  • 排除外部浮动
  • 防止外边距重叠

创建BFC：

  • html
  • float: left、right
  • position: absolute、fixed
  • overflow: hidden、scroll、auto
  • display
    • inline-block
    • flex、inline-flex
    • grid、inline-grid
    • table、table-*、inline-table
    • flow-root
  • column-count、column-width、column-span
  • contain: size、layout、paint
参考

伪类/伪元素

伪类

部分：

  • :hover
  • :last-child
  • :first-child
  • :nth-child(n)
  • :not(selector)

伪元素

  • ::before
  • ::after
  • ::first-line
  • ::first-line
  • ::selection
  • ::grammar-error
  • ::spelling-error
参考

选择器

  • id选择器 #box
  • 类(class)选择器 .wrapper
  • 标签/元素选择器 h1 div
  • 属性选择器
    • [attribute] 选择带有attribute属性的元素
    • [attribute=value] 选择所有attribute=value的元素
    • [attribute~=value] p[class~="special"] 选择attribute属性包含value的元素
    • [attribute|=value] div[lang|="zh"] 选择attribute属性以value开头的元素
    • [attribute*=value] div[class*="box-"] 选择attribute属性值/字符串包含value的元素
    • [attribute^=value] 选择attribute属性值/字符串开头为value的元素
    • [attribute$=value] 选择attribute属性值/字符串结尾为value的元素
  • 伪类选择器 a:hover
  • 伪元素选择器 .box::after
  • 关系选择器
    • 后代选择器 #box .title，儿子、孙子…
    • 子代选择器 .box > .title，儿子
    • 相邻兄弟选择器 h1 + p
    • 所有兄弟选择器 h1 ~ p，
  • 群组选择器 div, p

优先级权重

三个不同的值相加，百（ID）十（类）个（元素）——三位数的三个位数

  1. 百：id选择器
  2. 十：class选择器、属性选择器、伪类选择器
  3. 个：标签/元素选择器、伪元素选择器
选择器 ID 类 元素 优先级
h1 0 0 1 0-0-1
h1 + p::first-letter 0 0 3 0-0-3
li > a[href*=“en-US”] > .inline-warning 0 2 2 0-2-2
#identifier 1 0 0 1-0-0
button:not(#mainBtn, .cta) 1 0 1 1-0-1

比较规则：

  • 从左往右依次进行比较 ，较大者优先级更高
  • 如果相等，则继续往右移动一位进行比较
  • 如果4位全部相等，则后面的会覆盖前面的

🚩 优先级相同时，显示后面的样式
🚩 !important > 内联 > 优先级计算值

参考

position

  • static：正常的文档流，
  • relative：相对定位，相对于其父级元素
  • absolute：绝对定位，脱离文档流，以最近的不是static的父级元素为参考
  • fixed：绝对定位，以浏览器窗口作为参考
  • sticky：粘性定位，relative和fixed的混合
参考

z-index

z-index stacking order
图：z-index stacking order

Within each stacking context, the following layers are painted in back-to-front order:

  1. the background and borders of the element forming the stacking context.
  2. the child stacking contexts with negative stack levels (most negative first).
  3. the in-flow, non-inline-level, non-positioned descendants.
  4. the non-positioned floats.
  5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
  6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
  7. the child stacking contexts with positive stack levels (least positive first).
参考

float

特性

  • 脱离标准文档流
  • 浮动的元素变成行内块，在一行显示

浮动带来的问题：

  • 父元素的高度无法被撑开
  • 影响其他元素

清除浮动：

  • clear
    • 增加同级空标签
    • 父元素伪元素 ::after
  • BFC
    • 父元素设置 overflow
    • 父元素设置 display: flow-root
参考

flex

响应式

工程化

动画

  • animation 是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。
  • transition 是过度属性，强调过度，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上动画最小间隔为1/60＊1000ms ＝ 16.7ms。

参考

收藏文章