CSS 基础

发表于

CSS 中的继承
继承规则：与元素外观（文字颜色，字体等）相关的样式会被继承；与元素布局相关的样式不会看被继承。

CSS 中的长度
1. 绝对长度

单位标识符 说明
in 英寸
cm 厘米
mm 毫米
pt 磅
pc pica

2. 相对长度

单位标识符 说明
em 与元素字号相关
ex 与元素字体的“x高度”相关
rem 与根元素的字号相关
px CSS 像素
% 另一属性的值的百分比

Default font size(12px)
2em font size
3ex font size
2rem font size

3. 未获广泛支持的 CSS 属性

单位标识符 说明
gd 与网格（grid）相关。它依赖于 CSS 规范中一些定义不太明确的属性，因此未获广泛支持
vw 与视口（viewport）宽度相关。1vw=文档显示区域宽度的1%
vh 与视口高度相关。1vh=文档显示区域高度的1%
vm 1vm=最短视口轴长（高度和宽度中较小的那个）的1%
ch 与用当前字体显示的字符的平均宽度相关。在 CSS 中定义很潦草，实现也不一致

4. 算式值

1
2
3
4
5
6
7
8
<div class="calculate"></div>
<style type="text/css">
.calculate {
    width: calc(80%-20px);
    height: 20px;
    background: grey;
}
</style>

⚠️注意：仅 IE 支持 calc 属性

5. 其他单位

单位标识符 说明
deg 度（取值范围：0deg~360deg）
grad 百分度（取值范围：0grad~400grad）
rad 弧度（取值范围：0rad~6.28rad）
turn 圆周（1turn=360deg）

浏览器特定厂商前缀

浏览器 前缀
Chrome、Safari -webkit-
Opera -o-
Firefox -moz-
Internet Explore -ms-

盒模型

外边距(margin)
边框(border)内边距(padding)
元素内容(content)

盒模型与 box-sizing

box-sizing: content-box(默认) | padding-box(已从规范中移除) | border-box | inherit

1. content-box(默认)：默认情况下，元素实际宽度、高度为元素 width 和 height 属性设置宽度和高度加上 padding、border 和 margin 的值。

1
2
3
4
5
6
7
8
9
10
11
12
<div class="content-box"></div>
<style type="text/css">
.content-box {
    width: 100px;
    height: 100px;
    margin: 20px auto;
    background: #e5e5e5;
    box-sizing: content-box;
    border: 10px solid #000;
    padding: 10px;
}
</style>

元素的指定宽度和高度不包括 padding、border 和 margin。

不同浏览器对宽度的诠释不一样。符合 W3C 标准的浏览器认为一个元素的宽度只等于其 content 的宽度，其余都要额外算。
一般浏览器下元素最终宽度为：宽度 = width + padding(*2) + border(*2) + margin(*2);
IE（低于IE9）下，最终宽度为：宽度 = width + margin(*2);

2. border-box：元素实际宽度、高度为元素 width 和 height 属性设置宽度和高度值， padding 和 border 属性在指定的宽度和高度内进行布局和绘制。

1
2
3
4
5
6
7
8
9
10
11
12
<div class="border-box"></div>
<style type="text/css">
.border-box {
    width: 100px;
    height: 100px;
    margin: 20px auto;
    background: #e5e5e5;
    box-sizing: border-box;
    border: 10px solid #000;
    padding: 10px;
}
</style>

元素实际尺寸为 100px * 100px，元素的指定宽度和高度包括 padding 和 border。

3. inhert：元素 box-sizing 属性继承自父元素。