Emmet语法——HTML

生成标签：直接输入标签名，按tab键即可
如果想要生成多个相同标签，加上* 就可以了。比如div*3
如果有父子级关系的标签，可以用>。比如ul>li
如果有兄弟关系的标签，用+就可以了。比如div+p
如果生成带有类名或者id的，直接写.demo或者#demo，tab键就可以了
如果生成的div类名是有顺序的，可以用自增符号$

CSS3基础

一、CSS简介

1. CSS语法规范

CSS规则由两个主要的部分构成：选择器以及一条或多条声明

2. CSS代码风格

空格规范
- 属性值前面，冒号后面，保留一个空格
- 选择器（标签）和大括号中间保留空格

3. CSS属性书写顺序

布局定位属性：display/position/float/clear/visibility/overflow
自身属性：width/height/margin/padding/border/background
文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
其他属性：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient

二、CSS选择器

1. 基础选择器

标签选择器
类选择器
- 多类名：多个类名中间用空格分开
id选择器
通配符选择器
- *，表示选取页面中所有元素（标签）

2. 复合选择器

后代选择器/包含选择器
- 元素1 元素2 {}
- 元素1和元素2中间用空格隔开
- 元素1是父级，元素2是子级，最终选择的是元素2
- 元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可
- 元素1和元素2可以是任意基础选择器
子选择器
- 只能选择作为某元素的最近一级子元素（亲儿子元素）
- 元素1>元素2 {}
并集选择器
- 选择多组标签，同时为他们定义相同的样式
- 元素1,元素2 {}
伪类选择器
- 用于向某些选择器添加特殊的效果
- 链接伪类选择器
  - a:link：选择所有未被访问的链接
  - a:visited：选择所有已被访问的链接
  - a:hover：选择鼠标指针位于其上的链接
  - a:active：选择活动链接（鼠标按下未弹起的链接）
  - 为了确保生效，请按照LVHA的顺序声明
- :focus伪类选择器
  - 用于选取获得焦点的表单元素
  - input:focus {}

三、CSS引入方式

行内样式表（行内式）
- style其实就是标签的属性
- 在双引号中间，写法要符合CSS规范
内部样式表（嵌入式）
- <style>标签理论上可以放在HTML文档的任何地方，但一般会放在文档的标签中
外部样式表（链接式）
- <link rel='stylesheet' href=''>

四、字体属性

font-family：字体系列
font-size：字体大小
- 谷歌浏览器默认字体大小为16px
font-weight：字体粗细
- 400 = normal
- 700 = bold
font-style：文字样式
- normal
- italic（斜体）
复合属性
- font: font-style font-weight font-size/line-height font-family;
- 不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用

五、文本属性

color：文本颜色
- 开发中最常用的是十六进制
text-align：对齐文本
- 用于设置元素内文本内容的水平对齐方式
- left（左对齐）
- right（右对齐）
- center（居中对齐）
text-decoration：装饰文本
- none
- underline
- overline（上划线）
- line-through（删除线）
text-indent：文本缩进
- 用来指定文本的第一行的缩进，通常是将段落的首行缩进
- 2em => em是一个相对单位，就是当前元素一个文字的大小，如果当前元素没有设置大小，则会按照父元素的一个文字大小
line-height：行间距（行高）
- 行间距（行高） = 上间距+文本高度+下间距
- 单行文字垂直居中：让文字的行高等于盒子的高度
- 行高小于盒子高度，文字会偏上；行高大于盒子高度，文字会偏下

六、元素显示模式

元素显示模式就是元素（标签）以什么方式进行显示
HTML元素一般分为块元素和行内元素两类

1. 块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等
块元素的特点：
- 自己独占一行
- 高度、宽度、外边距以及内边距都可以控制
- 宽度默认是容器（父级宽度）的100%
- 是一个容器或盒子，里面可以放行内或者块级元素
注意：
- 文字类的元素内不能使用块级元素

2. 行内元素/内联元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等
行内元素的特点：
- 相邻行内元素在一行上，一行可以显示多个
- 高、宽直接设置是无效的
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或其他行内元素
注意：
- 链接里面不能再放链接
- 特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全

3. 行内块元素

在行内元素中有几个特殊的标签<img>、<input>、<td>，它们同时具有块元素和行内元素的特点
行内块元素的特点：
- 和相邻行内元素（行内块）在一行上，但是它们之间会有空白缝隙。一行可以显示多个
- 默认宽度就是它本身内容的
- 高度、行高、外边距以及内边距都可以控制

4. 元素显示模式转换

一个模式的元素需要另外一个模式的特性
转换为块元素：display: block;
转换为行内元素：display: inline;
转换为行内块：display: inline-block;

七、背景

background-color：背景颜色
- transparent（默认）
- color
background-image：背景图片
- 常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置
- none
- url()
background-repeat：背景平铺
- repeat（默认）
- no-repeat
- repeat-x
- repeat-y
background-position：背景图片位置
- background-positon: x y;
- x坐标和y坐标可以使用方位名词或者精确单位
- 参数是方位名词
  - 如果指定的两个值都是方位名词，则两个值前后顺序无关
  - 如果只指定了一个方位名词，另一个省略，则第二个值默认居中对齐
- 参数是精确单位
  - 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中
- 参数是混合单位
background-attachment：背景图像固定（背景附着）
- 设置背景图像是否固定或者随着页面的其余部分滚动
- 后期可以制作视差滚动的效果
- scroll（默认）
- fixed
背景属性复合写法
- background:没有特定的书写顺序，一般习惯约定顺序为：背景颜色背景图片地址背景平铺背景图像滚动背景图片位置
background: rgba(0, 0, 0, 0.3);：背景色半透明
- 最后一个参数是alpha透明度，取值范围在0~1之间
- 背景半透明是指盒子背景半透明，盒子里面的内容不受影响

八、CSS的三大特性

1. 层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题
样式冲突，遵循的是就近原则，哪个样式离结构近，就执行哪个样式
样式不冲突，不会层叠

2. 继承性

子标签会继承父标签的某些样式（text-, font-, line-这些元素开头的可以继承，以及color属性）
行高的继承性
- 行高可以跟单位也可以不跟单位
- 1.5是当前元素文字大小font-size的1.5倍
  - body行高1.5，这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

3. 优先级

选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行
- 继承/*（0,0,0,0）< 元素选择器（0,0,0,1）< 类/伪类选择器（0,0,1,0）< ID选择器（0,1,0,0）< 行内样式（1,0,0,0）< !important（∞）
  - 权重是由4组数字组成，但是不会有进位
  - 等级判断从左向右，如果某一位数值相同，则判断下一位数值
  - 继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的的权重都是0
- 权重叠加
  - 如果是复合选择器，则会有权重叠加，需要计算权重
  - 权重虽然会叠加，但是永远不会有进位

九、盒子模型

css盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容

1. 边框（border）

border-width：边框宽度，一般情况下都用px
border-style：边框样式
- solid（实线）
- dashed（虚线）
- dotted（点线）
border-color：边框颜色
复合写法
- border: 1px solid red 没有顺序
分开写法
表格的细线边框
- border-collapse：控制浏览器绘制表格边框的方式。它控制相邻单元格的边框
  - collapse（合并相邻的边框）
边框会额外增加盒子的实际大小
- 测量盒子大小的时候，不量边框
- 如果测量的时候包含了边框，则需要width/height减去边框宽度

2. 内边距（padding）

边框与内容之间的距离
padding-left/right/top/bottom
复合写法 padding:
- 1个值，代表上下左右的内边距
- 2个值，代表上下内边距，左右内边距
- 3个值，代表上内边距，左右内边距，下内边距
- 4个值，代表上，右，下，左（顺时针）
如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子
- 让width/height减去多出来的内边距大小即可
如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

3. 外边距（margin）

控制盒子和盒子之间的距离
margin-left/right/top/bottom
复合写法
外边距可以让块级盒子水平居中
- 盒子必须指定了宽度
- 盒子左右的外边距都设置为auto
- margin: 0 auto;
以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center即可
外边距合并
- 使用margin定义块元素的垂直外边距时，可能会出现外边距的合并
- 相邻块元素垂直外边距的合并
  - 当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是两者之和，而是取两个值中的较大者
- 嵌套块元素垂直外边距的塌陷
  - 对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值
  - 解决方案： ①可以为父元素定义上边框； ②可以为父元素定义上内边距； ③可以为父元素添加 overflow: hidden； ④浮动、固定、绝对定位的盒子不会有塌陷问题 + 清除内外边距
- 网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距
```
* {
  padding: 0;
  margin: 0;                                                                                              
}                                                                                                
```
- 行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块级元素就可以了

4. 圆角边框

border-radius：外边框圆角
- （椭）圆与边框的交集形成圆角效果
- 参数值可以为数值或百分比的形式
- 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角（顺时针）
- 分开写：border-top-left-radius、 border-top-right-radius、 border-bottom-right-radius、 border-bottom-left-radius

5. 盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;
- h-shadow：必需。水平阴影的位置。允许负值
- v-shadow：必需。垂直阴影的位置。允许负值
- blur：可选。模糊距离
- spread：可选。阴影的尺寸
- color：可选。阴影的颜色
- inset：可选。将外部阴影改为内部阴影
  - 默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效
盒子阴影不占用空间，不会影响其他盒子排列

6. 文字阴影

text-shadow: h-shadow v-shadow blur color;

十、浮动

CSS提供了三种传统布局方式：

普通流（标准流/文档流）
- 标签按照规定好默认方式排列
  - 块级元素会独占一行，从上到下顺序排列
    - 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
  - 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
    - 常见元素：span、a、i、em等
浮动
- 有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式
- 最典型的应用：可以让多个块级元素一行内排列显示
- 多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
定位

1. 什么是浮动

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
- none：不浮动（默认值）
- left：向左浮动
- right：向右浮动

2. 浮动特性

浮动元素会脱离标准流（脱标）
- 脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标）
- 浮动的盒子不再保留原先的位置
浮动的元素会一行内显示并且元素顶部对齐
- 如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐
浮动的元素会具有行内块元素的特性
- 任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性
  - 如果行内元素有了浮动，则不需要转换为块级/行内块元素就可以直接给高度和宽度
  - 如果块级元素没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定

3. 浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置，我们网页布局一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
先设置盒子大小，之后再设置盒子的位置
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流
一浮全浮

4. 清除浮动

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子
清除浮动的本质是清除浮动元素造成的影响
- 如果父盒子本身有高度，则不需要清除浮动
- 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
clear:
- left：不允许左侧有浮动元素（清除左侧浮动的影响）
- right：不允许右侧有浮动元素（清除右侧浮动的影响）
- both：同时清除左右两侧浮动的影响
清除浮动的策略是：闭合浮动。只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子

清除浮动方法：

额外标签法/隔墙法
- 在浮动元素末尾添加一个空的标签，例如
  或者
- 新的空标签必须是块级元素
父级添加overflow方法
- overflow: hidden/auto/scroll;

父级添加:after伪元素

.clearfix:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  /* IE6、7专有 */
  *zoom: 1;    
}

父级添加双伪元素

.clearfix:before,.clearfix:after {
  content: '';
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;    
}

5. 案例

导航栏
- 用li包含链接（li+a）的做法
  - 让导航栏一行显示，给li加浮动，因为li是块级元素，需要一行显示
  - 导航栏可以不给宽度，将来可以继续添加剩余文字
  - 因为导航栏里面文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定宽度

十一、定位

1. 为什么需要定位

定位则是可以让盒子自由地在某个盒子内移动位置或者固定在屏幕中某个位置，并且可以压住其他盒子

2. 定位组成

定位 = 定位模式 + 边偏移
- 定位模式用于指定一个元素在文档中的定位方式
- 边偏移决定了该元素的最终位置
定位模式
- position
  - static（静态定位）
  - relative（相对定位）
  - absolute（绝对定位）
  - fixed（固定定位）
边偏移
- 定位的盒子移动到最终位置
  - top（顶端偏移量，定义元素相对于其父元素上边线的距离）
  - bottom（底部偏移量，定义元素相对于其父元素下边线的距离）
  - left（左侧偏移量，定义元素相对于其父元素左边线的距离）
  - right（右侧偏移量，定义元素相对于其父元素右边线的距离）
- 如果一个盒子既有left属性也有right属性，则默认会执行left属性；同理 top bottom 会执行top

3. 静态定位 static

默认定位方式，无定位的意思
静态定位按照标准流特性摆放位置，它没有边偏移

4. 相对定位 relative

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的
相对定位的特点：
- 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
- 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置）
相对定位的典型应用是来限制绝对定位的

5. 绝对定位 absolute

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的
绝对定位的特点：
- 如果没有祖先元素或者祖先元素没有定位（标准流/浮动），则以浏览器为准定位
- 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置
- 绝对定位不再占有原先的位置（脱标）

6. 子绝父相

子级使用绝对定位，父级则需要用相对定位
- 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子
- 父盒子需要加定位限制子盒子在父盒子内显示
- 父盒子布局时，需要占有位置，因此父亲只能是相对定位

7. 固定定位 fixed

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变
固定定位的特点：
- 以浏览器的可视窗口为参照点移动元素
  - 跟父元素没有任何关系
  - 不随滚动条滚动
- 固定定位不再占有原先的位置（脱标）
小技巧：固定在版心右侧位置
- 让固定定位的盒子left: 50%，走到浏览器可视区（也可以看做版心）的一半位置
- 让固定定位的盒子margin-left: 版心宽度的一半距离，多走版心宽度的一半位置

8. 粘性定位 sticky

粘性定位可以被认为是相对定位和固定定位的混合
粘性定位的特点：
- 以浏览器的可视窗口为参照点移动元素
- 粘性定位占有原先的位置
- 必须添加top、left、right、bottom其中一个才有效

9. 定位叠放次序 z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序（z轴）
数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上
数字后面不能加单位
只有定位的盒子才有z-index属性

10. 定位的拓展

绝对定位的盒子居中

加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中
left: 50%，让盒子的左侧移动到父级元素的水平中心位置
margin-left: 让盒子向左移动自身宽度的一半

定位特殊特性

绝对定位和固定定位也和浮动类似
- 行内元素添加绝对或者固定定位，可以直接设置高度和宽度
- 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小

脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位（固定定位）元素的都不会触发外边距合并的问题

绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）
- 浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素
但是绝对定位（固定定位）会压住下面标准流所有的内容

11. 网页布局总结

标准流
- 可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局
浮动
- 可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局
定位
- 定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局

十二、元素的显示与隐藏

display
- none（隐藏对象）
  - 隐藏元素后，不再占有原来的位置
- block（除了转换为块级元素之外，同时还有显示元素的意思）
visibility
- visible（可视）
- hidden（隐藏）
  - 隐藏元素后，继续占有原来的位置
overflow 溢出
- visible
- hidden
- auto（溢出的部分显示滚动条，不溢出不显示）
- scroll（溢出的部分显示滚动条，不溢出也显示）

十三、精灵图

一个网页中往往会应用很多小的背景图像作为修饰，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术
核心技术：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了

1. 精灵图的使用

精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中
这个大图片也称为sprites精灵图或者雪碧图
移动背景图片位置，此时可以使用background-position
移动的距离就是这个目标图片的x和y坐标，注意网页中的坐标有所不同
因为一般情况下都是往上往左移动，所以数值是负值
使用精灵图的时候需要精确测量，每个小背景图片的大小和位置

十四、字体图标 iconfont

使用场景：主要用于显示网页中通用的、常用的一些小图标
展示的是图标，本质属于字体
优点：
- 轻量级
- 灵活性
- 兼容性

1. 字体图标的下载

icomoon字库
阿里iconfont字库

2. 字体图标的引入

把下载包里面的fonts文件夹放入页面根目录下
在CSS样式中全局声明字体 @font-face {}

html标签内添加小图标

span {
  font-family: '';
  font-size: ;
  color: ;
}

3. 字体图标的追加

把压缩包里面的selection.json重新上传，然后选中自己想要的新图标，重新下载压缩包，并替换原来的文件即可

十五、CSS三角

  width: 0;
  height: 0;
  /* 兼容性
  line-height: 0;
  font-size: 0;
  */
  border: 50px solid transparent;
  border-left-color: pink;

十六、用户界面样式

1. 鼠标样式

cursor
- default（小白，默认）
- pointer（小手）
- move（移动）
- text（文本）
- not-allowed（禁止）

2. 表单轮廓线

outline
- 0/none（去掉默认的蓝色边框）

3. 拖拽文本域

resize
- none（防止拖拽文本域）

十七、vertical-align

经常用于设置图片或者表单（行内块元素）和文字垂直对齐
用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效
vertical-align
- baseline（默认，元素放置在父元素的基线上）
- top（把元素的顶端与行中最高元素的顶端对齐）
- middle（把此元素放置在父元素的中部）
- bottom（把元素的顶端与行中最低的元素的顶端对齐）
解决图片底部默认空白缝隙问题
- 图片底测会有一个空白缝隙，原因是行内块元素会和文字的基线对齐
- 给图片添加vertical-align: middle/top/bottom;等
- 把图片转换为块级元素display: block;

十八、文字溢出省略号显示

1. 单行文本溢出显示省略号

```
/* 先强制一行内显示文本 */
white-space: nowrap;  // 默认normal自动换行

/* 超出的部分隐藏 */
overflow: hidden;

/* 文字用省略号替代超出的部分 */
text-overflow: ellipsis;
```

2. 多行文本溢出显示省略号

有较大兼容性问题，适合于webkit浏览器或移动端（移动端大部分是webkit内核）

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

十九、常见布局技巧

1. margin负值的运用

让每个盒子margin往左侧移动-px正好压住相邻盒子边框
鼠标经过某个盒子的时候，提高当前盒子的层级即可
- 如果没有定位，则加相对定位（保留位置）
- 如果有定位，则加z-index

2. 文字围绕浮动元素

3. 行内块的巧妙运用

4. css三角强化

width: 0;
height: 0;
border-top: 100px solid transparent;
border-right: 50px solid black;
border-bottom: 0;
border-left: 0;

width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0;

二十、补充

1. favicon图标

favicon.ico一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上
引入
- 在html页面里面的元素之间引入代码
- <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

HTML5和CSS3提高

一、HTML5的新特性

1. 新增的语义化标签

<header>：头部标签
<nav>：导航标签
<article>：内容标签
<section>：定义文档某个区域
<aside>：侧边栏标签
<footer>：尾部标签
注意：
- 这种语义化标签主要是针对搜索引擎的
- 这些新标签页面中可以使用多次
- 在IE9中，需要把这些元素转换为块级元素
- 其实，我们移动端更喜欢使用这些标签

2. 新增的多媒体标签

<audio>：音频
- <audio src="" controls="controls"></audio>
  - autoplay（谷歌把音频和视频自动播放禁止了）
  - controls
  - loop
  - src
<video>：视频
- video src="" controls="controls"`
  - autoplay（视频就绪自动播放）（谷歌浏览器需要添加muted来解决自动播放问题）
  - controls（向用户显示播放控件）
  - width（设置播放器宽度）
  - height（设置播放器高度）
  - loop（循环播放）
  - preload（是否预加载视频）（如果有了autoplay，就忽略该属性）
    - auto（预先加载）
    - none
  - src（视频url地址）
  - poster（加载等待的画面图片）
  - muted（静音播放）

3. 新增input表单

type
- email/url/date/time/month/week/number/tel/search/color
- 验证的时候必须添加form表单域
- 当点击提交按钮时就可以验证表单了
属性
- required（内容不能为空，必填）
- placeholder（提示信息）
  - input::placeholder { color:pink; }
- autofocus（自动聚焦，页面加载完成自动聚焦到指定表单）
- autocomplete（当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项，需要放在表单内，同时加上name属性，同时成功提交）
  - off
  - on（默认）
- multiple（可以多选文件提交）

二、CSS3的新特性

新增的CSS3特性有兼容性问题，ie9+才支持
移动端支持优于PC端

1. 新增选择器

属性选择器
- 根据元素特定属性来选择元素
  - E[att] 选择具有att属性的E元素
  - E[att="val"] 选择具有att属性且属性值等于val的E元素
  - E[att^="val"] 匹配具有att属性且值以val开头的E元素
  - E[att$="val"] 匹配具有att属性且值以val结尾的E元素
  - E[att*="val"] 匹配具有att属性且值中含有val的E元素
结构伪类选择器
- 根据文档结构来选择元素，常用于根据父级选择器里面的子元素
  - E:first-child 匹配父元素中的第一个子元素E
  - E:last-child 匹配父元素中的最后一个元素E
  - E:nth-child(n) 匹配父元素中的第n个子元素E
    - n可以是数字、关键字和公式
    - n如果是数字，就是选择第n个子元素，里面数字从1开始
    - n可以是关键字：even偶数，odd奇数
    - n可以是公式（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）
      - nth-child(n) 从0开始，每次加1往后面计算（括号里面必须是n，不能是其他的字母） = 选择了所有的孩子
      - 公式取值
        
        2n 偶数
        
        2n+1 奇数
        
        5n 5 10 15...
        
        n+5 从第5个开始（包含第五个）到最后
        
        -n+5 前5个（包含第五个）
  - E:first-of-type 指定类型E的第一个
  - E:last-of-type 指定类型E的最后一个
  - E:nth-of-type(n) 指定类型E的最后一个
- 区别
  - nth-child对父元素里面所有孩子排序选择（序号是固定的），先找到第n个孩子，然后看看是否和E匹配
  - nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子
```
<section>
  <p>光头强</p>
  <div>熊大</div>
  <div>熊二</div>
</section>
```
```
// nth-child 会把所有的盒子都排列序号
// 执行的时候首先看 :nth-child(1)，之后回去看前面div
section div:nth-child(1) {
  background-color: red;  //无选出
}

// nth-of-type 会把指定元素的盒子都排列序号
// 执行的时候首先看div指定的元素，之后回去看 :nth-of-type(1) 第几个孩子    
section div:nth-of-type(1) {
  background-color: red;  //选出了熊大
}
```
伪元素选择器
- 可以帮助我们利用CSS创建新标签元素，而不需要html标签，从而简化html结构
  - ::before 在元素内部的前面插入内容
  - ::after 在元素内部的后面插入内容
- before和after创建一个元素，但是属于行内元素
- 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
- before和after必须有content属性
伪元素选择器和标签选择器一样，权重为1（记得总权重还要加上前面的E）
类选择器、属性选择器、伪类选择器，权重为10（记得总权重还要加上前面的E）

2. CSS3盒子模型

CSS3中可以通过box-sizing来指定盒子模型，有2个值：即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变
- content-box
  - 盒子大小为width+padding+border（以前默认的）
- border-box
  - 盒子大小为width
  - 如果盒子模型我们改为了box-sizing:border-box，那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）
  - 此时如果想设置垂直居中对齐，则line-height的值需要减去上下的border和padding

3. CSS3其他特性

filter：滤镜
- 将模糊或颜色偏移等图形效果应用于元素
- filter: 函数();
  - filter: blur(5px); blur模糊处理，数值越大越模糊
calc()
- 此CSS函数让你在声明CSS属性值时执行一些计算
- width: calc(100%-80px); 子盒子宽度永远比父盒子小80px
  - 括号里面可以使用 + - * / 来进行计算
过渡
- 在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果
- 过渡动画：是从一个状态渐渐地过渡到另外一个状态
- 经常和:hover一起搭配使用
- transition: 要过渡的属性花费时间运动曲线何时开始;
  - 属性：想要变化的css属性；如果想要所有的属性都变化过渡，写一个all就可以
  - 花费时间：单位是秒（必须写单位）
  - 运动曲线：默认是ease（可以省略）
    - linear（匀速）
    - ease（逐渐慢下来）
    - ease-in（加速）
    - ease-out（减速）
    - ease-in-out（先加速后减速）
  - 何时开始：单位是秒（必须写单位），可以设置延迟触发时间，默认是0s（可以省略）
  - 如果想写多个属性值，利用逗号进行分割
- 谁做过渡给谁加
```
div {
  width: 200px;
  height: 100px;
  background-color: pink;
  // transition: width .5s, height .5s;
  transition: all 0.5s;
}
div:hover {
  width: 400px;
  height: 200px;
}
```

4. 2D转换

转换（transform）可以实现元素的位移、选择、缩放等效果
移动（translate）
- transform: translate(x, y);或者transform: translateX(n); transform: translateY(n);
- 不会影响到其他元素的位置
- translate中的百分比单位是相对于自身元素的宽度或高度
- 对行内标签没有效果
旋转（rotate）
- transform: rotate(度数);
- rorate里面跟度数，单位是deg
- 角度为正时，顺时针；负时，为逆时针
- 默认旋转的中心点是元素的中心点
- 转换中心点（transform-origin）
  - transform-origin: x y;
  - x y默认转换的中心点是元素的中心点（50% 50%）
  - 还可以给x y设置像素或者方位名词（top bottom left right center）
缩放（scale）
- transform: scale(x, y);
- 里面写数字不跟单位，即倍数
  - transform(1, 1) 宽和高都放大一倍，相当于没有放大
- 只写一个参数，则第二个参数和第一个参数一样（等比例缩放）
- 可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子
综合写法
- ```transform: translate() rotate() scale() ...``
- 其顺序会影响转换的效果（先旋转会改变坐标轴方向）
- 同时有位移和其他属性时，把位移放到最前

5. 动画

可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果
基本使用
- 用keyframes定义动画（类似定义类选择器）
```
@keyframes 动画名称 {
  0%{
    width: 100px;
  }  
  100%{
    width: 200px;
  }
}
```
  - 0%是动画的开始，100%是动画的完成 => 动画序列
  - 动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数
  - 用百分比来规定变化发生的时间（总的时间的划分），或用关键词"from"和"to"，等同于0%和100%
- 元素使用（调用）动画
```
div {
  animation-name: 动画名称;
  animation-duration: 持续时间;
}
```
常用属性
- animation-timing-function：规定动画的速度曲线，默认是"ease"
  - linear：匀速
  - ease：动画以低速开始，然后加快，在结束前变慢
  - ease-in：动画以低速开始
  - ease-out：动画以低速结束
  - ease-in-out：动画以低速开始和结束
  - steps()：指定了时间函数中的间隔数量（步长）
- animation-delay：规定动画何时开始，默认是0
- animation-iteration-count：规定动画播放的次数，默认是1，还有infinite
- animation-direction：规定动画是否在下一周期逆向播放，默认是"normal"，alternate逆播放
- animation-play-state：规定动画是否正在运行或暂停，默认是"running"，还有"paused"
- animation-fill-mode：规定动画结束后状态，保持forwards，回到起始backwards
- 简写
  - animation: 动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态;
  - 简写的属性里面不包含animation-play-state
  - 暂停动画：animation-play-state: paused; 经常和鼠标经过等其他配合使用

6. 3D转换

三维坐标系
- x轴：水平向右（x右边是正值，左边是负值）
- y轴：垂直向下（y下面是正值，上面是负值）
- z轴：垂直屏幕（往外面是正值，往里面是负值）
3D位移（translate3d）
- transform: translateX()
- transform: translateY()
- transform: translateZ() （translateZ一般用px单位）
- transform: translate3d(x,y,z)
3D旋转（rotate3d）
- 3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转
- transform: rotateX()
- transform: rotateY()
- transform: rotateZ()
- 左手准则
  - 左手的大拇指指向轴的正方向
  - 其余手指的弯曲方向就是该元素沿着轴旋转的方向（正值）
- transform: rotate3d(x,y,z,deg)
  - xyz表示旋转轴的矢量
透视（perspective）
- 也称为视距：视距就是人的眼睛到屏幕的距离
- 距离视觉点越近的在电脑平面成像越大，越远成像越小
- 透视的单位是像素
- 透视写在被观察元素的祖宗盒子上面
3D呈现（transform-style）
- 控制子元素是否开启三维立体环境
- flat（子元素不开启立体空间默认）
- preserve-3d（子元素开启立体空间）
- 代码写给父级，但是影响的是子盒子

三、浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加

1. 私有前缀

-moz-：代表firefox浏览器私有属性
-ms-：代表ie浏览器私有属性
-webkit-：代表safari、chrome私有属性
-o-：代表Opera私有属性

2. 提倡写法

  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;

移动web开发

一、移动端基础

1. 浏览器

兼容移动端主流浏览器，处理Webkit内核浏览器即可

2. 视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口
布局视口（layout viewport）
- 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题
- iOS，Android基本都将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页
视觉视口（visual viewport）
- 是用户正在看到的网站的区域
- 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度
理想视口（ideal viewport）
- 为了使网站在移动端有最理想的浏览和阅读宽度而设定
- 理想视口，对设备来讲，是最理想的视口尺寸
- 需要手动添加meta视口标签通知浏览器操作
- meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致；设备有多宽，我们布局的视口就多宽
meta视口标签
- 标准的viewport设置
  - <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

3. 二倍图

物理像素&物理像素比
- 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的，比如苹果6/7/8是750*1334
- 开发时候的1px不是一定等于1个物理像素的
  - PC端页面，1个px等于1个物理像素点，但是移动端就不尽相同
  - 在iPhone8里面，1px开发像素 = 2个物理像素
- 一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比
- Retina（视网膜屏幕）是一种显示技术，可以把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度
多倍图
- 对于一张50px*50px的图片，在手机Retina屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊
- 在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题
- 背景图片注意缩放问题
背景缩放（background-size）
- 规定背景图像的尺寸
- background-size: 背景图片宽度背景图片高度;
  - 只写一个参数，是宽度，高度省略了，会等比例缩放
  - 里面的单位可以跟%，相对于父盒子来说的
  - 单位：长度|百分比|cover|contain
  - cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域（可能显示不全）
  - contain把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域（可能有空白区域）

4. 移动端技术解决方案

CSS初始化 normalize.css
CSS3盒子模型（box-sizing）
- box-sizing: content-box;
  - 传统盒子模型：盒子的宽度=CSS中设置的width+border+padding
- box-sizing: border-box;
  - CSS3盒子模型：盒子的宽度=CSS中设置的宽度width（里面包含了border和padding）
  - CSS3中的盒子模型，padding和border不会撑大盒子了
特殊样式
- -webkit-tap-highlight-color: transparent; 清除点击高亮
- -webkit-appearance: none; 移动端浏览器默认的外观在加上这个属性才能给按钮和输入框自定义样式
- -webkit-touch-callout: none; 禁用长按页面时的弹出菜单

5. 移动端常见布局

（1）单独制作移动端页面（主流）

流式布局（百分比布局/非固定像素布局）
- 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充
- max-width/height：最大宽度/高度
- min-width/height：最小宽度/高度
flex弹性布局
- 任何一个容器都可以指定为flex布局
  - 当把父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效
- 采用flex布局的元素，称为flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"
- flex布局原理：通过给父盒子添加flex属性display: flex;，来控制子盒子的位置和排列方式
- 常见父项属性
  - flex-direction：设置主轴方向
    - 主轴与侧轴
      - 默认主轴方向就是x轴方向，水平向右
      - 默认侧轴方向就是y轴方向，水平向下
      - 我们的子元素是跟着主轴来排列的
    - row（默认值从左到右）
    - row-reverse（从右到左）
    - column（从上到下）
    - column-reverse（从下到上）
  - justify-content：设置主轴上的子元素排列方式
    - flex-start（默认值从头部开始）
    - flex-end（从尾部开始排列）
    - center（在主轴居中对齐）
    - space-around（平分剩余空间）
    - space-between（先两遍贴边再平分剩余空间）
  - flex-wrap：设置子元素是否换行
    - flex布局中，默认子元素是不换行的，如果装不开，会缩小子元素的宽度放到父元素里面
    - nowrap
    - wrap
  - align-content：设置侧轴上的子元素的排列方式（多行）
    - 只能用于子项出现换行的情况，在单行下是没有效果的
    - flex-start（默认值在侧轴的头部开始排列）
    - flex-end（在侧轴的尾部开始排列）
    - center（在侧轴中间显示）
    - space-around：子项在侧轴平分剩余空间
    - space-between：子项在侧轴先分布在两头，再平分剩余空间
    - stretch（设置子项元素高度平分父元素高度）
  - align-items：设置侧轴上的子元素排列方式（单行）
    - flex-start（从上到下）
    - flex-end（从下到上）
    - center（挤在一起居中（垂直居中））
    - stretch（拉伸默认值）
  - flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
    - flex-flow: row wrap;
- 子项常见属性
  - flex：定义子项目分配剩余空间，表示占多少份数
  - align-self：控制子项自己在侧轴上的排列方式
    - 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
    - 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
  - order：定义项目的排列顺序
    - 数值越小，排列越靠前，默认为0
less+rem+媒体查询布局
- rem基础
  - rem是一个相对单位，基准是相对于html元素的字体大小（em相对于父元素的字体大小）
  - rem的优点是可以通过修改html里面的文字大小来整体控制改变页面中元素的大小
- 媒体查询
  - @media可以针对不同的屏幕尺寸设置不同的样式
  - @media mediatype and|not|only (media feature) {}
  - mediatype 媒体类型
    - all（所有设备）
    - print（打印机和打印预览）
    - screen（电脑屏幕，平板电脑，智能手机等）
  - 媒体特性
    - width
    - min-width（包含等于）
    - max-width（包含等于）
- 引入资源
  - 直接在link中判断设备的尺寸，然后引用不同的css文件
  - <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="">
- less基础
  - less是一门CSS扩展语言，也成为CSS预处理器，扩展了CSS的动态特性
  - less变量
    - @变量名: 值;
  - less嵌套
    - 子元素样式直接写到父元素里面
    - 交集/伪类/伪元素选择器
      - 内层选择器的前面没有&，则它被解析为父选择器的后代
      - 如果有&，它就被解析为父元素自身或父元素的伪类
  - less运算
    - 任何数字、颜色或者变量都可以参与运算：+ - * /
    - 运算符的左右两侧都要加空格
    - 对于两个不同单位的值之间的运算，运算结果取第一个值的单位
混合布局

（2）响应式页面兼容移动端（其次）

媒体查询
bootstrap

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15...
n+5	从第5个开始（包含第五个）到最后
-n+5	前5个（包含第五个）

Files

css3.md

Latest commit

History

css3.md

File metadata and controls

Emmet语法——HTML

CSS3基础

一、CSS简介

1. CSS语法规范

2. CSS代码风格

3. CSS属性书写顺序

二、CSS选择器

1. 基础选择器

2. 复合选择器

三、CSS引入方式

四、字体属性

五、文本属性

六、元素显示模式

1. 块元素

2. 行内元素/内联元素

3. 行内块元素

4. 元素显示模式转换

七、背景

八、CSS的三大特性

1. 层叠性

2. 继承性

3. 优先级

九、盒子模型

1. 边框（border）

2. 内边距（padding）

3. 外边距（margin）

4. 圆角边框

5. 盒子阴影

6. 文字阴影

十、浮动

1. 什么是浮动

2. 浮动特性

3. 浮动元素经常和标准流父级搭配使用

4. 清除浮动

5. 案例

十一、定位

1. 为什么需要定位

2. 定位组成

3. 静态定位 static

4. 相对定位 relative

5. 绝对定位 absolute

6. 子绝父相

7. 固定定位 fixed

8. 粘性定位 sticky

9. 定位叠放次序 z-index

10. 定位的拓展

绝对定位的盒子居中

定位特殊特性

脱标的盒子不会触发外边距塌陷

绝对定位（固定定位）会完全压住盒子

11. 网页布局总结

十二、元素的显示与隐藏

十三、精灵图

1. 精灵图的使用

十四、字体图标 iconfont

1. 字体图标的下载

2. 字体图标的引入

3. 字体图标的追加

十五、CSS三角

十六、用户界面样式

1. 鼠标样式

2. 表单轮廓线

3. 拖拽文本域

十七、vertical-align

十八、文字溢出省略号显示

1. 单行文本溢出显示省略号

2. 多行文本溢出显示省略号

十九、常见布局技巧

1. margin负值的运用

2. 文字围绕浮动元素

3. 行内块的巧妙运用

4. css三角强化

二十、补充

1. favicon图标