CSS学习笔记（黑马程序员）
1.
1.1 行内样式表
-
通过标签的style属性来设置元素的样式
-
语法：
<标签名 style="属性1: 属性值1; ">内容</标签名>
例：
<h4 style="color: gray; ">标题</h4>
1.2 内部样式表（内嵌式）
-
将CSS代码集中在HTML的头部标签中，用style定义
-
语法：
<head> <style type="text/css"> p{ color:blue; font-size:20px; } </style> </head> -
注意：
- style 一般位于head标签中，但也可以放在HTML文档的任何地方
- type="text/css"在html5中可以省略
13.3 外部样式表（外链式）
-
将所有样式放在一个或多个一CSS为扩展名的外部样式表文件通过link标签将外部样式文件 链接到HTML文档中
-
语法：
<head> <link rel="stylesheet" type="text/css" href="css文件路径" /> </head> -
注意：
- link是单标签
- 需要放在head头部标签中，并且指定属性 type="text/css"在HTML5中可以省略
2. CSS基础选择器
2.1 标签选择器
-
概念：
用HTML标签名作为选择器，为页面中某一类标签指定统一的CSS样式
-
语法：
标签名{ 属性1: 属性值; 属性2: 属性值; } -
作用：
将某一类标签全部选择出来
2.2 类选择器
-
使用"."进行标识，后面紧跟类名
-
语法：
-
类名选择器
.类名{
属性1:属性值1;
属性2:属性值2;
}
-
标签
例（运用）：
<p class='类名1 类名2'></p>
-
-
优点：
- 可以为元素对象定义单独或相同的样式，可以选择一个或多个标签
-
注意：
- 要在标签里使用
- 一个标签内部只能有一个class
- 使用多个类名时，用空格将它们隔开
2.3 id选择器
-
基本语法格式：
-
id选择器
#id名 {属性1:属性值1; 属性2:属性值2; -
标签
<p id="id名">
-
-
元素的id值是唯一的，只能对应文档中某一个具体的元素
id选择器和类选择器的区别
- W3C规定，在同一个页面内，不允许有相同名字的id对象出现，但允许相同名字的class
- 最大的不同在于 使用次数上
- 类选择器在修改样式中用的最多
- id选择器一般用于页面唯一性的元素身上，经常和js搭配使用
2.4 通配符选择器
-
概念
用*表示， * 就是选择所有的标签 是所有选择器中作用最广的，能匹配页面中所有的元素
-
语法：
* { 属性1:属性值1; 属性2:属性值2;} -
注意：
会匹配页面中所有的元素，降低页面的速度，不建议随便使用
3. font字体
3.1 font-size:大小
-
作用：用于设置字号
p { font-size:16px; } -
单位
- 相对长度单位和绝对单位长度
- px 绝对单位长度 最常用
注意：
- 谷歌浏览器默认的文字大小为16px
- 不同浏览器的可能默认显示的字号大小不一样，尽量给一个明确值
- 使用标签body，因为所有内容在body标签里
3.2 font-family:字体
-
作用：设置字体
p {font-family:"微软雅黑";} -
常用的字体有：宋体、微软雅黑、黑体等
-
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。如果都没有，则以电脑默认的为准
例：
p{font-family: Arial,"Microsoft Yahei",微软雅黑;}
> 常用技巧：
>
> 1. 各种字体之间必须用英文逗号隔开
>
> 2. 中文字体需要加英文状态下的引号，英文字体一般不需要。当设置英文字体时，**英文字体名必须放在中文字体名之前**
>
> 3. 如果字体名中包括空格、#、$等符号，需要加英文状态的单引号或双引号
> 4. 尽量使用系统默认的字体，保证在任何用户的浏览器中都能正确显示
##### 3.3 CSS Unicode字体
- 在CSS中设置字体名称，直接写中文是可以的，但是在文件编码在（GB2312、UTF-8等）不匹配时会产生乱码的错误
- XP系统不支持 类似微软雅黑的中文
- 解决方案
- 一：使用英文来替代，比如font-family Yahei
- 二：在CSS直接使用Unicode编码来写字体名称可以避免这些错误。
| **字体名称** | **英文名称** | **Unicode编码** |
| :----------: | :----------: | :-------------: |
| 宋体 | SimSun | \5B8B\4F53 |
| 新宋体 | NSimSun | \65B0\5B8B\4E53 |
| 黑体 | SimHei | \9ED1\4F53 |
- 还有很多，在需要时查表即可
##### 3.4 font-weight:字体粗细
- 在HTML中，使用b和strong标签是文本加粗
- CSS也可以。但是没有语义
| **属性值** | **描述** |
| :--------: | :-------------------------------: |
| normal | 默认值（不加粗的） |
| bold | 定义粗体（加粗的） |
| 100-900 | *400等同于normal,而700等同于bold* |
- ***700一定不要跟单位***
- 提倡用数字表示加粗和不加粗
##### 3.5 font-style:字体风格
- 在HTML中使用 i 和 em 标签
- CSS也可以，同样没有语义
| 属性 | 作用 |
| ------ | ---------------------------------- |
| normal | 默认值，浏览器会显示标准的字体样式 |
| italic | 浏览器会显示斜体的字体样式 |
> 平时很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通样式
##### 3.6 font综合设置字体样式
- 语法：
```css
选择器{ font:font-style font-weight font-size/line-height font-family}
-
实例：
.title{ font: italic 700 20px "微软雅黑";} -
注意：
- 使用font属性时，必须按照上面的格式的顺序写，不能更换顺序
- 其中不需要设置的属性可以省略（取默认值），但***必须保留font-size和font-family属性***，否则font属性不起作用
4. CSS外观属性
4.1 color:文本颜色
-
作用：
定义文本的颜色
-
取值方式：
| 表示 | 属性值 |
|---|---|
| 预定义的颜色值 | red,green,blue |
| 十六进制 | #FF0000,#FF6600,#29D794 |
| RGB代码 | rgb(225,0,0)或rgb(100%,0%,0%) |
- 注意：实际工作中，十六进制写法最多，可以简写：两两相同时 例：#FF0000 简写为#F00代表红色
4.2 text-align:文本对齐方式
-
作用：
设置文本内容的水平对齐，相当于HTML中的align对齐属性
-
可用属性值：left center right
-
注意：
是让盒子里的内容水平居中，而不是盒子
4.3 line-height:行间距
-
作用：
用于设置行间距，级字符的垂直间距。一般称为行高
-
单位：
-
常用有三种：像素px，相对值em和百分比%，实际工作最多是px
-
技巧：
一般情况下，行距比字号大7-8像素左右
line-height: 24px;
4.4 text-indent:首行缩进
-
作用：
设置首行文本的缩进
-
属性值：
- 可以为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值
- 建议使用em
**1em就是一个字的宽度 **
p{ line-height:25px; text-indent:2em;}
4.6 text-decoration文本的装饰
- 作用：通常用于给链接修改装饰效果
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。取消下划线（最常用） |
| underline | 下划线 链接自带的 （常用） |
| overline | 定义文本上的一条线（不用） |
| line-through | 定义穿过文本的一条线 （不常用） |
5. 快捷操作emmet语法
- 生成多个相同标签 加上 * 即可 比如 div*3 就可以快速生成3个div
6. CSS复合选择器
6.1 后代选择器（重点）
-
又称包含选择器
-
作用：
用来选择元素或元素组的后代
-
写法：
把外层标签写在前面，内层的写在后面，中间用空格分割
.class h3{color:red;font-style:16px;}
- 能选择任何包含在内的标签
6.2 子元素选择器
-
作用：
只能选择作为某元素子元素的元素
-
写法：
父级标签写在前面，子级标签写在后面，中间跟一个>进行连接
-
语法：
.class>h3{color: red;font-size:16px;}
6.3 交集选择器
-
由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点
-
语法：
h3.class{color: red;font-size:16px;}
6.4 并集选择器（重点）
-
应用：
- 某些选择器定义的样式完全相同，或部分相同，可以利用并集选择器为它们定义相同的CSS样式
-
并集选择器是各个选择器通过,连接而成的
-
语法：
h2,h3,p{}
- 任何形式的选择器（包括标签选择器、class类选择器和id选择器等）都可以作为一部分
- 通常用于集体声明，逗号隔开，所有选择器都会执行后面的样式
6.5 CSS注释
- 使用/* */
6.6 链接伪类选择器（重点）
- 作用：用于向某些选择器添加特殊的效果，比如给链接添加特殊的效果
- a:link /* 未访问的链接 */
- a:visited /* 已访问的链接 */
- a:hover /* 鼠标移动到链接上 */
- a:active /* 选定的链接 */
注意
- 写的时候不要颠倒顺序，按照***lvha***的顺序
- 利用交集选择器
- 因为链接浏览器有默认的样式，所以实际工作中需要给链接单独指定样式
7. 标签显示模式（display）重点
-
标签的类型（分类）
HTML标签一般分为块标签和行内标签，它们也称为块元素和行内元素
7.1 块级元素(block-level)
-
例：
常见的块元素有
~
、
、
、-
、
- 、
- 等，其中
标签是最典型的元素
-
、
-
块级元素的特点：
（1）自己独占一行
（2）高度、宽度、外边距以及内边距都可以控制
（3）宽度默认是容器的100%
（4）是一个容器及盒子，里面可以放行内元素或者块级元素
- 注意：
- 只有文字才能组成段落，因此 p 里面不能放块级元素，特别是 p 不能放div
- 同理还有h1,h2,h3,h4,h5,h6,dt, 它们都是文字类块级标签，里面不能放其它块级元素
7.2行内元素(inline-level)
-
例：
常见的行内元素有、、、、、
、、、等，其中标签最典型的行内元素，有的地方也称内联元素、 -
行内元素的特点：
- 相邻行内元素在一行上，一行可以显示多个
- 高、宽度设置是无效的
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或者其它行内元素
-
注意：
- 链接里面不能再放链接
- 特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全
7.3 行内块元素(line-block)
-
例：
在行内元素中有几个特殊的标签——,,,可以对它们设置宽度和对其属性，有些资料可能会称为行内块元素
-
行内块元素的特点：
- 和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙。一行可以显示多个
- 默认宽度就是它本身内容的宽度
- 高度、行高、外边距以及内边距都可以控制
7.4 三种模式总结区别
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素 | 一行只能放一个块级元素 | 可以设置宽度 | 容器的100% | 容器级可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可以设置宽度高度 | 它本身内容的宽度 | 容纳文本或其他行内元素 |
| 行内块元素 | 一行可以放多个行内元素 | 可以设置宽度高度 | 它本身内容的宽度 |
7.5 标签显示模式转换 display
- 块转行内：display:inline;
- 行内转块：display:block;
- 块、行内元素转换为行内块：display:inline-block;
8. 行高 (line-height)
8.1 行高测量
-
行高的测量：基线和基线的距离为行高
-
有顶线，中线，基线，底线
8.2 单行文本垂直居中
行高利用最多的一个地方：可以让单行文本在盒子中垂直居中对齐
文字的行高等于盒子的高度
line-height=height
- 行高=上距离+内容高度+下距离
行高与高度的关系
- 行高=高度，文字会垂直居中
- 行高>高度，文字会 偏下
- 行高<高度，文字会 偏上
9. CSS背景(background)
9.1 背景颜色(color)
-
语法：
background-color:颜色值;
默认值是transparent 透明的
9.2 背景图片(image)
-
语法：
background-image : none | url (url) -
实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置（精灵图也是一种运用场景）
| 参数值 | 作用 |
|---|---|
| none | 无背景图（默认的） |
| url | 使用绝对或相对地址指定背景图像 |
9.3 背景平铺
- 语法：
background-repeat:repeat|no-repeat|repeat-x|repeat-y
| 参数值 | 作用 |
|---|---|
| repeat | 背景图在纵向和横向上平铺（默认） |
| no-repeat | 不平铺 |
| repeat-x | 在横向上平铺 |
| repea-y | 在纵向上平铺 |
9.4 背景图片位置
- 语法：
background-position:x y;
参数代表的意思是：x坐标和y坐标 ，可以用方位名词或者精确单位
| 参数值 | 说明 |
|---|---|
| length | 百分数|由浮点数和单位标识符组成的长度值 |
| position | top|center|bottom|left|center|right 方位名词 |
-
注意：
-
- 参数是方位名词
- 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left 效果一致
- 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
-
- 参数是精确单位
- 如果参数是精确单位，那么第一个一定是x坐标，第二个是y坐标
- 如果指定一个值，那么该数值一定是x坐标，另一个默认垂直居中
-
- 参数是混合单位
- 如果指定的两个值是精确单位和方位名词混合使用，则第一个是x坐标，第二个值是y坐标
9.5 背景图像固定（背景附着）
- 作用：设置背景图像是否固定或者随着也页面的其余部分滚动，后期可以制作视差滚动的效果
background-attachment : scroll | fixed
| 参数 | 作用 |
|---|---|
| scroll | 背景图像是随着对象内容滚动的 |
| fixed | 背景图像固定 |
9.6 背景复合写法（简写）
-
此时没有特定的顺序，一般约定的顺序为：
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
9.7 背景色半透明
background: rgba(0, 0, 0, 0.3);
-
最后一个参数是alpha透明度，取值范围在0~1之间
-
习惯把0.3的0省略掉，写为background: (0,0,0,.3);
-
注意：背景半透明是指盒子背景半透明，盒子里的内容不受影响
-
CSS3新增属性，IE9+版本浏览器才支持
-
在实际开发，不太关注兼容性写法，可以放心使用
10. CSS三大特性
10.1 层叠性
-
作用：
- 相同选择器设置相同的样式，此时一个样式就会**覆盖（层叠）**另一个样式。层叠性主要解决样式冲突的问题
-
遵循的原则：就近原则，哪个样式离结构近，就执行哪个样式
-
样式不冲突，不会层叠
10.2 继承性
-
作用：
子标签会继承父标签的某些样式，如文本颜色和字号
-
恰当地使用继承可以***简化代码***，降低CSS样式的复杂性
-
子标签可以继承父元素的样式（text- , font- , line- 这些元素开头的可以继承，以及color属性）
-
行高的继承性：
- 行高可以跟单位也可以不跟单位
- 如果子元素没有设置行高，则会继承父元素的行高
- 此时子元素的行高 = 当前子元素的文字大小 * 1.5
- body行高 1.5 这样写最大的优势是里面的子元素可以根据自己文字大小自动调整行高
10.3 优先级
当同一个元素指定多个选择器，就会有优先级的产生
- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行
选择器权重如下表：
-
注意：
-
权重是由4位数字组成，但是不会有进位
-
可以理解为 类选择器永远大于元素选择器， id选择器永远大于类选择器，以此类推
-
等级判断从左向右，如果某一位数值相同，则判断下一位数值
-
简单记忆：
通配符和继承权重为0；
标签选择器为1；
类（伪类）选择器为10；
id选择器为100；
行内样式表为1000；
!important 为无穷大
-
!important 使用 在属性值后加上!important
-
继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0
-
-
权重叠加：
- 如果是复合选择器，则会有权重叠加，需要计算权重
- 有叠加，但不会进位
11. 盒子模型
11.1 盒子模型组成
- 边框（border），内容（component），内边距（padding），外边距（）
11.2 边框（border)
- 可以设置元素的边框，边框：边框宽度（粗细） 边框样式 边框颜色
border : border-width || border-style || border-color
border-width : 定义边框粗细，单位是px
border-style : 边框的样式
border-color : 边框颜色
-
边框的样式：
- solid ： 实线边框
- dashed： 虚线边框
- dotted: 点线边框
-
简写：
border: 1px solid red; 没有顺序
（不过一般按这个顺序来）
- 边框分开写：
border-top: 1px solid red; /*只设定上边框，其余同理*/
left right bottom(下边框)
11.3 表格的细线边框
-
border-collapse属性控制浏览器绘制表格边框的方式，它控制相邻表格的边框
-
语法：
border-collapse:collapse;
- collapse 合并 上面的表示相邻边框合并在一起
11.4 边框会影响盒子实际大小
边框会额外增加盒子的实际大小，解决：
-
- 测量盒子时不测量边框
- 测量时包含了边框，width/height 减去边框宽度
11.5 内边距（padding）
-
作用：设置内边距，即边框与内容之间的距离
-
属性：
- padding-left 左内边距 right top bottom
-
复合写法（简写）
| 值的个数 | 表达意思 |
|---|---|
| padding:5px; | 上下左右均5像素内边距 |
| padding:5px 10px; | 上下内边距5像素 左右10像素 |
| padding:5px 10px 20px; | 上5 左右10 下20 |
| padding；5px 10px 20px 30px; | 上5 右10 下20 左30 （顺时针） |
-
如果盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子
解决方案：为了保证盒子跟效果图大小保持一致，则让width/height减去多出来的边距大小即可
-
运用：因为padding会撑大盒子，所以当导航栏里字数不一样时，不用给每个盒子宽度，直接给padding最合适
11.6 外边距（margin）
-
作用：设置外边距，即盒子与盒子之间的距离
-
语法：margin-left margin-right 同理top bottom
-
简写：与padding一致
-
典型应用：
- 外边距可以让盒子水平居中，但必须满足：
- 盒子必须指定了宽度
- 盒子左右的外边距都设置为auto
- 外边距可以让盒子水平居中，但必须满足：
.header{ width:960px; margin:0 auto;}
-
常见的写法：
- margin-left:auto; margin-right: auto;
- margin:auto;
- margin: auto;(比较常用）
-
注意：以上方法是让块级元素水平居中，行内元素或者行内块***元素水平居中给其父元素添加***text-align:center 即可
11.7 外边距合并
-
相邻元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下边距margin-bottom.下面的元素有上边距，则他们之间的垂直间距不是上下边距之和。而是取两个值中的较大者***，这种现象被称相邻垂直边距的合并*
- 解决方案：尽量只给一个盒子添加margin值
-
嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距的同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
-
解决方案：
① 可以为父元素定义上边距
② 可以为父元素定义上内边距
③ 可以为父元素添加overflow:hidden
还有其它方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题
-
11.8 清除外边距
网页元素很多带有默认的内外边距，而且不同的浏览器默认的也不一致，因此在布局前，首先要清除网页元素的内外边距。
- 语法：
* { padding:0; /*清除内边距*/ margin:0; /*清除外边距*/}
-
注意：
行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内元素就可以了
11.9 新小知识点
- 去掉 li 前面的项目符号（小圆点）
- 语法：
list-style: none;
11.10 圆角边框（重点）
CSS3新增
- 作用：设置元素的外边框圆角
- 语法：
border-radius:length;
-
参数值可以为数值或百分比的形式
-
如果是正方形，想要设置为一个圆，把数值改为高度或者宽度的一半，或直接写为50%
-
矩形：设置为高度的一半
-
该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
-
分开写：border-top-left-radius border-bottom-right-radius (先top/bottom再left/right)
-
只写两个值，比如：
border-radius:10px 20px;
表示：左上角和右下角圆角10px 右上和左下20px
11.11 盒子阴影（重点）
- 语法：
box-shadow:h-shadow v-shadow blur spread color inset;
| 值 | 描述 |
|---|---|
| h-shadow | 必需 水平阴影 允许负值，越大越右 |
| v-shadow | 必需 垂直阴影 允许负值 越大越下 |
| blur | 可选 模糊距离（实或虚） |
| spread | 可选 阴影尺寸 |
| color | 可选 阴影颜色 |
| inset | 可选 将外部阴影（outset）改为内部阴影 |
- 注意：
- 默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效
- 盒子阴影不占用空间，不会影响其他盒子排列
11.12 文字阴影
- 语法：
text-shadow:h-shadow v-shadow blur color;
- 四个属性值和盒子阴影的一致
12. 浮动（float）
12.1 传统网页布局的三种方式
- 普通流（标准流）
- 浮动
- 定位
12.2 标准流（普通流/文档流）
最基本的布局方式
-
块级元素会独占一行，从上向下顺序排列
- 常用元素：div、hr、p、h1~h6、ul、ol、fl、form、table
-
行内元素按照顺序从左到右顺序排列，碰到父元素边缘则自动换行
- 常用元素：span 、a、i、em等
12.3 为什么需要浮动？
-
如何让多个块级盒子（div）水平排列一行？
虽然转换为行内块元素可以实现一行显示，但是他们之间有很大的空白缝隙，很难控制
-
浮动最典型的应用：可以让多个块级元素一行内排列显示
-
网页布局第一准则：多个块级元素纵向排列标准流，多个块级元素横向排列找浮动
12.4 浮动（float）
- 用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块后另一个浮动框的边缘
- 语法：
选择器{ float:属性值;}
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动**（默认）** |
| left | 向左浮动 |
| right | 右 |
12.5 浮动特性（重点）
- 浮动元素会脱离标准流（脱标）
- 浮动的元素会一行内显示并且元素顶部对齐
- 浮动的元素具有行内块元素的特性
- 设置了浮动（float）的元素最重要的特性：
- 脱离标准普通流的控制（浮）移动到指定位置（动）（俗称脱标）
- 浮动的盒子不再保留原先的位置
- 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐
- 注意：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐
-
浮动元素会具有行内块元素特性
任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性
- 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动之后，它的大小根据内容来决定
- 浮动的盒子中间是没有缝隙的，紧挨着一起
- 行内元素同理
12.6 浮动元素经常和标准流父级搭配使用
为了约束浮动元素位置，我们网页布局一般采取的策略是：
- 先用标准的父元素排列上下位置，之后内部子元素采取浮动排列到左右位置 符合网页布局第一准则
- 网页布局第二准则：先设置盒子大小，之后设置盒子的位置
12.7 浮动布局注意点
- 浮动和标准流的父盒子搭配
- 先用标准流的父元素排列上下元素位置，之后内部子元素采取浮动排列左右位置
- 一个元素浮动了，理论上其余的兄弟元素也要浮动
- 浮动的盒子只会影响浮动盒子后面的标准流，不会影响漆前面的标准流
12.8 为什么需要清除浮动？
- 由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。
- 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。
12.9 清除浮动的本质
- 清除浮动的本质是清除浮动元素造成的影响
- 如果父盒子本身有高度，则不需要清除浮动
- 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流
12.10 清除浮动
- 语法：
选择器{clear:属性值;}
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | ~ |
| both | 同时清除左右两侧浮动的影响 |
- 实际工作中，几乎只用clear:both;
- 清除的策略是：闭合浮动（只让浮动在父盒子内不部影响，不影响父盒子外面的其它盒子）
12.11 清除浮动——额外标签法
也称隔墙法，是W3C推荐的做法
- 额外标签法会在浮动元素末尾添加一个空的标签，例如
,或者其它标签（如
<br/>等） - 优点：通俗易懂，书写方便
- 缺点：添加许多无意义的标签，结构化比较差
注意：要求这个新的空标签必须是块级元素
12.12 清除浮动——父级添加overflow
可以给父级添加overflow属性，将其属性值设置为hidden、auto和scroll。
- 优点：代码简洁
- 缺点：无法显示溢出的部分
12.13 清除浮动——:after 伪元素法
:after方式是额外标签法的升级版。也是给父元素添加
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden;}.clearfix { /* IE6、7专有*/ *zoom: 1;}
- 优点：没有添加标签，结构更加简单
- 缺点：照顾低版本浏览器
- 代表网络：百度、淘宝网、网易等
12.14 清除浮动——双伪元素清除浮动
给父级元素添加
.clearfix:before,.clearfix:after{ content:""; display:table;}.clearfix:after { clear: both;}.clearfix { *zoom: 1;}
- 优点：代码更简洁
- 缺点：照顾低版本浏览器
- 代表网站：小米、腾讯等
13. 定位
13.1 为什么需要定位
- 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子
- 定位侧是可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中的某个位置，并且可以压住其它盒子
13.2 定位组成
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式，边偏移决定了钙元素的最终位置
- 定位模式
通过css的position属性来设置，
| static | 静态定位 |
|---|---|
| relative | 相对 |
| absolute | 绝对 |
| fixed | 固定 |
2.边偏移
| top | top: 80px; | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
|---|---|---|
| bottom | 底部 | |
| left | 左侧 | |
| right | 右侧4 |
13.3 静态定位static（了解）
是元素的默认定位方式，无定位的意思
- 语法：
选择器 { position: static;}
- 静态定位按照标准流特性摆放位置，没有边偏移
- 在布局是很少用到
13.4 相对定位relative（重要）
- 相对定位但是元素在移动位置的时候，是相对于它原来的位置来说的
- 语法
选择器 { positio: relative;}
- 相对定位的特点（必须记住）
- 移动位置的时候参照点是自己原来的位置
- 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来位置）因此，相对定位并没有脱标，最典型的应用是给绝对定位当父级。
13.5 绝对定位absolute（重要）
是元素在移动位置的时候，是相对于它祖先元素来说的
- 语法：
选择器 { position:absolute;}
- 绝对定位的特点：
- 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Docement文档）
- 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置
- 绝对定位不再占有原先的位置（脱标）
- 如果父元素没有定位，爷辈有，则以爷辈元素
- 如果父亲和爷辈均有，则以最近的父辈
13.6 子绝父相的由来
子级使用绝对定位的话，父级则需要相对定位
- 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其它的兄弟盒子
- 父盒子需要加定位限制子盒子在父盒子内显示
- 父盒子布局时，需要占有位置，因此父亲只能是相对定位
总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位
当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到
13.7 固定定位 fixed（重要）
固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器滚动页面时元素的位置不会改变
- 语法：
选择器 { position: fixed;}
特点：
- 以浏览器的可视窗口为参照点移动元素
- 跟父元素没有任何关系
- 不随滚动条滚动
- 固定定位不在占有原先的位置
固定定位也是脱标的，其实固定定位也可以看做是一种特殊定位
固定定位小技巧：固定在版心右侧位置
小算法：
- 让固定定位的盒子left：50%，走到浏览器可视区（也可以看做版心）的一般位置
- 让固定定位的盒子margin-left：版心宽度的一般距离。多走版心宽度的一般位置，就可以让固定定位的盒子贴着版心右侧对齐
13.8 粘性定位sticky（了解）
粘性定位可以被认为是相对定位和固定定位的混合。
- 语法：
选择器 {position: sticky; top: 10px;}
特点：
- 以浏览器的可视窗口为参照点移动元素（固定定位的特点）
- 粘性定位占有原先的位置（相对定位的特点）
- 必须添加top、left、right、bottom其中一个才有效
跟页面滚动搭配使用。兼容性较差。IE不支持
13.9 定位总结
| 定位模式 | 是否脱标 | 移动位置 | 是否常用 |
|---|---|---|---|
| static静态定位 | 否 | 不能使用边偏移 | 否 |
| relative相对定位 | 否（占有位置） | 位置相对于自身移动 | 常用 |
| absolute绝对定位 | 是（不占有位置） | 带有定位的父级 | 常用 |
| fixed固定定位 | 是（不占有位置） | 浏览器可视区 | 常用 |
| sticky粘性定位 | 否（占有位置） | 浏览器可视区 | 当期阶段少 |
13.10 定位叠放次序z-index
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序（z轴）
语法：
选择器 { z-index: 1;}
- 选择器可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上
- 如果属性值相同，则按照书写顺序来，后来居上
- 数字后面不能加单位
- 只有定位的盒子才有z-index属性
13.11 定位的拓展
- 绝对定位的盒子居中
加了绝对定位的盒子不能通过margin:auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中
①left:50%; 让盒子的左侧移动到父级元素的水平中心位置
②margin:-100px;让盒子向左移动自身宽度的一半
- 定位特殊特性
绝对定位和固定定位也和浮动类似
- 行内元素添加绝对或者固定定位，可以直接设置高度和宽度
- 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小
- 脱标的盒子不会触发外边距塌陷
浮动元素，绝对定位（固定定位）元素的都不会触发外边距合并的问题
- 绝对定位（固定定位）会完全压住盒子
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）
而绝对定位（固定定位）会压住下面标准流所有的内容
14. 其它
14.1 css自适应布局vw，vh
- 1vw等于视口窗口宽度的1%
- 1vh等于视口窗口高度的1%
- vmin：选取vw和vh中最小的那个
- vmax：选取vw和vh中最大的那个
- vh 和 vw ：相对于视口的高度和宽度，而不是父元素的（css百分比是相对于包含它的最近的父元素的高度和宽度）
14.2 css tranform属性
14.3 CSS属性书写顺序（重点）
- 布局定位顺序：display/position/float/clear/visibility/overflow（建议display第一个写，毕竟关系到模式）
- 自身属性：width/height/padding/border/background
- 文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
- 其他属性（css）：content/cursor/border-radiu/box-shadow/tex-shadow/background：linear-gradient…
14.4 导航栏注意点
实际开发中，不会直接用链接a而是用 li 包含链接（li+a）的做法
- li+a 语义更清晰
- 如果直接用a，搜索引擎容易辨别为有堆砌关键字的嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站的排名
- 让导航栏一行显示，给 li 加浮动，因为li是块级元素，需要一行显示
- 这个nav导航可以不添加关键字，将来可以继续添加其余文字
14.5
- 如果一个盒子既有left属性，也有right属性，则默认会执行left属性 同理 top和bottom 会执行top
15. 网页布局总结
一个完整的网页，是由标准流、浮动、定位一起完成布局的，每个都有自己的用法
- 标准流
可以让盒子上下排列或者左右排列，垂直的块级盒子显示用标准流布局
- 浮动
可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就浮动布局
- 定位
定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示，如果元素自由在某个盒子内移动就用定位布局
16. 元素的显示与隐藏
类似网站广告，当我们点击关闭就不见了，但是当我们重新刷新页面时，会重新出现。
本质：让一个元素在页面中隐藏或者显示出来
display 显示隐藏 visibility 显示隐藏 overflow 溢出显示隐藏
16.1 display属性
用于设置一个元素应如何显示
- display:none; 隐藏对象
- display:block; 除了转换为块级元素的意思，同时还显示元素的意思
display隐藏元素后，不再占有原来的位置
后面应用极其广泛，搭配JS可以做很多网页特效
16.2 visibility 可见性
用于指定一个元素可见还是隐藏
- visibility:visible; 元素可视
- visibility:hidden; 元素隐藏
visibility隐藏元素后，继续占有原来的位置
如果隐藏元素想要原来位置，就用visibility:hidden
如果隐藏元素不想要原来位置，就用display:none （用处更多 重点）
16.3 overflow 溢出
指定了如果内容溢出一个元素的框（超过其指定的高度及宽度）时，会发生什么
| 属性值 | 描述 |
|---|---|
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超出对象尺寸的内容，超出的部分隐藏 |
| scroll | 不管超出内容。总是显示滚动条 |
| auto | 超出自动显示滚动条。不超出不显示 |
一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响网页的布局
但是如果有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分
17. 精灵图
17.1 为什么需要精灵图
一个网页往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度
因此，为了有效地减少服务器接受的发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites 、CSS 雪碧）
17.2 精灵图的使用
使用精灵图的核心：
- 精灵技术主要针对的于背景图片使用。就是把多个小背景图片整合到一张大图片中
- 这个大图片也称sprites 精灵图 或者 雪碧图
- 移动背景图片位置，此时可以使用background-position
- 移动的距离就是这个目标图片的x和坐标。注意网页中的坐标有所不同（浏览器横着的是x ）
（背景图片x轴右边走是正值，左边走是负值，y轴同理）
- 因为一般情况都是往上往左移动，所以数值是负值
- 使用精灵图的时候需要精确测量每个小背景图片的大小和位置
18. 字体图标
18.1 字体图标的产生
字体图标使用场景：主要用于显示网页中通用的、常用的一些小图标。
精灵图是有诸多优点的，但缺点很明显。
- 图片文件还是比较大
- 图片本身放大和缩小会失灵
- 一旦图片制作完成想要更换非常复杂
此时，有一种技术的出现很好的解决了以上问题，就是字体图标iconfont
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，不属于字体
18.2 字体图标的优点
- 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标马上就会渲染出来，减少了服务器请求
- 灵活性：本质是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
- 兼容性：几乎支持所有的浏览器，请放心使用
注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化
总结：
- 如果遇到一些结构和样式比较简单的小图标，就用字体图标
- 如果遇到一些结构和样式复杂一点的小图片，就用精灵图
字体图标是一些网页常见的小图标，我们直接网上下载即可，因此可以分为：
- 字体图标的下载
- 字体图标的引入（引入到html页面中）
- 字体图标的追加（以后添加新的小图标）
18.3 字体图标的下载
推荐网站：
- icomoon字库 http://icomoon.io 推荐指数：五星
IcoMoon 成立于2011年，推出了第一个自定义图标字体生成器，它允许用户选择所需要的图标，使它们成为一字型。该字库内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢（免费）
- 阿里 iconfont 字库 http://www.iconfont.cn/ 推荐：五星
这个是阿里巴巴 M2UX的一个iconfont 字体图标库，包含了淘宝图标库和阿里巴巴图标库。可以使用AI制作图标上传生成，重点是免费！
18.4 字体图标的引入
- 把下载包里的fonts文件放入页面根目录下
- 通过css样式中全局盛名字体：简单理解把这些字体文件通过css引入到我们的页面中。
一定要注意字体文件路径的问题
@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?dqdj5q'); src: url('fonts/icomoon.eot?dqdj5q#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?dqdj5q') format('truetype'), url('fonts/icomoon.woff?dqdj5q') format('woff'), url('fonts/icomoon.svg?dqdj5q#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block;}
- html标签内添加小图标
18.4.1 字体文件格式
不同浏览器的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件
18.5 字体图标的追加
如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中
把压缩包里的selection.json 从新上传，然后选中自己想要的图标，从新下载压缩包，并替换原来的文件即可
19. CSS三角
网页中常见一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标
div { width: 0; height: 0; line-height: 0; font-size: 0; border: 50px solid transparent; border-left-color: pink;}
20. CSS用户界面样式
20.1 什么是用户界面
所谓的界面样式，就是更改一些用户操作样式，一遍提高更好的用户体验
- 更改用户的鼠标样式
- 表单轮廓
- 防止表单域拖拽
20.2 鼠标样式cursor
li {cursor: pointer; }
设置或检索在对象上移动的鼠标样式指针采用何种系统预定义的光标形状
| 属性值 | 描述 |
|---|---|
| default | 小白 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
20.3 轮廓线 outline
给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框
input {outline: none; }
20.4 防止脱宅文本域 resize
实际开发中，我们文本域右下角是不可以拖拽的
textarea { resize: none;}
21. vertical-align 属性应用
css的vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。
官方解释：用于设置一个元素的垂直对齐方式，但是它只针对行内元素或者行内块元素有效。
语法：
vertical-align: baseline | top | middle | bottom
| 值 | 描述 |
|---|---|
| baseline | 默认。元素放置在父元素的基线上 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| middle | 把此元素放置在父元素的中部 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐 |
21.1 图片、表单和文字对齐
图片、表单都属于行内块元素，默认的vertical-align是基线对齐
此时可以给图片、表单这行内块元素的vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐
21.2 解决图片底部默认空白缝隙问题
bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐
主要解决方法有两种：
- 给图片添加vertical-align：middle |top |bottom 等。（提倡使用的）
- 把图片转换为块级元素 display:block;
例：
img{vertical-align: top;border:0;}
22. 溢出的文字省略号显示
22.1 单行文本溢出显示省略号–必须满足是三个条件
/*1. 先强制一行内显示文本 */white-space: nowrap; (默认 normal自动换行)/*2. 超出的部分隐藏*/overflow: hidden;/*3. 文字用省略号替代超出的部分*/text-overflow: ellipsis;
22.2 多行文字溢出显示省略号
多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或者移动端（移动端大部分是webKit内核）
overflow: hidden;text-overflow: ellipsis;/* 弹性伸缩盒子模型显示 */display: -webkit-box;/* 限制在一个块元素显示的文本的行数 */-webkit-line-clamp: 2;/* 设置或检索伸缩盒子对象的子元素的排列方式 */-webkit-box-orient: vertical;
更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。
23. 常见布局技巧
23.1 margin负值运用
例：
ul li { float: left; list-style: none; width: 150px; height: 200px; border: 1px solid red; margin-left: -1px;}
- 让每个盒子margin往左侧移动 -1px 正好压住相邻盒子边框
- 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位（保留位置）；如果有定位，则加z-index)
23.2 文字围绕浮动元素
巧妙运用浮动元素不会压住文字的特性
比如左侧图片，右侧文字 围绕 只需给包含的图片和文字的盒子添加浮动就好
23.3 行内块巧妙运用
23.4 CSS三角强化
代码：
width: 0;height: 0;/* 1.只保留右边的边框有颜色 */border-color: transparent red transparent transparent;/* 2.样式都是solid */border-style: solid;/* 3.上边框宽度要变大，有边框宽度稍小，其余的边框改为0 */border-width: 22px 8px 0 0;
24. CSS初始化
不同的浏览器对有些变迁的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化。
简单理解：CSS初始化是指重设浏览器的样式。（也指CSS reset）
每个网页都必须首先进行CSS初始化
Unicode编码字体：把中文字体的名称用相应的Unicode编码来代替，这样可以有效的避免浏览器届时css代码时候出现乱码的问题。
25. HTML5提高
HTML5的新增特性主要是针对以前的不足，增加了一些新的标签、新的表单和新的表单属性等。
这些新特性都有兼容问题，基本是IE9+以上版本的浏览器才支持，如果不考虑兼容性的问题，可以大量使用这些特性。
声明：
- 新特性增加了许多但是我们专注于开发常用的新特性。
25.1 HTML5新增的语义化标签
以前布局，我们基本是用div来做，div对于搜索引擎来说，是没有语义的。
-
<header>:头部标签<nav>: 导航标签<article>: 内容标签<section>: 定义文档某个区域<aside>: 侧边栏标签<footer>: 尾部标签
注意：
- 这种语义化标准主要是针对搜索引擎的
- 这种新标签页面中可以使用多次
- 在IE9中，需要把这些元素转换为块级元素
- 其实，我们移动端更喜欢这种标签
- HTML5还增加了很多其它标签
25.2 新增的多媒体标签
HTML5在不使用插件的情况下，也可以原生的支持音频格式文件的播放，当然，支持的格式是有限的。
主要包含两个：
- 音频
- 视频
使用它们可以可以很方便的在页面中插入音频和视频，而不再去使用flash和其它浏览器插件
25.2.1 视频
当前元素支持三种格式：尽量使用MP4格式
语法：
<video src="文件地址" controls="controls"></video>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L4qu6vTB-1628581045892)(C:\Users\18115\AppData\Roaming\Typora\typora-user-images\image-20210517201106062.png)]
常见属性：
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题） |
| controls | controls | 向用户显示播放控件 |
| width | pixels（像素） | 设置播放器宽度 |
| height | pixels（像素） | 设置播放器高度 |
| loop | loop | 播放完是否继续播放该视频，循环播放 |
| preload | auto （预先加载视频）none（不先加载视频） | 规定是否预加载视频（如果有了autoplay，就忽略该属性） |
| src | url | 视频url地址 |
| poster | imgurl | 加载等待的画面照片 |
| muted | muted | 静音播放 |
25.2.2 音频
当前元素支持三种格式：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-as0U2u02-1628581045893)(C:\Users\18115\AppData\Roaming\Typora\typora-user-images\image-20210517203117688.png)]
语法：
<audio src="文件地址" controls="controls"></audio>
若考虑兼容性问题，则：
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
常见属性：
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放 |
| controls | controls | 若出现，则向用户显示控件，比如播放按钮 |
| loop | loop | 若出现，则每当音频结束时重新开始播放 |
| src | url | 要播放音频的URL |
25.2.3 多媒体标签总结
- 音频标签和视频标签使用方式基本一致
- 浏览器支持情况不同
- 谷歌浏览器把音频和视频自动播放禁止了
- 我们可以给视频标签添加muted属性来静音播放，但音频不可以（后面可以通过JS解决）
- 视频标签是重点，我们经常设置自动播放，不使用controls控件，循环和设置大小属性
25.3 新增的input表单
| 属性值 | 说明 |
|---|---|
| type=“email” | 限制用户输入必须为email类型 |
| type=“url” | URL类型 |
| type=“date” | 日期 |
| type=“time” | 时间 |
| type=“month” | 月 |
| type=“week” | 周 |
| type=“year” | 年 |
| type=“number” | 数字 |
| type=“tel” | 手机号码 |
| type=“search” | 搜索框 |
| type=“color” | 生成一个颜色选择表单 |
- 重点记住：number、tel、search这三个
25.4 表单属性
| 属性 | 值 | 说明 |
|---|---|---|
| required | required | 表单拥有该属性表示其内容不能为空，必填 |
| placeholder | 提示文本 | 表单的提示信息，存在默认值将不显示 |
| autofocus | autofocus | 自动聚焦属性，页面加载完成自动聚焦到指定表单 |
| autocomplete | off/on | 当用户在字段开始键入时，浏览器基于之前键入过的值，一个显示出在字段中填写的选项。 默认已经打开，如 autocomplete=“on”,关闭 autocomplete="off"需要放在表单内，同时加上name属性，同时成功提交 |
| multiple | multiple | 可以多选文件提交 |
- 可以通过以下设置方式修改placeholder里面的字体颜色：
input::placeholder{
color:pink;
}
26. CSS提高
26.1 CSS3的现状
- 新增的CSS3特性有兼容问题，IE9+才支持
- 移动端优于PC端
- 不断改进中
- 应用相对广泛
- 现阶段主要学习：新增选择器和盒子模型以及其他特性
CSS3新增了选择器，可以更加便捷，更加自由的选择目标元素
- 属性选择器
- 结构伪类选择器
- 伪元素选择器
26.2 属性选择器
属性选择器可以根据元素特定属性来选择元素，这样就可以不用借助于类或者id选择器
| 选择符 | 简介 |
|---|---|
| E[att] | 选择具有 att 属性的E元素 例：input[value] |
| E[att=“val”] | 选择具有 att 属性且属性值等于 val 的E元素 |
| E[att^=“val”] | 匹配具有 att 属性且值以 val 开头的元素 |
| E[att$=“val”] | 匹配具有 att 属性且值以 val 结尾的元素 |
| E[att*=“val”] | 匹配具有att属性且值中含有 val 的E元素 |
注意：类选择器、属性选择器、伪类选择器，权重为10
26.3 结构伪类选择器
结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器里面的子元素（一般用于选择父级里面的第几个孩子）
| 选择符 | 简介 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素E |
| E:last-child | 匹配父元素中的最后一个E元素 |
| E:nth-child(n) | 匹配父元素中的第n个子元素E |
| E:first-of-type | 指定类型E的第一个 |
| E:last-of-type | 指定类型E的最后一个 |
| E:nth-of-type(n) | 指定类型E的第n个 |
**nth-child(n)**选择某个父元素的一个或多个特定的子元素
- n可以是数字，关键字和公式
- n如果是数字，就是选择第n个子元素，里面的数字从1开始…
- n可以是关键字：even 偶数 odd 奇数
- n可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超过了元素的个数会被忽略）
| 公式 | 取值 |
|---|---|
| 2n | 偶数 |
| 2n+1 | 奇数 |
| 5n | 5 10 15 … |
| n+5 | 从第5个开始（包含第五个）到最后 |
| -n+5 | 前5个（包含第五个） |
- nth-child 会把所有的盒子排列序号
例：section div: nth-child(1){ }
执行的时候首先看：nth-child(1)，之后再回去看 前面div
- nth-of-type 会把指定元素的盒子排列序号
例：section div: nth-of-typre(1){ }
执行的时候首先看 元素div 之后再看 :nth-of-child(1) 第几个孩子
区别：
- nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
- nth-of-type 对父元素里面指定子元素进行排序选择，先去匹配E，然后再根据E找第n个孩子
小结：
- 结构伪类选择器一般用于选择父级里面的第几个孩子
- nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
- nth-of-type 对父元素里面指定子元素进行排序选择，先去匹配E，然后再根据E找第n个孩子
- 关于 nth-child (n) 我们要知道n是从0开始计算的，记住常用的公式
- 如果是无序列表，用nth-child更多
- 类选择器、属性选择器、伪类选择器，权重为10
26.4 伪元素选择器（重点）
伪类选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构
| 选择符 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
注意：
- before和after创建一个元素，但是属于行内元素
- 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
- 语法： element::before{}
- before 和after **必须有 content 属性 ** 可以为空 （content: ’ '😉
- before 在父元素内容的前面创建元素，after在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样，权重为1
使用场景：
- 伪元素字体图标
- 仿土豆效果(遮罩层)
- 伪元素清除浮动
后面伪元素清除浮动算是一种额外标签法的一个升级和优化
.clearfix:after {
/*伪元素必须写的属性*/
content: "";
/*插入的元素必须是块级*/
display: block;
/*不要看见这个元素*/
height: 0;
/*核心代码清除浮动*/
clear: both;
/*不要看见这个元素*/
visibility: hidden;
}
.clearfix:before,.clearfix:after {
content:"";
/*转换为块级元素并一行显示*/
display:table;
}
.clearfix:after {
clear:both;
}
26.5 CSS3盒子模型
css3中可以通过box-sizing来指定盒子模型，有两个值：即可指定为content-box、border-box，这样我们计算盒子的大小的方式就发生了改变
可以分成两种情况：
- box-sizing：content-box 盒子大小为width+padding+border（以前默认的）
- box-sizing：border-box 盒子大小为width
如果盒子模型我们改为了box-sizing: border-box，那padding和border就不会撑大盒子（前提padding和border不会超过width宽度）
26.6 CSS3其它特性（了解）
26.6.1 图片模糊处理
CSS3滤镜filter：
filter CSS属性将模糊或颜色偏移等图形效果应用于元素
filter: 函数()； /*例如：filter:blur(5px); blur模糊处理 数值越大越模糊*/
26.6.2 计算盒子宽度calc函数
CSS3 calc函数：
clac() 此CSS函数让你在声明CSS属性值时执行一些计算。
width:calc(100% - 80px);
括号里可以使用±*/来进行计算
CSS3还增加了一些 动画 2D3D 等新特性。
26.7 CSS3过渡（重点）
过渡（transition）是CSS3中具有颠覆性的特征之一，我们可以在不使用flash动画或JavaScript 的情况下，当元素从一种样式变换成另一种样式时伪元素添加效果。
过渡动画:是从一个状态 渐渐的过渡到另外一个状态
可以让我们页面更好看，跟动感十足，虽然低版本浏览器不支持（IE9以下版本）但是不会影响页面布局。
我们现在经常和:hover 一起搭配使用。
transition:要过渡的属性 花费时间 运动曲线 何时开始;
- 属性：想要变化的css属性，宽度高度 背景颜色 内外边距都可以 ，如果想要所有的属性都变化过渡，写一个all就可以
- 花费时间：单位是 秒 （必须写单位）比如0.5s
- 运动曲线：默认是ease（可以省略）（ease是逐渐慢下来）
- 何时开始：单位是 秒（必须写单位）可以设置延迟触发时间 默认是0s （可以省略）
如果想要写多个属性，利用逗号进行隔开
例：transition: width .5s, height .5s;
案例：进度条
27. 广义的HTML5
狭义的HTML5 html标签本身 CSS3 相关样式
- 广义的HTML5 是 HTML5本身+CSS3+JavaScript
- 这集合有时称为HTML5和朋友，通常缩写为HTML5
- 虽然HTML5 的一些特性仍然不被某些浏览器支持，但是它是一种发展趋势
- HTML5 MDN介绍：http://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML
元素，after在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样，权重为1
使用场景：
- 伪元素字体图标
- 仿土豆效果(遮罩层)
- 伪元素清除浮动
后面伪元素清除浮动算是一种额外标签法的一个升级和优化
.clearfix:after {
/*伪元素必须写的属性*/
content: "";
/*插入的元素必须是块级*/
display: block;
/*不要看见这个元素*/
height: 0;
/*核心代码清除浮动*/
clear: both;
/*不要看见这个元素*/
visibility: hidden;
}
.clearfix:before,.clearfix:after {
content:"";
/*转换为块级元素并一行显示*/
display:table;
}
.clearfix:after {
clear:both;
}
26.5 CSS3盒子模型
css3中可以通过box-sizing来指定盒子模型，有两个值：即可指定为content-box、border-box，这样我们计算盒子的大小的方式就发生了改变
可以分成两种情况：
- box-sizing：content-box 盒子大小为width+padding+border（以前默认的）
- box-sizing：border-box 盒子大小为width
如果盒子模型我们改为了box-sizing: border-box，那padding和border就不会撑大盒子（前提padding和border不会超过width宽度）
26.6 CSS3其它特性（了解）
26.6.1 图片模糊处理
CSS3滤镜filter：
filter CSS属性将模糊或颜色偏移等图形效果应用于元素
filter: 函数()； /*例如：filter:blur(5px); blur模糊处理 数值越大越模糊*/
26.6.2 计算盒子宽度calc函数
CSS3 calc函数：
clac() 此CSS函数让你在声明CSS属性值时执行一些计算。
width:calc(100% - 80px);
括号里可以使用±*/来进行计算
CSS3还增加了一些 动画 2D3D 等新特性。
26.7 CSS3过渡（重点）
过渡（transition）是CSS3中具有颠覆性的特征之一，我们可以在不使用flash动画或JavaScript 的情况下，当元素从一种样式变换成另一种样式时伪元素添加效果。
过渡动画:是从一个状态 渐渐的过渡到另外一个状态
可以让我们页面更好看，跟动感十足，虽然低版本浏览器不支持（IE9以下版本）但是不会影响页面布局。
我们现在经常和:hover 一起搭配使用。
transition:要过渡的属性 花费时间 运动曲线 何时开始;
- 属性：想要变化的css属性，宽度高度 背景颜色 内外边距都可以 ，如果想要所有的属性都变化过渡，写一个all就可以
- 花费时间：单位是 秒 （必须写单位）比如0.5s
- 运动曲线：默认是ease（可以省略）（ease是逐渐慢下来）
- 何时开始：单位是 秒（必须写单位）可以设置延迟触发时间 默认是0s （可以省略）
如果想要写多个属性，利用逗号进行隔开
例：transition: width .5s, height .5s;
案例：进度条
27. 广义的HTML5
狭义的HTML5 html标签本身 CSS3 相关样式
- 广义的HTML5 是 HTML5本身+CSS3+JavaScript
- 这集合有时称为HTML5和朋友，通常缩写为HTML5
- 虽然HTML5 的一些特性仍然不被某些浏览器支持，但是它是一种发展趋势
- HTML5 MDN介绍：http://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML
1322
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
