深入css

选择器优先级问题

特异度：越高优先级越高

计算特异度：

多个样式选中同一元素时，特异度高的样式覆盖前面的

继承元素

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

<p>This is a <em>test</em>of <strong>inherit</strong></p>
<style>
body {
font-size: 20p×;
}
p{
color: blue;
}
em {
color: red;
}
</style>

在css里面和文字相关的属性可继承，例如：font-size,color；

和盒子模型相关的不可继承，例如：宽度

显示继承

*{
box-sizing: inhexit;}

html {
box-sizing: border-box;
}
.some-widget {
box-sizing: content-box;
}

使box-sizing继承下来

初始值

CSS中，每个属性都有一个初始值
background-color的初始值为transparent margin-left的初始值为0
可以使用initial关键字显式重置为初始值
background-color: initial

css求值过程

继承属性，继承到的是父元素的计算值，比如父元素font-size:1.2em,里面写个h1，h1继承的font-size是父元素字体大小，单位：px

布局相关技术

常规流：行级块级表格布局 FlexBox Grid布局
浮动：例-文字环绕图片
绝对定位：不会对常规流产生影响

常规流

盒子模型

height

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

padding

指定元素四个方向的内边距
百分数相对于容器宽度

border

指定容器边框样式、粗细和颜色

注意：当四条边框颜色不同时，边界的分割是对角线

特殊用法：当把盒子宽度高度都设为0的时候，就只剩下边框，根据需要得到各种各样的三角形

margin

指定元素四个方向的外边距
取值可以是长度、百分数、auto
百分数相对于容器宽度

可以使用 margin:auto水平居中

magin collapse（边距合并）

定义：上方盒子下边距和下放盒子上边距会合并，取最大

box-sizing

content-box
- 盒子宽和高就指的是content的宽和高
border-box
- 盒子宽和高包含border,padding,content

overflow

overflow:visible,hidden,scroll

块级vs.行级

Block Level Box

不和其它盒子并列摆放
适用所有的盒模型属性

Inline Level Box

和其它行级盒子一起放在一行或拆开成多行
盒模型中的width、height不适用

块级元素

生成块级盒子
body、article、div、main、section、h1-6、p、ul、li等
display: block

行级元素

生成行级盒子
内容分散在多个行盒(line hox)中
span、em、strong、cite、code 等
display: inline

display属性

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

常规流Normal Flow

根元素、浮动和绝对定位的元素会脱离常规流
其它元素都在常规流之内（in-flow)
常规流中的盒子，在某种排版上下文中参与布局

布局方式

行级排版上下文
块级排版上下文
Table排版上下文
Flex排版上下文
Grid 排版上下文

行级排版上下文

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

块级排版上下文

Block Formatting Context (BFC)
某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- flex子项和Grid子项
- overflow值不是 visible 的块盒
- display: flow-root;

BFC内的排版规则

盒子从上到下摆放
垂直 margin合并
BFC内盒子的margin不会与外面的合并
BFC不会和浮动元素重叠

Flex排版上下文

里面的元素不会遵循BFC,IFC的布局规则了

属性

justify-content:主轴对齐方式

align-item:侧轴对齐方式，默认是stretch，撑满整个高度

align-self:子项目自身的对齐方式

order:项目的排列顺序，值越小越往前

Flexibility

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

flex-grow：拉伸

例子：

<style>
.container {
display: flex;
}
.a, .b,.c {
width: 100px;
}
.a {
flex-grow: 2;
}
.b {
flex-grow: 1;
}
</style>

将a,b,c三个盒子放到container盒子中，起初宽度都是100px，可能container盒子还有剩余宽度，剩余宽度按2:1分配给a,b两个盒子，c盒子没有伸缩属性。

flex-shrink：缩小

概念： flex-shrink 定义了项目的压缩比例，默认为 1 ，即：如果空间不足，该项目将会缩小。0代表不会压缩

flex-basis：设置的是主轴方向的基准长度，会让宽度或高度失效。，不写默认读取盒子的宽和高

flex缩写

Grid 排版上下文

flex偏一维布局，从左到右，从上到下；grid是二维布局

display:grid

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

划分网格

grid-template-columns：划分列的宽度

grid-template-rows：划分行的高度

grid-template-columns: 100px 100px 200px; 
grid-template-rows: 100px 100px

1fr：指的是剩余空间平分成几份

grid-template-columns: 100px 1fr 1fr;
grid-template-rows: 100px 1fr

grid line 网格线

.a {
grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 3;
grid-column-end: 3;
}

或者写成：

.a{
    grid-area:1/1/3/3;
}

float 浮动

为了文字环绕的效果

flex和grid出来以后，不用深入float应用

回归最本质的：用来实现文字环绕

position

position:relative

在常规流里面布局
相对于自己本应该在的位置进行偏移
使用top、left、bottom、right 设置偏移长度
流内其它元素当它没有偏移一样布局

position:absolute

脱离常规流
相对于最近的非static祖先定位
不会对流内元素布局造成影响

非static定位：relative absolute fixed

position:fixed

相对于窗口定位

学习CSS的几点建议

充分利用MDN和W3C CSS规范
保持好奇心
善用览器的开发者工具持续学习
CSS新特性还在不断出现

Day03 深入css学习 | 青训营