CSS基础

层叠和继承

---

1. 样式来源

一个元素的样式，可以通过多种方式来定义，而多种定义方式之间通过复杂的影响关系决定了元素的最终样式

对于层叠来说，共有三种主要的样式来源：

• 浏览器默认样式
• 用户定义的样式
• 开发者定义的样式：
  1. 外链样式
  2. 页面头部定义，内联样式
  3. 定义在 HTML 元素上，行内样式

其优先级为： 开发者定义 > 用户定义 > 浏览器默认

 
对继承的元素来说，子元素自身的样式优先级高于从父级继承来的样式

 

选择器

---

1. 规则

span {
	color: red
}

在 CSS 术语中，上面这条代码表示一条规则( rule )，规则以一种选择器开头( 代码中的 span )，表示在 DOM 中的什么元素上应用此条规则，后面花括号的部分称为声明，其中以键值对的形式定义样式，键为对应CSS属性，值为属性值，键值对之间使用 分号 分隔

 

2. 规则确定度

如果多于一个规则指定了相同的属性值都应用到一个元素上，CSS规定拥有更高确定度的选择器优先级更高

 
如果样式中包含冲突的规则，且它们具有相同的确定度。那么，后出现的规则优先级高

3. 选择器权重值

当有多个不同组合的选择器指向同一元素时，需要使用选择器的权重值来判定哪个规则应用于元素上

权重如下：

• 标签选择器： 1
• class 选择器： 10
• id 选择器： 100
• 内联样式： 1000

 

4. 基于关系的选择器

选择器	选择的元素
A E	A 后代中对应 E 的任意元素
A > E	A 的直系后代对用的满足 E 的元素
B + E	B 的 下一个 满足 E 的兄弟节点( 必须是下一个兄弟节点满足 E，才会应用 .test div -> <div class="test"/> <div/> )
B ~ E	B 的后面 所有 满足 E 的兄弟节点( 只要是 B 后面的兄弟节点，并且满足 E，就应用 )

 

内容

---

在样式中可以定义文本内容和图片内容，样式中定义的内容 不会 成为 DOM 的一部分

1. 文本内容

CSS 可以在元素前后插入文本，使用 ::before、::after，并为其设置 content 属性来设置文本内容

.test::after {
	// 出现在元素后面的文本
	content: "test"
}

2. 图片内容

可以通过将 content 属性值设置为某个图片的URL，可以将图片插到元素的前面或后面

.test::after {
	// 元素后面插入一个空格和一张图片
	content: " " url("xxxx/xxx/xx.png");
}

 

盒模型

---

当对一个文档进行布局(laying out)的时候，浏览器渲染引擎会根据CSS-Box模型（CSS Basic Box model）将所有元素表示为一个矩形盒子（box)。CSS决定这些盒子的大小，位置以及属性（颜色，背景，边框尺寸…)

在CSS中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边, 边框边, 内填充边 与 内容边。

1. 区域划分

1. 内容区域( content )

包含元素真实内容的区域。它通常包含背景、颜色或者图片等，位于内容边界的内部

 

2. 内边距区域( padding )

延伸到包围padding的边框。如果内容区域content area设置了背景、颜色或者图片，这些样式将会延伸到padding上

 

3. 边框( border )

是包含边框的区域，扩展了内边距区域

 

4. 外边距区域( margin )

用空白区域扩展边框区域，以分开相邻的元素

 
对于非替换的行内元素来说，尽管内容周围存在内边距与边框，但其占用空间（行高）由 line-height 属性决定。

5. 指定对应方向的属性

padding、border、margin 都可以同时设置多个方向的值，设置参数不同，应用的方式也不同

默认四个参数的方向指定依次是： 上、右、下、左

指定一个参数时： 相当于四个参数相同

指定两个参数时： 第一个参数代表 上、下 两个方向，第二个参数代表 左、右 两个方向

指定三个参数时： 第一个参数表示 上 方向，第二个参数表示 左、右 两个方向，第三个参数表示 下 方向

 

布局

---

1. 大小单位

最好通过百分比或 ems (em) 来指定大小。 em 通常是指当前字体大小(父元素字体字母m的宽度)。当用户改变字体大小时，你的布局会自己修正

2. 文本布局

text-align： 设置文本对齐方式，可选值有 left right center justify

text-indext： 设置文本的首行缩进

 
这两个属性可以应用于 任何文本类内容，不只是纯文本。 需要注意的是，它们会被元素的子元素继承

3. 浮动

浮动被设计用来解决文字环绕图片的问题，所以，浮动的元素后面的元素中的文字不会被浮动元素覆盖，而是环绕在浮动元素周围

可以使用 clear 属性 或者 触发 BFC 来清除浮动

4. 位置

可以为元素指定 position ，来定位元素：

• relative： 通过为元素指定一个值，元素相对于其原来位置移动。也可以使用 margin 来达到同样的效果
• absolute： 为元素指定相对于其设置了 position 为 relative fixed absolute 的父元素的确切位置
• fixed： 为元素指定相对于窗口的确切位置 。即使文档的其它元素出现滚动，元素位置仍然不变
• static： 默认值

absolute： 当设置为了 absolute 后，如果没有为其指定 left top bottom right 的值，元素的位置不会变( 还是在直接父元素的位置 )，left right 或者 top bottom 中有一个没有被设置，则在该方向上还是使用默认的位置，只会在设置值的方向上相对于设置了 absolute fixed relative 的元素进行偏移

1. sub{ absolute; }  -> 位置不会改变
2. sub{ absolute; top: 10px }  -> top会相对于有定位的父元素的顶部定位，左右方向不变( 还是在直接父元素中的位置 )
3. sub { absolute; top: 10px; left: 10px; }  -> 完全相对于有定位的父元素进行定位

 

媒体

---

CSS通过使用 @media 的格式来对特定的媒介指定适配规则

常见的媒介类型：

• screen： 彩色计算机显示
• print： 打印（分页式媒体）
• projection： 投影
• all： 所有媒体( 默认 )