3深入理解CSS丨青训营

79 阅读1分钟

CSS特性

  • 选择器的特异度(Specificity)
  • image.png
  • 复用
  • 继承父元素的计算值
  • 显示继承:inherit:image.png
  • 初始值,关键字为initial

CSS的求值过程

image.png image.png image.png

布局(Layout)

  • 确定内容的大小和位置的算法
  • 依据元素、容器、兄弟节点和内容等信息来计算
  • 布局相关技术

盒模型

  • image.png
  • 块级元素行级元素
    不能和其他盒子并列摆放可以放在一行或多行
    /不适用width,height
    body,article,div,h1-6,pspan,em,strong,cite,code
    display:blockdisplay:inline
  • display属性:inline-block作为整体不能拆成多行;none:忽略

常规流 Normal Flow

  • 行级排版上下文
  • 块级排版上下文
  • Table布局
  • FlexBox:可以控制子级盒子的摆放流向、顺序、宽度高度
  • Grid布局 image.png

浮动:Float

绝对定位:Postion

学习CSS的建议

充分利用MDN和W3C CSS规范