深入CSS

一.优先级

选择器相同，执行层叠性
选择器不同，按照选择器权重执行

选择器	权重
继承/*	0,0,0,0 (0)
元素（标签）（div,ul,li,ol,a）	0,0,0,1 (1)
类、伪类	0,0,1,0 (10)
ID（#）	0,1,0,0 (100）
行内样式style=""	1,0,0,0 (1000)
!important 重要	∞

复合选择器需计算权重叠加
继承的权重为0，也就是说不管父类元素权重多高，如果该元素未被选中，该子元素得到的权重就是0

二.继承

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

三.初始值

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

四.CSS的计算过程

五.什么是布局？

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

5.1布局相关技术

常规流
- 行级
- 块级
- 表格布局
- FlexBox
- Grid布局
  通过text-align决定一行内盒子的水平对齐
  通过vertical-align决定一个盒子的垂直对齐
定位
浮动

5.2 盒模型box-sizeing：content-box

width：

指定content box的宽度
取值为长度、百分数、auto
容器有指定的高度时，百分数才生效
auto由浏览器根据其他属性确定
百分数是相对于容器的content box宽度

height：

容器有指定的高度时，百分数才生效

padding：

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

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

三种属性：border-width、border-style、border-color
四个方向：border-top、border-right、border-bottom、border-left
当四个边框颜色不同时，可以表示出三角（.box1)
若只想表示出一个三角，则只需设定需要方向的边框，其余设为transparent(.box2)

.box1 {
            width: 0;
            height: 0;
            border-top: 100px solid skyblue;
            border-right: 100px solid pink;
            border-left: 100px solid yellow;
            border-bottom: 100px solid peru; 
            }

.box2 {
            width: 0;
            height: 0;
            border: 100px solid transparent;
            border-top-color: red;
            margin: 50px auto;

        }

box1
box2

margin:设置盒子的外边距

可让块级盒子水平居中，有以下三种写法
- margin：auto；
- margin：0 auto；
- margin-left：auto；margin-right：auto；
  前提是盒子必须指定了宽度
相邻块元素垂直外边距（margin-top/bottom）的合并是取两个值中的较大值
嵌套块元素垂直外边距的塌陷（浮动的盒子无该问题）：对于两个嵌套（父子）关系的块元素，父元素与子元素同时有上外边距，父元素会塌陷较大的外边距值
- 比如父元素margin-top：20px;子元素margin-top：10px;，合并后的margin-top：20px
- 为了解决这个问题，有以下三种解决方案
  - 给父元素定义边框
  - 给父元素定义内边距
  - 给父元素添加overflow：hidden

5.3 盒模型box-sizeing：border-box

以上都是对于content-box盒模型的介绍，其盒子大小为width+padding+border
而border-box的盒子大小为width，也就是说你指定的width和height是包含padding和border在内的

5.4 overflow

当指定了高度和宽度时，内容会溢出一个元素的框

属性值	说明
hidden	不显示超出的部分
visible	不剪切内容也不添加滚动条
scroll	总显示滚动条
auto	有需要时（超出）显示滚动条

六.CSS元素的显示模式

块级元素：独占一行，从上向下排列，适用所有的盒模型属性（body、article、div、main、section、h1-6，p、ul、ol、dl、table等）
行级元素：按照顺序，从左至右排列，遇到父元素边缘自动换行，盒模型中的width和height属性不适用，由它本身内容多少决定（span、em、strong、cite、code等）
行内块元素：和相邻行内元素在一行，之间有空白缝隙，可设置宽高，一行可显示多个（img、input、td等）
元素显示模式的转换
display：block
display：inline
display：inline-block
单行文字垂直居中通过height=line-height实现

七.BFC的排版规则

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

八.FlexBox

flex布局意为弹性布局，通过给父级元素添加display：flex来控制子盒子的位置和排列方式，此时子元素的float、clear、vertical-align属性将失效

父元素常见属性

flex-direction：设置主轴方向
- 默认主轴方向是x轴，水平向右
- 默认侧轴方向是y轴，垂直向下

属性值	说明
row	从左到右（默认）
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

justify-content：设置主轴元素上的子元素排列方式

属性值	说明
flex-start	从头部开始（默认）
flex-end	从尾部开始排列
center	在主轴居中对齐
space-around	平分剩余空间
space-between	先两边贴边，再平分剩余空间

flex-wrap：设置子元素是否换行：

属性值	说明
nowrap	不换行（默认）
wrap	换行

align-items：设置侧轴上的子元素排列方式（单行）

属性值	说明
stretch	拉伸（默认）
flex-start	从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
baseline	基线对齐

align-content：设置侧轴上的子元素排列方式（多行）

属性值	说明
flex-start	从侧轴头部开始（默认）
flex-end	从尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间
stretch	设置子项元素高度平分父元素高度

flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

子元素常见属性

flex：定义子项目分配剩余空间，表示占多少份数
align-self：控制单个子项在侧轴上的排列方式，可覆盖align-items属性，默认值是auto（表示继承父元素的align-items属性），如果没有父元素，则等同于stretch
order：定义项目的排列顺序，数值越小，排列越靠前，默认为0
flex-basis:设置元素的基础宽度，默认为0
flex-grow：设置有剩余空间时的伸展能力，默认值为0，值越大，伸缩的越厉害
flex-shrink:设置剩余空间不足时的收缩能力，默认是0，值越大，收缩的越厉害

九.Grid布局

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

容器属性

grid-template-rows：指定每一行的宽度，每个宽度之间用空格隔开
grid-template-columns：指定每一列的宽度，每个宽度之间用空格隔开
repeat（）:第一个参数为重复的次数，第二个参数是要重复的数值

十.浮动

所谓浮动，就是脱离了标准流的控制。
属性值有

none（默认）
left
right

浮动只会压住下面标准流的盒子，不会压住盒子里的文字（图片），可实现文字围绕浮动元素的效果。

十一.定位

定位组成：定位模式+边偏移
通过position属性指定定位模式

static：静态定位（默认）
absolute：绝对定位
相对其祖先元素进行移动，如果没有祖先元素或祖先元素没有定位，则以浏览器（Document文档）为准，脱标
relative：相对定位
相对自身原本位置进行偏移，不脱标
fixed：固定定位
以浏览器的可视窗口作为参照点移动元素，脱标

深入CSS|青训营