1. CSS 样式规则
2. 字体设置
2.1. 字体综合设置
1 | 选择器 {font: font-style font-weight font-size/line-weight font-family;} |
注意：
顺序不能变.
不需要设置的属性可以省略，取默认值，但必须保留 font-size 与 font-family
2.2. input提示
1 | <input type="text" placeholder="请输入内容"/> |
3. 选择器
3.1. 标签选择器（元素选择器）
1 | 标签名 { 属性1:属性值1;属性2：属性值2} |
3.2. 类选择器
1 | .类名 {属性1:属性值1;属性2：属性值2} |
3.3. id 选择器
1 | #id名 {属性1:属性值1;属性2：属性值2} |
id 选择器与 类选择器的区别：在使用次数上，类选择器可以使用多次，id 选择器只能使用一次
3.4. 通配符选择器
1 | * {属性1:属性值1;属性2：属性值2} |
3.5. 伪类选择器
3.5.1. 链接伪类选择器
- :link 未访问的链接
- :visited 已访问的链接
- :hover 鼠标移动到链接上
- :active 选定的链接，选定不松开时
注意：顺序不能颠倒
3.5.2. 结构伪类选择器
- :first-child 选取属于其父元素的首个子元素的指定选择器
- :last-child 选取属于其父元素的最后一个子元素的指定选择器
- :nth-child(n) 选取第n个,n从0开始,n可以是公式
- :nth-last-child(n) 从最后一个元素开始,
3.5.3. 目标伪类选择器
:target 目标伪类选择器，选择器可用于选取当前活动的目标元素。
4. 文字
4.1. 文字阴影
1 | text-shadow: 水平位置，垂直位置，模糊距离，阴影颜色 |
4.2. 文本的装饰
| 值 | 描述 |
|---|---|
| none | 默认，定义标准的文本 |
| underline | 定义文本下的一条线 |
| overline | 定义文本上的一条线 |
| line-through | 定义穿过文本下的一条线 |
5. css样式表
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 内部样式表 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
| 行内样式表 | 部分结构与样式分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式表 | 完全实现结构与样式分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点（多） |
5.1. 标签的显示形式
HTML 标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素
5.1.1. 块级元素
每个块级元素通常都会独自占据一整行或多行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构搭建。
常见的元素有：
1 | <h1>...<h6>、<p>、<div>、<ul>、<ol>、<li>等 |
特点：
- 总是从新行开始
- 宽度、行高、外边距及内边距都可以控制
- 宽度默认是容器的100%
- 可以容纳其它内联元素和其他块元素
5.1.2. 行内元素
行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用开控制页面中文本的样式。
常见的行内元素有
1 | <a> <strong> <b> <em> <i> <del> <ins> <u> <span> |
特点：
- 和相邻行内元素在一行内显示
- 高、宽无效，但水平方向的 padding 和 margin 可以设置，垂直方向的无效。
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或者其他行内元素（a特殊)
注意：
- 只有文字能组成段落，因此 p 里面不能放块级元素，同理 h1~h6
- 链接里面不能再放链接
5.1.3. 行内块元素(inline-block)
在行内元素中有几个特殊的标签 <img/>、<input/>、<td> 可以对它们设置宽度和对齐属性
特点：
- 和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙。
- 默认宽度就是它本身内容的宽度（宽度由内容决定）
- 高度，行高，外边距以及内边距都可以控制。
5.1.4. 显示模式转换
块转行内： display:inline;
行内转块： display:block;
块、行内元素转行内块： display:inline-block;
6. 复合选择器
6.1. 交集选择器
6.2. 并集选择器
6.3. 后代选择器
6.4. 子元素选择器
6.5. 属性选择器
选取标签带有某些特殊属性的选择器
| 选择器 | 含义 |
|---|---|
| E[attr] | 存在 attr 属性即可 |
| E[attr=val] | 属性值完全等于 val |
| E[attr*=val] | 属性值包含 val 字符并且在“任意”位置 |
| E[attr^=val] | 属性值包含 val 字符并且在“开始”位置 |
| E[attr$=val] | 属性值包含 val 字符并且在“结束”位置 |
6.6. 伪元素选择器（CSS3)
- E::first-letter 文本的第一个单词或字
- E::first-line 文本第一行
- E::selection 可改变选中文本的样式
- E::before和 E::after 在E元素内部开始的位置和结束位创建一个元素，该元素为行内元素，且必须结合content属性使用
7. CSS 书写规范
7.1. 空格规范
【强制】选择器与{}之间必须包含空格
【强制】属性名与之后的：之间不允许包含空格，：与属性值之间必须包含空格.
示例：
1 | font-size: 12px; |
7.2. 选择器规范
【强制】当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。
【建议】选择器嵌套层级不大于3级，位置靠后的限定条件应尽可能精确。
7.3. 属性规范
【强制】属性定义必须另起一行
【强制】属性定义后必须以分号结尾
8. CSS 背景
8.1. 多背景
- 一个元素可以设置多重背景图像
- 每组属性之间使用逗号隔开
- 如果设置的多重背景之间存在着交集（即存在着重叠关系），前面的背景图片会覆盖在后面的背景图片上。
- 为了避免背景色将图像盖住，背景色通常定义在最后一组上。
9. CSS 三大特性
9.1. 层叠性
样式冲突遵循的原则是就近原则，哪个样式离着结构近就执行哪个样式。
9.2. 继承性
子元素可以继承父元素的样式，如 text- font- line- 以及 color属性
9.3. 优先性
权重表
| 继承或者*的贡献值 | 0,0,0,0 |
|---|---|
| 每个元素（标签）贡献值为 | 0,0,0,1 |
| 每个类、伪类贡献值为 | 0,0,1,0 |
| 每个ID贡献值为 | 0,１,0,0 |
| 每个行内样式贡献值为 | 1,0,0,0 |
| 每个!important贡献值为 | 无穷大 |
继承的权重为0
10. 盒子模型
10.1. 外边距合并
10.1.1. 相邻元素块垂直外边距合并
不是两者相加的和，而是取两者中的较大者。
10.1.2. 嵌套元素垂直外边距合并
对于两个嵌套关系的块元素，如果父元素没有上边距及边框，则父元素的上边距会与子元素的上边距发生合并，合并后的外边距为两者中的较大者。
解决方案：
- 可以为父元素定义1像素的上边框或上内边距。
- 可以为父元素添加overflow:hidden
10.2. 盒子的计算尺寸
注意：
- 宽度属性和高度属性仅适用于块级元素，对行内元素无效（img标签和input除外）
- 计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况
- 如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度,则padding不会影响本盒子大小。
10.3. 盒子模型与布局稳定性
稳定性
width > padding > margin
10.4. CSS3 盒模型
- box-sizing:content-box 盒子大小为 width + padding + border ,此值为默认值，W2C标准的Box Mode
- box-sizing:border-box 盒子大小为 width
10.5. 盒子阴影
1 | box-shadow 水平位置 垂直位置 模糊距离 阴影尺寸 阴影颜色 内外阴影 |
10.6. 浮动
CSS 定位机制有3种：普通流（标准流）、浮动和定位
- 普通流(normal flow) ：自上而下，自左而右
- 浮动：最开始用来做文字环绕效果
10.6.1. 什么是浮动
元素浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
10.6.2. 浮动与行内块
行内块之间有难以却除的间隙
行内元素或块级元素添加浮动后变为行内块
10.7. 版心和布局流程
- 确定页面的版心
- 分析页面中的行模块，以及每个行模块中的列模块
- 制作HTML结构
- CSS初始化，然后开始运用盒子模型的原理，通过 DIV+CSS布局来控制网页中的各个模块。
10.7.1. 清除浮动的本质
清除浮动主要是为了解决父级元素因为子级浮动引起内部高度为0的问题。
清除方法
- 额外标签法：在浮动元素末尾添加一个空的标签，例如
1 | <div style="clear:both"></div> |
优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化差。
| 方法 | 内容（例子） | 优点 | 缺点 |
|---|---|---|---|
| 额外标签法 | 在浮动元素末尾添加一个空的标签，例如：<div style=”clear:both”></div> | 通俗易懂，书写方便 | 添加许多无意义的标签，结构化差 |
| 父级增加overflow属性方法 | 给父级元素增加overflow为hidden或auto或scroll都可以实现 | 代码简洁 | 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素 |
| 使用after伪元素 | .clearfix:after{content:”.”;display:block;height:0;visibility:hidden;clear:both} | 符合闭合浮动思维，结构主义化明确 | 由于IE6-7不支持after,使用zoom:1触发 hasLayout |
| 双伪元素 | .clearfix:before,.clearfix:after{content:””,display:table} .clearfix:after{clear:both} .clearfix{*zoom:1;} | 代码更简洁 | 由于IE6-7不支持after,使用zoom:1触发 hasLayout |
11. 定位
11.1. 元素的定位属性
元素的定位属性主要包括定位模式和边偏移两部分
11.1.1. 边偏移
top,bottom,left,right
11.1.2. 定位模式
语法: 选择器（postition属性值)
| 值 | 描述 | 是否脱标占有位置 | 是否可以使用边偏移 | 移动位置基准 |
|---|---|---|---|---|
| static | 静态定位（默认定位方式） | 不脱标 | 不可以 | 正常模式 |
| relative | 相对定位，相对于其原文档流位置进行定位 | 不脱标，占有位置 | 可以 | 相对自身位置移动 |
| absolute | 绝对定位，相对于其上一个已经定位的父元素进行定位 | 完全脱标，不占有位置 | 可以 | 相对于定位父级移动位置 |
| fixed | 固定定位，相对于浏览器窗口进行定位 | 完全脱标，不占有位置 | 可以 | 相对于浏览器移动位置 |
11.1.2.1. 静态定位
对于边偏移无效，通常用于清除定位的。
11.1.2.2. 相对定位
- 相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来所占的位置，继续占有。
- 其次，每次移动的位置，是以自己的左上角为基点移动的。
相对定位的盒子仍在标准流中，它后面的盒子仍以标准流来对待它
11.1.2.3. 绝对定位
绝对定位是完全脱标的，它不占有位置。
若所有父元素都没有定位，以浏览器为准对齐。
若父级有定位(绝对、固定或相对定位)，则以最近的有定位的父元素进行定位。
子绝父相：意思是子级是绝对定位的话，父级要用相对定位。
11.1.2.4. 固定定位
- 固定定位元素跟父亲没有任何关系
- 固定定位完全脱标，不占有位置，不随着滚动条滚动。
11.1.3. 叠放次序(z-index)
- z-index 的默认值是0，取值越大，定位元素层叠越居上
- 如果取值相同，则根据书写顺序，后来居上
- 后面数字一定不能加单位
- 只有相对定位、绝对定们、固定定位有此属性。
11.1.4. 定位模式的转换
跟浮动一样，元素添加了绝对定位和固定定位之后，元素模式也会发生转换，都转换为行内块模式。
11.1.5. 元素的显示与隐藏
隐藏：
display : none 隐藏之后不保留位置
visibility ：hidden 隐藏之后保留位置