层叠/继承/优先级

层叠

权重 !important>行内样式>id选择器>类/伪类选择器>元素选择器>*通用选择器
Tips：

• 继承的权重为0 即：不管父类是哪种权重，对于子类权重都是0

• 复合选择器权重相加，但不会进位

• 同级别以顺序最后规则为准

继承

• inherit 应用于继承

• initial 设置为初始值

• unset 继承时,等同inherit;非继承时,等同initial

盒子模型

border边框

• border-collapse 细线（相邻边框二合一）

padding 内边距

Tips:

• 指定了宽度，设置border和pading则会撑大盒子，不指定宽度则不会

其他

• block 转块元素

• inline-block 转行内块元素

margin 外边距

Tips:

• 块居中：设置宽度+左右margin设置为auto

• 嵌套块元素，子元素margin > 父元素margin时 父元素垂直外边距塌陷
  解决办法

  • 父元素设置透明border
  • 父元素设置padding
  • 父元素overflow:hidden

  其他

  • 浮动、固定、绝对定位（TODO ）

圆角

border-radius: 10px,20px,30px,40px; 左、右、右下、左下（顺时针一次设置四个角） border-top-left-radius/border-top-right-radius/border-bottom-right-radius/border-bottom-left-radius

浮动

应用场景

• 块元素一行展示

特性

• 浮动元素会脱离标准流（脱标），不再保留原来的位置
• 浮动的元素会一行内展示且元素顶部对齐
• 浮动的元素具有行内块元素特性