笔记 7.29

146 阅读2分钟

优先级:

特异度的值:

选择器特殊的程度(选择器的特异度)

可继承和不可继承

继承:某些属性会自动继承其父元素的计算值,除非显示指定一个值。
color属性是可继承属性
在css中一般和文字属性相关的都是可继承的和模型相关的都是不可继承的
显示继承:通过inherit关键字让一个原本不可继承的属性变为可继承的

初始值

css中,每个属性都有一个初始值
background-color的初始值为transparent
margin-left的初始值为0
可以使用initial关键字显示重置为初始值
background-color:initial相当于background-color:transparent

css的求值过程

屏幕截图 2023-07-29 180554.png 屏幕截图 2023-07-29 181432.png 屏幕截图 2023-07-29 181549.png

布局

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

三大技术:

常规流、浮动、绝对定位
常规流可细分为:行级、块级、表格布局、FiexBox、Grid布局

盒子模型

里面有高度和宽度里面放content,有边界
取值为长度、百分数、auto
容器有指定的高度时,百分数才生效

行级和块级

块级:不和其它盒子并列摆放(适用所有的盒子模型)
行级:和其它级盒子一起在一行或拆开成多行(width、height不适用)

排版上下文
IFC(行级):

盒子在一行内水平摆放
一行放不下时吗,换行显示
txet-align决定一行内盒子的水平对齐
vertical-align决定一个盒子在行内的垂直对齐
避开浮动(float)元素

BFC(块级):

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

Grid

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

float

图片环绕文字

绝对定位

postion属性
absolute脱离常规流,不会对流内元素布局造成影响

总结

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