深入css部分摘要|青训营

69 阅读1分钟

css的优先级为行内样式>id选择器>类选择器>标签选择器。 某些属性会自动继承其父元素的计算值,除非显式指定一个值,inherit可以继承那些本来不可继承的属性。css中,每个属性都有一个初始值,比如background-color的初始值是transparent,margin-left的初始值是0,initial可以把属性显式重置为初始值。 浏览器渲染页面时,会把dom树和样式规则放到一起,筛选出有效的样式,得到声明值,再挑选出优先级最高的属性值,得到层叠值,当层叠值为空的时候,使用继承或初始值,得到指定值,然后将相对值转换为绝对值,比如60%,得到计算值,然后进一步转换计算值,得到使用值,比如400.2px,最后最后将小数像素值转换为整数,得到实际值。 布局是确定内容的大小和位置的算法。布局分为常规流、浮动和绝对定位。常规流又包括行级、块级、表格布局、flexbox、grid布局。css盒模型由内向外content、padding、border、margin。padding为内边距,百分数相对于容器,border为容器边框,有width、style、color三种属性,margin为外边距,百分数相对于容器,可以用margin:auto实现居中,相邻的mergin只保留较大的一个。content-box下width和height为content的宽和高,border-box下width和height为content、padding、border的宽和高。 css作为语言有一定的逻辑,但又不只依靠逻辑运行,需要结合具体的页面布局,才可以编写出正确的css。