深入CSS（上）

多条选择器选择同一个元素，哪个生效——特异度

选择器的特异度:id(#)、(伪)类(.)、标签(E) 分别的个数，id的优先级最高

• 例如 .btn.primary 会覆盖 .btn

• 可以用做基础样式和特殊样式，需要特殊时，给它一个特殊的类，将基础样式覆盖掉 复用

继承

• 某些属性会自动继承其父元素的计算值，除非显示指定一个值
• 一般和文字相关的属性都可以继承
• 例如strong标签的元素的父元素为p

显示继承

• inherit可以将不可继承的属性显示继承

• *{
      box-sizing:inherit;
  }
  

初始值

• 一直没有找到可以继承的值，或者是不可继承的且没有设置属性，就会使用初始值
• 可以使用initial关键字显式重置为初始值
• background-color的初始值为transparent
• margin-left的初始值为0

CSS求值过程

• 计算值：浏览器在不进行实际布局的情况下，所得到的最具体的值，比如60%
• 使用值：进行实际布局时使用的值，不会再有相对值或关键字，

布局

• 确定内容的大小和位置的算
• 依据元素、容器、兄弟节点和内容等信息来计算

布局相关技术

• 常规流：行级、块级、表格布局、FlexBox、Grid布局
• 浮动
• 绝对定位

width

• 指定 content box 宽度
• 取值为长度、百分数、auto
• auto由浏览器根据其他属性确定
• 百分数相对于容器的 content box 宽度

height

• 指定 content box 高度
• 取值为长度、百分数、auto
• auto取值由内容计算得来
• 百分数相对于容器的 content box 高度
• 容器有指定高度时百分数才生效

padding

• 指定元素四个方向的内边距
• 百分数相对于容器的宽度（不管是上下还是左右）

border

• 指定容器边框样式、粗细和颜色
• 三种属性：border-width border-style border-color
• 四个方向：border-top border-right border-bottom border-left

• border-right:2px dotted red;
  

• border-width:1px 2px 3px 4px;
  border-style:solid;
  border-color:green blue;
  

• border-left-width:1px;
  

margin

• 指定元素四个方向的外边距
• 取值可以是长度、百分数、auto
• 百分数相对于容器宽度
• 当margin-left为auto，margin-right也为auto时，水平居中
• 只会在上面元素的margin-bottom和下面元素的margin-top中取大的来留中间的间距，不会将两者相加