一、CSS选择器的特异度
二、CSS继承
A.继承
-
某些属性会自动继承其父元素的计算值,除非显式指定一个值
-
显示继承
-
语法
-
*{ box-sizing: inherit; } html{ box-sizing: border-box; } .some-widget{ box-sizing: content-box; }
-
-
B.初始值
-
CSS中,每个属性都有一个初始值
- Background-color 的初始值为 transparent
- Margin-left 的初始值为0
-
可以使用initial关键字显式重置为初始值
-
Background-color: initial
-
三、CSS求值过程解析
A.求职过程
四、CSS布局方式及相关技术
A.布局
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
B.布局相关技术
-
基础布局
-
布局图
-
width
- 指定content box 宽度
- 取值为长度、百分数、auto
- auto由浏览器根据其它属性确定
- 百分数相对于容器的 content box 宽度
-
height
- 指定 content box 高度
- 取值为长度、百分数、auto
- auto取值由内容计算得来
- 百分数相对于容器的 content box 高度
- 容器有指定高度时,百分数才生效
-
margin
- 指定元素四个方向的外边距
- 取值可以是长度、百分数、auto
- 百分数相对于容器宽度
-
使用margin:auto 水平居中
-
语法
-
<div></div> <style> div { width: 200px; height: 200px; background: coral; margin-left: auto; margin-right: auto; } </style>
-
-
-
-
内外边距
-
图
-
padding
-
指定元素四个方向的内边距
-
百分数相对于容器宽度
-
-
border
-
指定容器边框样式、粗细和颜色
-
三种属性
- ①border-width
- ②border-style
- ③border-color
-
四个方向
- ①border-top
- ②border-right
- ③border-bottom
- ④border-left
-
-
-