深入css（上）

重复选择问题

HTML负责进行前端结构的搭建，而CSS负责对结构的样式进行渲染。比如颜色、大小、字体。这些都是由css来进行控制。只需要通过CSS的选择器进行选择即可。但是如果选择出现冲突，多个CSS样式都指向同一个HTML标签，到底应该是哪个生效？

例如：

<article>
  <h1 class="title">AAAAA</h1>
</article>

<style>
.title{
  color: blue;
}

article h1{
  color: red;
}
</style>

样式之间发生冲突是article h1 生效还是title生效，他们都是指向 <h1 class="title">AAAAA</h1>

他们生效的方式按照特异度的逻辑来实现，特异度就是指在css的表示中的特异性，根据特异性来确定最终生效的css

在图中就可以看出id选择器的特异度为1，所以id选择器优先生效，特异度越高优先级越高

样式的继承关系

在样式关系中，此样式会继承父样式的部分属性。只要是无需书写相关样式也会继承父类样式。一般在css中和文字相关的都是可以继承的，比如颜色、大小都是可以继承的。和盒子模型相关的是不能继承的，例如宽度、高度都是无法继承的。如果我们想要从父类中继承默认不可继承的属性。我们需要进行显式声明，使用

*{
    box-sizing:inherit;
 }

来实现对父类计算值的继承。所有的元素都会继承*中的属性,使用inherit会使原本不可继承的变成可继承的。

如果样式可继承但是往上寻找，但是没有找到相关的会有初始值。例如字体颜色默认黑色背景颜色默认透明。也可以使用background-color:inital;来重置初始值。每个属性都可以使用初始值。

css的求值过程

把所有的规则都拿到，对应用到该界面的规则进行筛选匹配。筛选出能够匹配到的选择器，符合当前media。
得到一组可以匹配到的css规则叫做CSS声明值Declared Values,可以是多个css声明值。
从匹配到的一组中css规则按照特异性、书写顺序、来源、!important选择出优先级最高的属性值
通过多个选择器叠加获取到的值叫做层叠值。
如果在全部的过程中都没有使用某些属性，则会使用默认值
对em或者其他单位进行计算获取到px，计算出计算值
百分比数据等数据进行进一步转化的得到使用值
将得到的使用值进行进一步转化得到整数值
最后得到的整数值就是最后的渲染值

布局相关技术

在CSS当中通常用到的布局有：常规流、浮动、绝对定位。

在常规流中又包括行级、块级、表格布局、FlexBox、grid布局。

盒子模型

CSS中一切的基础是盒模型。布局的时候，把所有的元素理解成一个个盒子。一个盒子，包括长宽高、边距、内边距和边框。

content box

width
- 指定content Box宽度。
- 取值为长度、百分数、auto
- auto 由浏览器根据其他属性确定
- 百分数相对于容器的content box宽度
height
- 指定context box高度
- 取值为长度、百分数、auto
- auto取值由内容计算得来
- 百分数相对于容器的context box高度
- 容器有指定的高度时、百分数才生效
padding
- 指定元素四个方向的内边距
- 百分数相对于容器宽度
border
- 指定容器边框样式、粗细和颜色
margin
- 指定元素四个方向的外边距
- 取值可以是长度、百分数、auto
- 百分数相对于容器宽度
margin:auto水平居中。在上面元素使用margin-bottom:100px下面元素使用margin-top：100px两个元素怒实际会间隔100px这是css的margin collapse边距合并折叠，或者取边距最大的

border box

使用box-sizing:borer-box来指定盒子模型

border-box模型的width和height是包括，pading和border的。所指定的width和height就是实际的。在开发中长用到这种布局方式。

深入css (下)

常规流

块级 vs 行级

块级 Block Level Box 不和其他盒子并列摆放，适用所有盒子模型。

行级 lnline Level Box和其他盒子一起放在一行，或拆开多行。盒子模型中的width、height不适用，行级的width和height是由其中的内容来决定的。

默认的块级元素包括：body div article main section h1-6 p ul li 等都是display:block。

默认行级元素包括：span em strong cite code 等都是display:inline。

display属性

属性	作用
block	块级盒子
line	行级盒子
inline-block	本身是行级，可以放在盒子中，可以设置宽高；作为一个整体不会被拆散成多行。
none	排版时完全忽略

行级排版上下文

Inline Formatting Context(IFC)
只包含行级盒子的容器会创建一个IFC
IFC内部的排版规则
- 盒子在一行内水平摆放
- 一行放不下时水平摆放
- text-align 决定一行内盒子的水平对齐
- vertical-align 决定一个盒子在行内的垂直对齐方式
- 避开浮动（float）元素

在inline-block行内元素中,内部作为一个整体不会换行,例如单词超出长度并不会换行，使用overflow-wrap:break-word可以进行强制换行。

块级排版上下文