深入CSS | 青训营

1.1.CSS 选择器的特异度

特异度是指选择器的特殊程度，决定了选择器的优先级

1.2.CSS继承

1.2.1 概念

某些属性会自动继承其父元素的计算值，除非显示指定一个值。

注意： 一般来说在CSS中与盒模型相关的都是不能继承的，与颜色相关的都是可以继承的

1.2.2 显示继承

通过给某一属性设置inherit可以设置显示继承。

1.3.CSS初始值

1.3.1 概念

CSS中每一个元素都有初始值，例如background-color的初始值就是transparent透明的，所以我们写结构的时候才没有颜色，因为CSS在不设置属性值的时候默认显示的是初始值。

1.3.2 设置为初始值

有时候我们会忘记初始值是什么，这时候我们可以通过关键字initial来设置属性值

* {
   background-color：initial
}

1.4 CSS 布局方式及相关技术

1.4.1 布局

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

1.4.2相关技术‘

1. 常规流：也叫文档流。块级、行级、表格布局、flexbox和grid布局等等
2. 浮动：float,可以做文字环绕效果等等
3. 绝对定位：改变盒子的位置，但不会对常规流有什么影响

盒模型属性

1. width：指定content box宽度。取值为长度、百分数、auto。百分数相对于容器的content box宽度
2. height：指定content box高度。其他的和width一样，除了 只有指定高度的时候时候，百分数才生效
3. padding：内边距，四个值分别是上左下右。百分比相当于容器宽度
4. border：边框。样式、颜色、粗细。四个边框颜色不同时是在对角斜着切的
5. margin：外边距。百分数相对于容器宽度 设置为auto时表示水平居中
6. overflow:当盒子里的内容超出了盒子就可以设置这个属性。有四个值：visible、hidden、scroll分别表示：显示超出部分，隐藏超出部分，显示滚动条

盒模型

正常情况下，宽度就是宽度，但是如果设置box-sizing为border-box。表示height/width=原始height/width+border+padding

• 两种盒子排列方式：块级和行级

1. 块级：单独成行。适合所有盒模型属性
2. 行级：可以多个并行。盒模型中width和height不适用

• display属性：

1. block：块级盒子
2. inline：行级盒子
3. inline-block:本身是行级，可以放在行内，也可以设置宽高
4. none：完全被忽略

常规流

除了根元素、浮动和绝对定位其他的都在常规流里面

1. 行级排版上下文：盒子在一行，一行放不下会换行，text-align决定盒子在行内的水平对齐，vertical决定行内的垂直对齐，会避开浮动的元素。
2. 块级排版上下文：盒子从上到下排放，垂直margin合并，不会和浮动元素重叠
3. flexbox：可以控制子级盒子的摆放方向、宽度高度、是否允许对折
4. grid布局：display：grid是元素生成一个块级的grid容器，使用grid-template将容器划分为网格
5. position属性：

• static：默认值，非定位元素
• relative：相对自身原本位置偏移，不脱离文档流
  • position:relative
  • 在常规流里面布局
  • 相对于自己本应该在的位置进行偏移
  • 使用top、left、bottom、right设置偏移长度
  • 流内其它元素当它没有偏移一样布局
• absolute：绝对定位，相对非static祖先元素定位
  • position:absolute
  • 脱离常规流
  • 相对于最近的非static祖先定位
  • 不会对流内元素布局造成影响
• fixed：相对于视口绝对定位

1.5 总结

今天详细学习了CSS的内容，对选择器，继承，布局方式及相关技术有了很好的理解，学习的时候还时不时地看了看MDN文档，弥补了很多漏点，继续加油！