这是我参与【第五届青训营】伴学笔记创作活动的第3天。

CSS 选择器的特异度

  CSS中多个选择器的样式的优先顺序由选择器的特异度决定，也就是越复杂的选择器越优先实现。
  在多个选择器中同时定义颜色等样式时特异度较低的选择器定义的样式会被覆盖。

• 选择器的特异度由# id、· 伪类、E 标签的多少来决定。
• 在使用时的优势是，我们可以定义一个基础样式，通过样式覆盖来定义特殊样式。

CSS继承

• 继承：除了覆盖之外，没有定义的字样式是可以继承父样式的，一般在CSS里与文字相关的属性都是可以继承的，但和模型相关的属性，例如宽度是无法继承父样式的。
• 显式继承：若要无法被继承的属性被继承，我们可以用*给所有属性定义样式来完成显式继承。
• 初始值：
        CSS中，每个属性都有一个初始值
  • background-color的初始值为transparent
  • margin-left的初始值为0
    可以使用initial关键字显式重置为初始值
  • background-color：initial

CSS求值过程解析

  首先浏览器将HTML解析成DOM树，并在这个过程中收集样式规则。之后筛选该页面的样式规则并判断是否能够匹配到选择器得到声明值。一个元素的某属性可能有0到多个声明值。按照来源、！important、选择器特异性、书写顺序等选择出优先级最高的一个属性值。层叠值：在层叠过程中，赢得优先级比赛的那个值。层叠值可能为空。resolving：将一些相对值或者关键字转化成为绝对值。计算值：一般来说，浏览器会在不进行实际布局的情况下，所能得到的最具体的值。constraining：将小数像素值转为整数。实际值：渲染时实际生效的值。
  其中计算值:浏览器拿到CSS之后就能使用的数值，与使用值不同。使用值是需要分析规则在环境中的实现的值。
  打开链接查看求值流程图：cdpn.io/webzhao/deb…

CSS 布局方式及相关技术

布局是什么

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

布局的相关技术

• 常规流：行级、块级、表格布局、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
  • 四条边框的粗细颜色不同，在连接处是斜杠。当容器宽高为0时，就会只剩边框，设置其他边框颜色透明时会得到各种方向的三角形。
    
    margin
  • 指定元素四个方向的外边距
  • 取值可以是长度、百分数、auto
  • 百分数相对于容器宽度
  • margin-left:auto;margin-right:auto;同时出现时，水平居中
  • margin collapse垂直方向上边距合并
    
    box-sizing:border-box
  • box-sizing:border-box指定的是包括content、padding、border在内的数值。
    区别演示:codepen.io/webzhao/emb…
    
    overflow
  • 在指定宽高之后，其中的内容超出后的属性设定
  • overflow-visible 超出后在外面仍然展示出来
  • overflow-hidden 截掉超出部分
  • overflow-scroll 超出后滚动出现