CSS深入:
混合选择器的样式的应用规则:
根据选择器的特异度(Specifity)
CSS计算值过程:
继承:
隐式继承:一些CSS属性可以自动继承父元素的计算值
显示继承:不会隐式继承的属性可以使用 inherit 关键字来显示继承父级的属性
初始值:
CSS属性中,每一个属性都有一个初始值,例如:background-color属性的初始值就是 transparent
可以使用 initial 关键字来将属性的值变成初始值
布局(Layout):
布局三种技术:
1.常规流 2.浮动 3.绝对定位
CSS将每一个元素都当作一个盒子,每个盒子都跟据 这三套规则进行定位。
常规流又分为:行级,块级,表格布局,FlexBox,Grid布局,这几种规则
块级元素:会占用一整行,不能和其他元素一起排放在一行,块级元素的width和height属性可用,一个块级元素会创建一个块级盒子
行级元素:可以多个行级元素一起在一行,行级元素的width和height属性不可用,一个行级元素会创建一个行级盒子
display:
可以使用 display 来设置是块级元素还是行级元素
block 是设置块级元素
inline 是是设置行级元素
inline-block 是行级元素,可以设置宽高,又作为一个整体不会被拆散成多行
none 是不渲染,渲染的时候忽略这个元素
常规流排版分为5种:行级排版上下文,块级排版上下文,tab排版上下文,Flex排版上下文,Grid排版上下文
行级排版上下文(IFC):
只包含行级盒子的容器会创建一个IFC
这种排版会避开浮动元素,且这里面的盒子在一行显示,一行放不下会多行显示,可以根据基线来垂直对齐
块级排版上下文(BFC):
某些条件会创建BFC:根元素、浮动、绝对定位、inline-block、Flex子项和Grid子项、overflow值不是visible的块级盒子
这种排版的盒子会从上到下摆放,BFC内盒子的margin不会和外边的合并,BFC不会和浮动元素重叠
Flex Box排版上下文:
可以写入 display:flex; 来设置
它可以控制子级盒子的:摆放流向,摆放顺序,盒子的宽度和高度,水平和垂直的方向的对齐
可以通过一些属性来设置子项的弹性,当容器有空间时会伸展,当没有空间时,会收缩,
flex-grow:有剩余空间时的伸展能力
flex-shrink:容器空间不足时的伸展能力
flex-basis:没有伸展或者收缩空间的基础长度
Grid 排版上下文:
可以写入 display:grid; 来设置
flex只能是行或列来布局,grid可以二维布局
首先生成一个块级的 grid 容器,在使用 grid-template 相关属性将容器划分为网格,在设置每一个子项占用那些网格就行了
使用 grid-template-rows 来划分行 grid-template-columns 划分列
使用 grid-row-start 来表示行开始 grid-row-end 来表示行结束 grid-columns-start 来表示列开始 grid-columns-end 来表示列结束
float 浮动:
float是早期用来做图文环绕的效果的,现在排版方式多了,如果不是用来做图文环绕,没必要深究
绝对定位:
可以使用给 posotion 属性设置值来表示定位方式
static:默认值,不定位
relative:相对滋生原本位置偏移,不脱离常规定位方式
absolute:绝对定位,脱离了常规定位方式,是相对于非static祖先元素进行定位
fixex:相对于视口绝对定位
