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

2.2 CSS的进阶

一个基本问题：当两种选择器选择了同样的元素时，谁的优先级高？

两个选择器依次计算，id优先级最高，122>022，前者优先选择
可以利用这个特性在CSS样式中进行高级样式覆盖

2.2.1 继承

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

文字相关能继承，模型相关不能继承

显式继承：* {boxing: inherit;}

初始值:

如果一直向上没有找到父类元素继承，就会使用到初始值

可以使用initial关键字重置初始值

2.2.2 CSS求值过程

经过defaulting之后会有且仅有一个值，进过一系列转换，最后得到计算值——使用值——实际值

resolving——formatting——constraining

2.2.2 布局

布局是确定内容大小和位置的算法
依据元素、容器、兄弟节点和内容等信息来计算
常规流-浮动-绝对定位

布局基本要素设置：

margin 外边界
border 边框
padding 内边界
width 宽度
height 高度

小技巧：设置成边框时会形成一个等腰三角形，可以通过设置不同的颜色做成一个四色三角形组成的图形，也可以进一步制作各种不同的可视化图形。

2.2.3 块级与行级

块级	行级
Block level Box	Inline level Box
不和其他盒子并列摆放	和其他行级盒子一起放在一行或叉开成多行
适用所有的盒模型属性	盒模型中的width、height不适用

盒子是CSS中的概念，元素是HTML中的概念

块级元素	行级元素
生成块级盒子	生成行级盒子，内容分散在多个行盒中
body、article、div、main、section、h1-6、p、ul、li等	span、em、strong、cite、code等
display:block	display:inline

Display 属性

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

2.2.4 行级排版上下文

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

2.2.5 块级排版上下文

Block Formatting Context (BFC)
某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow值不是visible的块盒
- display : flow-root ;
BFC内的排版规则
- 盒子从上到下拜访
- 垂直margin合并
- BFC内盒子的margin不会与外面合并
- BFC不会和浮动元素重叠

如果一个盒子既有块级又有行级盒子？
span本身行级标签，div为块级盒子，如果span包裹div，浏览器会将创建匿名块级盒子来达到盒子内行级或块级一致。

2.2.6 Flex Box

一种新的更灵活的排版上下文的方式
他可以控制子级盒子的：
- 排放流向
- 排放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行

<div class="container">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
</div>
<style>
    .container{
        display:flex;
        border:2px solid #966;
        }
.a,.b,.c{
    text-align:center;
    padding: 1em;
    }
.a {
    background:#fcc;
    }

给.container定义了flex display属性，里面的子元素行为受flex布局控制，而不是IFC和BFC的控制
通过flex-direction去控制流向，控制复杂的方向需要引入两个概念主轴和侧轴。

justify-content属性
控制flex布局中几个元素之间的主轴对齐关系，属性效果如下：

侧轴上可以用align-items属性，默认值是stretch，baseline是基线对齐，比如所有文字的baseline来对齐。
可以对某个特殊元素设置不一样的对齐方式。

2.2.7 Flexibility

可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
flex-grow有剩余空间时的伸展能力
flex-shrink容器空间不足时收缩的能力
flex-basis没有伸展或收缩时的基础长度

可以根据不同的元素设置不同的伸展值，比如a flex-grow为2，b flex-grow为1，c不设置，则会将剩余空间按2:1比例分配元素。如果空间不够，也可以设置压缩规则。

2.2.8 Flex的缩写

Flex很多属性都是综合的属性，可以用缩写来代表，如下图：

2.2.9 Grid布局

Grid布局为二维上的布局方式，与Flex布局有相似之处

display：grid

display: grid 使元素生成一个块级的Grid容器
使用grid-template相关属性将容器划分为网格
设置每一个子项占哪些行/列
理解为划分了很多格子，再决定元素占用哪些格子

通过grid-template-columns和grid-template-rows进行划分网格

grid-template-columns:100px 100px 200px
grid-template-rows:100px 100px
grid-template-columns:30% 30% auto;
grid-template-rows:100px auto
grid-template-columns:30% 1fr 1fr;
grid-template-rows:100px 1fr

fr单位理解为一份
网格线
通过区域的边界线来确定区域，比如1133来确定下图黄线左边的区域

a {
grid-row-start:1;
grid-column-start:1
grid-row-end:3;
grid-column-end:3;}
.a{
grid-area:1/1/3/3;}
a{
grid-area:2/2/4/4;}
.b {
grid-area:1/1/3/3;}

grid布局是CSS中最强大的布局方法

2.2.10 Float

float的概念就是为了实现文字环绕的效果，如文字环绕一个图片。p标签的文字绕过image标签的图片
原本是为了实现一些布局方面的需求，现在主要使用Flex和Grid来实现了。

2.2.11 绝对定位

position属性

static 默认值，非定位元素
relative 相对自身原本位置偏移，不脱离文档流
absolute 绝对定位，相对非static祖先元素定位
fixed 相对于视口绝对定位

几个定位属性会让元素脱离常规流

CSS进阶 | 青训营笔记

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