HTML和CSS
web的组成：
- w3c (World Wide Web Consortium)万维网联盟
- ECMA（European Computer Manufactures Association）欧洲计算机制造商联合会
- HTML（HyperText Markup Language）超文本标记语言
- xml可拓展标记语言
- 结构：
- html（xhtml,xml） w3c
- 表现：
- css w3c
- 行为：
- js ECMA
- 结构：
- 1)站点的作用
- A/ 用来归纳一个网站上所有的网页、素材以及他们之间的联系
- B/ 规划网站的所有内容和代码 整合资源
- 2)创建站点的步骤
- 创建网页所需各个文件夹 css、js、images
- 3)文件的命名规则
- A/文件命名规则：用英文，不用中文
- B/ 名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符（@#￥%……！ -）；必须以英文字母开头。
- C/ 网站的首页必须命名为index.html不建议使用shouye.html
"en">
"UTF-8">
Document
hello world!
html基本语法
-
html可以分成两部分：
- 标签（标记/元素):在尖括号后面的第一个单词
- 属性：在标签后面，用空格隔开的那个单词
-
html文件可以分成两部分：
- head：文件的头部，一般放文件的描述性信息
- body：文件的主体，一般放文件的可见内容（结构）
-
html的标签（根据书写方式）分成两种
- 常规标签（双标签）
- <标签 属性1=" 属性1" 属性2=“属性值2 属性值3”…>内容
- 属性和属性值用等号连接，属性值用引号引起来（单双引号是一样的)
- 内容要写在开始标签和结束标签的中间
- 有的标签有多个属性，属性和属性之间用空格隔开
- 属性和属性是不分先后顺序的
- 有的属性可能有多个属性值，属性值和属性值也用空格隔开
- 内容可以是文字，也可以是其他的标签
- 空标签（单标签），只有开始，没有结束，一般不带内容
- <标签 属性1=“属性值1”>
- 除了没有内容和结束标签外，语法和常规标签一样
- 常规标签（双标签）
html常用标签
-
1.标题标签
- h1-h6
- 常规标签
- h1-h6字体大小是逐渐变小的
- h1-h6都是默认加粗，都会独占一行，默认有上下间距
- h1标签在同一个页面里面只能使用一次，它是页面的主标题
- 因为h1标签可以帮助seo优化的（搜索引擎的优化)
- h1-h6
-
2.段落文本标签
- p
- 常规标签
- 会独占一行，默认上下间距
- p
-
3.转义字符（不属于标签）
- ； 一个空格
- <； 小于号 less than
- >；大于号 greater than
- ©；
- ®；注册商标
-
- 强制换行标签
- br
- < br>空标签
- 也可以加在已经换行的地方，会增大他们之间的距离
-
5.水平分割线
- hr
- < hr>空标签
- 也可以用来强制换行
- hr
-
6.加粗标签
- < b>
- < s t r o ng >
- 常规标签
- 都能使文本倾斜，都不会独占一行
- b：为了加粗效果而加粗
- strong：为了强调语气而加粗
-
7.倾斜
- < i >
- < e m >
- 常规标签
- 都能使文本倾斜，都不会独占一行
- i：为了倾斜的效果而倾斜
- em：为了强调语气而倾斜
-
8.下划线
- < u>< /u> underline
- 常规标签,不会独占一行
-
9.删除线
- < del > delete
- < s >
常规标签
都能有删除线，都不会独占一行
-
10.上标，下标
- < sup> 上标
- < sub> 下标
常规标签， 都不会独占一行
-
11.小号字体
- small
常规标签， 都不会独占一行
- small
-
12.大号字体
- big
常规标签， 都不会独占一行
- big
-
- pre 会保留代码中的空格和换行
-
列表标签：
无序列表
< ul> unordered-list
< li> list-item
< li>
< li>
< /ul>ul,li都是常规标签，是独占一行 会自带列表符号，小黑圆点 ul有默认上下间距的-
有序列表
< ol>
< li>
< li>
< li>
会自带列表符号，默认是数字1，2，3，4
有type属性
1: 默认值
a: a,b,c…
A: A,B,C…
i: i,ii,iii…
I: I,II.III…
有start属性，从哪里开始
只能是数字 -
自定义列表
< dl>
< dt>名词
< dd>解释
- li {
list-style: none;
}
清除列表符号
-
-
图片标签：
img 单标签
< img src=“目标文件路径及全称” alt=“图片替换文本” title=“图片标题” width=“宽度” height=“高度” />
不独占一行- src: 图片的所在的位置（绝对路径/相对路径），必填
- alt: 替换文本，必填
在图片打不开（路径错误/网络差/图片损坏）时，给我们的提示文字
占据空间，帮助视觉障碍的人浏览，有利于seo优化
-
title: 图片标题
当鼠标移入并悬浮的时候，会有提示文字
title不是图片独有的，绝大部分标签都能加title -
width: 宽度
-
height: 高度
如果我们不写宽高，图片大小应该时图片的原始尺寸
如果只写宽或者只写高，会等比例的放大或者缩小
如果都写，按照写的来，会导致宽高比失调 -
超链接
< a href=“目标文件路径及全称/连接地址” title=“提示文本”>链接文本/图片
双标签
默认有字体颜色，下划线
如果要链接到其他的网址，前面必须要加协议
还可以通过相对路径，跳转到本地的其他页面- target:
_blank: 在新窗口打开
_self： 在当前窗口打开（默认值）
- target:
-
表格
table -> tr -> td< table>
< tr>
< td>内容
< td>
< td>
< tr>
< td>
< td>
< td>
< tr>
< td>
< td>
< td>
< /tr>
< /table> -
表格属性：
width: 表格的宽度
如果我们想让每一列的宽度保持一致，选择一行给每个单元格加上宽度
经验： 最好在合并最少的那一行加- height: 表格的高度
height加给tr，width加给td - border: 表格的边框
- bgcolor: 表格的背景颜色, 也适用于tr和td
- bordercolor: 边框的颜色
- align: 内容的水平对齐方式, 不能给table加
left/center/right 默认值是left - valign: 内容的垂直对齐方式 vertical, 不能给table加
top/middle/bottom 默认值是middle - cellspacing: 单元格和单元格的间距
默认是3左右， 一般都会改成0 - cellpadding: 单元格边框和内容之间的间距
默认值是0
- height: 表格的高度
-
th: 表示表格的列标题
代替第一行的td
有默认的加粗和居中效果 -
跨行合并行，跨列合并列
colspan=“所要合并的单元格的列数"合并列;
rowspan=“所要合并单元格的行数”合并行;被合并以后的单元格要删掉
-
表单
form 表单框（表单域）
作用： 获取用户信息- form的属性：
- action: 填写后端地址
- method: 请求方式
GET: 向服务端要信息，内容比较少，相对不太安全的，速度较快
POST： 向服务端发送信息，可以发送较多的内容，相对安全（做加密），速度较慢 - name: 表单的标识，告诉服务端是哪个表单发来的请求
想让里面有东西，需要加入表单控件
绝大部分的表单控件都是input标签，会根据type（input的一个属性）类型的不同区分不同的表单控件
单标签，不会独占一行 - form的属性：
button按钮的padding是往里面的
td的padding是往里面的
文本框
type: text
value: 文本框的默认值
placeholder: 当文本框没有内容时，文本框的提示文字
maxlength: 限制文本框的最大输入长度
密码框
type: password
value: 密码框的默认值
placeholder: 当密码框没有内容时，密码框的提示文字
maxlength: 限制密码框的最大输入长度
提交按钮
type: submit
value: 按钮里面的文字，默认值是“提交”
点击时，会把form表单里面的数据发送给服务端
重置按钮
type: reset
value: 按钮里面的文字，默认值是“重置”
点击时，会清空表单里面所有的内容
一定要写在form标签里面才会起作用,只会提交或者重置当前这个form里面的内容
单选框
type: radio
name: 自定义的名称，name相同的单选框会形成一组
value: 传给服务端的值
checked: 默认选中
disabled: 禁用状态
多选框（复选框）
type: checkbox
name: 自定义的名称，name相同的单选框会形成一组
value: 传给服务端的值
checked: 默认选中
disabled: 禁用状态
下拉菜单
< select>
< option value="">< /option>
< option>< /option>
< option>< /option>
< /select>
value: 传给服务端的值
selected: 下拉菜单默认选中的项
disabled: 禁用状态
多行文本框
textarea
cols: 每一行最多能放下的字符数
rows: 最多能显示多少行
按钮
button
没有默认的功能，但是可以通过js来实现各种功能
灵活性
双标签
< input type=“button”>
单标签
-
< div>< /div>
没有具体含义， 除了独占一行之外没有任何其它的默认属性，是页面布局中常用的标签；
一般可以做页面的布局，可以作为其他标签或者内容的容器 -
< span>< /span>
文本结点标签
可以是某一小段文本，或是某一个字。 它除了不换行外，没有任何其它的默认属性；
灵活性，建立在我们有好的css基础的前提下
css基础
css语法分成两部分：
选择符（装修目标）
申明块（怎么去装修）
选择符 {申明}
选择符 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3 属性值4 属性值5;
}
申明分为属性和属性值
申明放在大括号的里面
属性和属性值要用冒号连接，英文的冒号
每条申明结束用分号
一个选择符可能对应多条申明,并列写,申明和申明之间不分先后顺序
一个属性可能对应多条属性值,用空格隔开,属性值和属性值在多数情况下不分先后顺序
最后一条申明的分号是可以省略的，（不推荐）
css语句必须放在样式表的里面
-
css样式表
内部样式表
css和html在同一文件内，
css要放在< style type=“text/css”>标签的内部，style标签就是一个样式表
type是可以省略的，默认值就是text/css
style标签建议写在head标签里面的最下面
一.head描述性信息，css更贴近于描述
二.浏览器在读我们代码时的顺序是从上往下的，为了防止出现有结构但是没有样式的情况外部样式表
css语句放在单独的css文件里面，css文件的后缀.css
不需要style标签，css文件本身就是一个样式表，css文件不认识style标签
外部样式表的引入
1.
< link rel=“stylesheet” href="">
建议写在head标签里面的最下面
rel=“stylesheet”: 用于定义文档关联，表示关联样式表；
href: css文件的路径（绝对路径/相对路径）
2.
< style>
@import url(相对路径);
@和import之间不能有空格 和url关键字之间要有空格 url和括号之间不能有空格
最后的分号一定不能省略两种引入方式的区别： 差别1：本质的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。 差别2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。 差别3：兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。 差别4：使用dom(document object model文档对象模型 )控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的.内联样式表(行间样式，行内样式，嵌入式样式、内嵌样式)
将style作为标签的一个特殊的属性
把申明作为style属性的属性值
不需要写选择符，所有的申明作为一个整体 -
样式表的权重
-
三种样式表里面，内联样式表的权重是最大的
-
内部样式表和外部样式表的权重是一样的，谁写在下面就听谁的
-
不同的样式表都可能给一个元素添加样式，
-
如果添加了相同的样式，会显示权重高的，如果权重一样高，后面的覆盖前面的
如果添加了不同的样式，会全部显示
-
-
样式表的作用域
-
作用域： 作用范围
-
内部样式表的作用域是全局的
-
外部样式表的作用域是全局的
-
内联样式表的作用域是只作用在当前元素上面
-
-
选择器也叫选择符
1.元素选择符/类型选择符
直接将标签的名称作为选择器
会选中页面中所有的该元素
应用场景：
一.清除页面里某种元素的默认样式
二.批量修改页面里某种元素的样式2.id选择器
语法：
< div id=“id名”>< /div>
#id名 {申明}
类似于身份号，在一个页面里面不能重复
document.getElementById(‘box’)
锚点， label -> for属性
一般把id作为页面的外层结构取名用 英文，数字， 下划线， 连字符， 一定要用英文字母开头 见名知义 语义化： container wrap inner header nav main aside footer 功能化： news project 驼峰命名法： newsLeft newsCenter newsRight 连字符： news-left news-center news-right 下划线： news_left news_center news_right3.class选择器/类选择器
语法：
< div class=“class名”>< /div>
.class名 {申明}
灵活
一个class名对应多个元素，一个标签对应多个class名4.通配符
语法:
* {申明}
会把页面里面所有的元素都加上相同的样式
应用场景：
一.清除页面里全部元素的默认样式
二.批量修改页面里全部元素的样式5.群组选择器
语法：
选择器1, 选择器2, … {
申明
}
将选择器1，选择器2等等都加上相同的样式
这里的选择器可以是类型选择器/id选择器/class选择器6.包含选择器（后代选择器）
语法：
选择器1 选择器2 {
申明
}
给选择器2加上范围（选择器1）7.子选择器
语法：
选择器1>选择器2 {
申明
}
只给选择器1下面的第一代子选择器（是选择器2）加上样式
样式给选择器2加的
8.伪类选择器：
语法：
a:link{属性：属性值;}超链接的初始状态;
a:visited{属性：属性值;}超链接被访问后的状态;
a:hover{属性：属性值;}鼠标悬停，即鼠标划过超链接时的状态;
a:active{属性：属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态;四种状态不一定要同时存在
如果要一起存在，要按照一定的顺序书写
link - visited - hover - active
love - hate伪类不一定只能给a标签使用
也能给其他标签用
但是比如说div，只能使用hover和active
伪类选择器配合度最高的是超链接:hover只能改变自身或者子元素
不能改变兄弟元素和父元素 -
选择符权重
** 内联样式的权重 > id选择符的权重 > class选择符权重 > 类型选择符的权重 **
1000 100 10 1伪类选择符的权重跟class选择符相同 *包含选择符，子选择器 是每一级选择器的权重之和 #wrap .item { 权重110 } .wrap .item span { 权重21 }
浮动
float
left right none(不浮动)
作用：
让竖着排的元素横着排
特点：
会半脱离文档流，不占据空间
如果想让元素从左往右排，需要让所有需要横着排的元素都加上浮动
如果浮动的子元素的宽度总和超过了父元素，超过的那个元素会另起一行
利用半脱离文档流
图文环绕效果
文本属性
1.文本字体大小
font-size: value;
默认文字大小是16px
一般来说文字大小设置成偶数
最小值认为是12px
pt: 9pt=12px; 印刷行业
em: 相对于父元素的字体大小的倍数
除了做字体大小的单位以外，还能作为其他的单位（宽高）
如果自身有确定的字体大小，那么em对应自身元素的字体大小，如果没有，根据父元素的字体大小
2.文本字体
font-family: 字体;
如果字体的名称是中文， 或者字体的名称是多个英文单词， 那么就要加上引号
如果是单个英文单词，不需要加引号
浏览器首先会寻找字体1、如存在就使用改字体来显示内容，如在字体1不存在的情况下，则会寻找字体2，如字体2也不存在，按字体3显示内容，如果字体3 也不存在；则按系统默认字体显示；
Windows中文版本操作系统下，中文默认字体为微软雅黑，英文字体默认为Arial.
3.文本颜色
color: 颜色;
英文单词
#加六位数字： #000000;
前两位代表红色，中间两位代表绿色，后面两位代表蓝色
十六进制
0，1，2，3，4，5，6，7，8，9，a,b,c,d,e,f
#ff0000, #00ff00, #0000ff, #ffff00
#34f161,哪个值最大就更接近哪个颜色
范围是 00-ff
如果说前两位的值相等，中间两位的值相等，后面两位的值相等
比如#3355aa,可以简写成#35a, #ffffff简写成#fff
#888888六个值都相等是灰色
rgb(255, 0, 0)
red, green, blue
范围是 0-255
rgba(255, 0, 0, 0.55)
a代表透明度，范围 [0, 1]
4.文本加粗
font-weight:
bold(加粗) /
bolder(更粗) /
normal(常规)
bold和bolder理论上是粗和更粗，但是实际中两者差不多
100-900 没有单位的
100-900理论最细到最粗，但是100-400都是变细， 500相当于normal， 600-900都是加粗
能用css的情况下，尽量用css
5.文本倾斜
font-style:
italic
oblique
normal（取消倾斜，常规显示）;
italic: 斜体字（倾斜的字体）
oblique: 倾斜的文字（是浏览器把它变成斜的） √
6.水平对齐方式
text-align:
left: 左对齐(默认值)
center: 居中对齐
right: 右对齐
justify: 两端对齐
如果不换行的情况下，跟left效果一致，
如果换行，自动调整字间距，最后一个字会在容器的最右边
text-align: 调整文本(图片)的水平对齐方式
margin: 0 auto; 调整元素在父容器的水平对齐方式
7.垂直对齐方式
vertical-align:
top: 顶端对齐
middle: 中线对齐
bottom： 底线对齐
baseline： 基线对齐（默认值）
有一些前提条件：需要有元素进行对比，需要行内块元素进行对比（参照物）
8.行高
line-height: value;
如果想让垂直方向居中，可以设置行高等于容器的高度
value 可以是具体的像素，也可以是百分比，也可以是数字
百分比： 不是容器高度的百分比，而是字体大小的百分比
数字：指的是字体大小的倍数
只能给文字加
9.文本修饰
text-decoration
none: 不修饰
overline: 上划线
underline: 下划线
line-through: 删除线
修饰线的颜色跟文本颜色相同
10.首行缩进
text-indent: value;
首行缩进只能缩进首行
em很多时候配合text-indent效果更佳
允许负数（隐藏文字）
11.切换英文字母大小写
text-transform
none无转换
capitalize首字母大写
uppercase全都大写
lowercase全都小写
12.字间距
letter-spacing: value;
13.词间距
word-spacing: value;
14.文字属性简写：font:bolder italic 12px/1.5em “宋体”; 简写时，字体和字号是必备
font属性的简写：字号，行高，字体 说明:font的属性值应按以下次序书写(各个属性之间用空格隔开) 顺序: font-style font-weight font-size / line-height font-family
(1)简写时 , font-size和line-height只能通过斜杠/组成一个值，不能分开写。
(2) 这种简写法只有在同时指定font-size和font-family属性时才一起作用,如果你没有设定font-weight , font-style , 他们会使用缺省值。
无论从易读还是易写的角度考虑，一般不推荐简写
文本属性都具有继承性
如果英文字母很长的情况下，又没有空格，浏览器会认为是一个单词，不会自动换行
数字也是
网址也是
背景属性
background
背景属性是一个复合属性
background-color: 背景颜色
颜色的用法跟文本颜色相同
background-image: url();
url()里面是放图片的路径
![]()
: 是会占据空间的
background-image： 不会占据空间的
background-repeat: 背景图平铺
repeat: 平铺（默认值）
no-repeat: 不平铺
repeat-x: 水平平铺
repeat-y： 垂直平铺
background-position: 水平方向的位置 垂直方向的位置;
关键字/具体的像素/百分比
水平位置： left/center/right
垂直位置: top/center/bottom
如果两个值都是center,那么可以简写成一个center
具体的像素： 第一个参数代表背景图离容器左边的距离，
第二个参数代表背景图离容器上面的距离
如果省略第二个参数，垂直方向居中
百分比
背景图位置支持负数的，可以超出容器范围，但是超出部分不可见
要分先后顺序
缩写时，background-position的两个值不能分开，还不能换位置
如果出现单独的属性，需要把它放在缩写的后面
多背景图时，用逗号隔开
如果还要有背景颜色，背景颜色单独写，放在缩写的后面
写在最后一张背景图那里
背景图的固定
background-attachment:
fixed固定；
scroll滚动;
如果用了background-attachment:fixed;
那么它的背景图定位不再是容器的左上角，而是窗口的左上角
显示出来的图片是原图和容器交叉的部分
网页上常用的图片格式
1）jpg :有损压缩格式，靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 )
2）gif：无损压缩格式，支持透明，支持动画，适用于颜色数量较少的图像;
3）png:无损压缩格式，支持透明，不支持动画，(是fireworks的 源文件格式)，适用于颜色数量较少的图像;
边框属性：
border
复合属性
border-color: 边框颜色
英文/#ffffff/rgb()
默认值是和文字颜色相同
border-width: 边框宽度
value + px
默认值是2.4px
border-style: 边框样式
solid 实线
dashed 虚线
dotted 点状线
double 双实线
none 不要线
默认值是none
单一方向加边框
border-top: 5px solid red;
border-bottom: 5px solid red;
border-left: 5px solid red;
border-right: 5px solid red;
多个参数
一个参数： 上下左右
两个参数： 上下 左右
三个参数： 上 左右 下
四个参数： 上 右 下 左
border最多只能有三个参数，多个参数要写在分开的属性里
1.定义列表符号的样式
可以给ul加，也可以给li加（继承性）
颜色跟字体颜色相同
list-style-type:
disc(实心圆) 默认值
circle(空心圆)
square(实心方块)
none(去掉列表符号)
一般不用浏览器自带的列表符号
所以设置 list-style-type: none;
如果设置 list-style-type: none; 那么可以简写成 list-style: none;
2.使用图片作为列表符号
list-style-image: url();
一般也不用
3.列表符号的位置
list-style-position: outside/inside
使用图片作为列表符号
背景图（给li加）
1.先把li的默认列表符号去掉，给li设置背景图
2.不要平铺
3.用首行缩进留出位置
4.调整背景图的位置
带有时间的列表
1.在li标签嵌套两个标签，比如p，span
2.让p标签左浮动，span标签右浮动
3.设置li的高度和行高，让文字上下居中
4.去掉自带的列表符号
5.用背景图代替列表符号
6.让p标签首行缩进
css特征
层叠性：一个元素可能同时被多个css选择器选中，每个选择器都有一些css规则，这就是层叠。
CSS的处理原则是：
1）如果多个选择器定义的规则不发生冲突，则元素将应用所有选择器定义的样式。
2）如果多个选择器定义的规则发生了冲突，则CSS按选择器的特殊性(权重)让元素应用特殊性(权重)高的选择器定义的样式。
-
继承：所谓继承，就是父元素的规则也会适用于子元素。比如给body设置为color:Red;那么他内部的元素如果没有其他的规则设置，也都会变成红色。继承得来的规则没有特殊性。
CSS的继承贯穿整个CSS设计的始终，每个标记都遵循着CSS继承的概念。可以利用这种巧妙的继承关系，大大缩减代码的编写量，并提高可读性，尤其在页面内容很多且关系复杂的情况下。文本属性和列表属性可以被继承，但是呢其他属性不能被继承
a标签不能继承父元素的颜色，因为自身有默认的颜色，把继承下来的颜色给覆盖了
inherit属性值是继承的意思，主动继承（inherit属性值在大多数的属性中都能用）
unset属性值是不设置的意思，在大多数的属性中都能用有默认样式的标签，不再继承，用自身的默认样式
盒模型：
盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系
css定义所有的元素都可以拥有像盒子一样的外形和平面空间.
padding(内间距)
调整子元素在父元素里面的位置关系,给父元素加的
padding会撑大盒子原先的大小,
border也会撑大盒子原先的大小
如果不想撑大父元素，在父元素的宽高上减去对应的padding值和border值
单一方向加padding
padding-top
padding-bottom
padding-left
padding-right
padding也可以加多参数
一个参数： 上下左右
两个参数： 上下 左右
三个参数： 上 左右 下
四个参数： 上 右 下 左
margin(外间距)
调整的是元素和其他元素之间的位置关系
margin不会撑开盒子的大小
单一方向加margin
margin-top
margin-bottom
margin-left
margin-right
margin也可以加多参数
一个参数： 上下左右
两个参数： 上下 左右
三个参数： 上 左右 下
四个参数： 上 右 下 左
margin可以取负数，
元素会重叠
如果两个相邻的元素，上面一个元素有margin-bottom,下面一个元素有
margin-top
那么这两个元素的外间距会重叠
如果两个值是同号，真实的外间距是取绝对值大的那个值，
如果是异号，真实的外间距是两个值相加
如果一个父元素里面的第一个子元素添加了margin-top,那么它会把父元素一起带下来
如果第一个子元素有浮动，或者定位，不会带下来的
解决： 给父元素overflow: hidden;
给添加了overflow: hidden;的元素形成了BFC（块级格式化上下文），
与外部的元素毫不相干
margin: 0 auto;
auto: 占据剩余空间
margin: 0 auto;
左右都为auto，左右将剩余的空间平分
默认情况下，auto只对水平方向生效
省略号
显示省略号
0.容器要有宽度
1.不能让文本换行
white-space: nowrap;
2.溢出部分隐藏
overflow: hidden;
3.显示省略号
text-overflow: ellipsis;
空余空间
white-space
white-space：normal/nowrap/pre/pre-wrap /pre-line /inherit 该属性用来设置如何处理元素内的空白；
normal：默认值，空白会被浏览器忽略，回车会被忽略，默认换行
nowrap:文本不会换行，文本会在同一行上继续，直到遇到
标签为止；
pre：空白会被浏览器保留，其行为方式类似HTML中的pre标签；
pre-wrap：保留空白符序列，但是正常的进行换行；
pre-line:合并空白符序列，但是保留换行符；
inherit：规定应该遵从父元素继承White-space属性的值；
溢出属性
overflow
overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;
visible:默认值，溢出内容会显示在元素之外；
hidden：溢出内容隐藏；
scroll：滚动，溢出内容以滚动方式显示;
auto：如果有溢出会添加滚动条，没有溢出正常显示;
inherit：规定应该遵从父元素继承overflow属性的值。
overflow-x:X轴溢出； overflow-y:Y轴溢出
省略号显示
text-overflow:clip/ellipsis ;
clip：不显示省略号（...）;
ellipsis：显示省略标记；
多行省略号
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
chrome/safiri/firefox webkit内核的
元素类型
元素的显示类型的分类：
1.块状元素
会独占一行，从上往下排
可以直接添加宽高
一般是矩形，可以作为其他元素或者内容的容器
div, p, h1-h6, ul, li, ol, dl, dt, dd, table, hr
2.行内元素
不会独占一行，从左往右排
不能直接添加宽高
矩形，一般作为其他元素的内容
符合盒模型的特点，但是margin-top/margin-bottom/padding-top/padding-bottom不能正常显示
span, a, i ,em, b, strong, u, s, del, sup, sub, br,img
行内块元素
可以添加宽高的行内元素
input, select, textarea…
3.可变元素
会根据上下文环境决定自己是哪种类型的元素
button
元素类型的转换
display 设置或者检索元素的类型
block/inline/inline-block（img,input）/none/list-item(li)/table(table)/table-cell(td)/table-header-group(thead)/table-footer-group(tfoot) 等
block: 它是大多数块状元素的默认值
可以将元素转成块级元素
li 的默认值是 list-item
table 的默认值是 table
tr 的默认值是 table-row
td 的默认值是 table-cell
inline: 它是行内元素的默认值
可以将元素转成行内元素
inline-block: 它是行内块元素的默认值
可以将元素转成行内块元素
img 的默认值 inline
在浏览器上显示的默认值是inline，实际上完全符合行内块元素的特点
input 的默认值 inline-block
none: 它是隐藏元素,不占空间
- 浮动时元素的类型
-
浮动的元素，会自动转成块级元素，可以直接添加宽高
-
定位的元素，弹性盒的元素也都会直接转成块级元素
-
置换元素
置换元素/替换元素
-
概念：一个内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，这些元素往往没有实际的内容，即是一个空元素,置换元素就是浏览器根据元素的属性和属性值，来决定元素的具体显示内容。被称之为置换元素。HTML中的img、input都是置换元素。
例如浏览器会根据img标签的src属性的值来读取图片信息并显示出来。 又例如根据input标签的type属性来决定是显示输入框，还是单选按钮等。 非置换元素/不可置换元素
：HTML中除了可替换元素外，其它都是不可替换元素（即其内容直接表现给用户端例如浏览器）图片是置换元素，置换元素会有一个隐形的框，会将置换元素的内容填充到框的里面
宽和高是可以改变这个框的大小的
vertical-align
vertical-align:
top： 顶线对齐
middle： 中线对齐
bottom： 底线对齐
baseline： 基线对齐（默认值）
前提条件：
两个元素之间的相对的位置关系
两个行内块元素 或者 行内块元素和文字
实现图片的水平垂直居中
1.水平居中 给父元素加text-align: center;
2.在紧挨着图片的地方加一个空的span标签
3.给span标签设置100%的高度,并设置display: inline-block;
4.给图片加vertical-align: middle;
5.给span也加vertical-align: middle;
定位
定位：
三要素：
目标
参照物
坐标
position
static: 默认值，不进行定位
absolute: 绝对定位
脱离文档流，不占据空间
参照物： 离它最近的且带有定位的父元素,
如果一直没有，参照物就是html根元素
可以通过top/left/right/bottom四个值来确定定位的坐标
top: 目标的上边离参照物上边的距离
left: 目标的左边离参照物左边的距离
right: 目标的右边离参照物右边的距离
bottom: 目标的下边离参照物下边的距离
relative: 相对定位
不会脱离文档流，占据空间，占据的是原先的空间
参照物： 元素本身
可以通过top/left/right/bottom四个值来确定定位的坐标
fixed: 固定定位
脱离文档流，不占据空间
参照物： 浏览器窗口
可以通过top/left/right/bottom四个值来确定定位的坐标
sticky: 粘性定位
当这个元素没有移出页面时，相当于相对定位
当这个元素要移出页面时，相当于固定定位
一般情况下只需要用top来确定坐标
z-index 定位层级
z-index: 整数; 可以是负数
定位的元素才有定位层级
加了负数之后，它会在所有元素的后面，包括没有定位的元素
默认值： auto, 效果跟0一样
包含块
包含块是绝对定位的基础，包含块就是为绝对定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比 长度的参考；
默认状态下，html是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含元素块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。
定义元素为包含块：给绝对定位元素的父元素添加声明position：relative；
如果我们的父素设置了position:absolute;那么子元素也会相对父元素来定义自己的位置。
绝对和相对定位的区别
1、参照物不同，绝对定位（absolute）的参照物是包含块（父级），相对定位的参照物是元素本身位置；
2、绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。
定位拓展
1.参照物不仅提供偏移起点，还提供百分比长度
2.如果宽高没有设置，可以通过left/right/top/bottom来设置宽高
3.定位的元素的display 会自动转成块状元素
4.元素的水平垂直居中
一 具体的坐标
position: absolute;
top: 100px;
left: 200px;
算，必须知道父元素和子元素的宽高
二 top和left50%,再回来自身宽高的一半
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
要知道子元素的宽高
三 top/bottom/left/right 全部设置成0， margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
子元素必须有宽高
margin-top/margin-bottom/margin-left/margin-right
如果用百分比
全部都是对应父元素的宽度
锚点
锚点： 在同一页面内的不同位置进行跳转
锚点链接语法：
1)给元素定义命名锚记名
语法：<标记 id=“命名锚记名”>
2)命名锚记连接
语法：< a href="#命名锚记名称">链接文本或图片< /a>
图片的下面存在三像素的白边
解决：
将图片转成块状元素
display: block;
改变图片的垂直对齐方式
vertical-align: top/bottom/middle;
图片的右边存在大约3像素的白边
解决：
编辑器里面图片不换行
给图片加浮动
float: left;
img横向的间距
写在同一行
加浮动
父元素的font-size设置成0
透明
opacity: [0, 1]
跟rgba()的区别
rgba()是给颜色加的透明度
只会影响颜色本身
opacity是给元素加的透明度
会影响它所有子元素
兼容
IE9以下浏览器写法：filter:alpha(opacity=value);取值范围 0-100
兼容其他浏览器写法：opacity:0.5; (value的取值范围0-1 0.1,0.2,0.3-----0.9—1)
rgba(255,255,0,0.5)(最后一位值表示透明，取值范围0-1) 只支持IE8以上的浏览器
flash
1、插入flash
1）语法：
< object>
< embed width=“value” height=“value” wmode=“transparent” src=“flash路径及全称”>< /embed>
< /object>
2）将flash背景设置为透明
< embed wmode=“transparent” />
给< embed>标记添加属性：wmode=“transparent”
说明：flash源文件格式.fla,
导出影片为.swf,
创建播放器格式为.exe.
3）IE中不显示flash,可做如下操作：
A.下载安装flash player;
B.打开IE浏览器，选择工具菜单–Internet选项----安全----低。
滚动字幕
图片整合
图片整合用到的核心属性
background-position
图片整合的优势
减少服务器的请求次数
减小图片的体积
-------》 加快网页的渲染速度
图片整合的别名
css精灵， 精灵图， 雪碧图， css Sprite
注意点
1.最好竖着
只需要y轴坐标，尽量小图标的右侧空出来（尤其是列表符号的图标）
2.合理的上下间距
3.类似的小图标放在一起
不是一个页面只能使用一张雪碧图
4.要用透明背景
png,gif
5.最好有网格线
方便我们得到position的值
自适应
-
宽度自适应
块状元素，的宽度不设置，或者设置成100%的时候，那么它的宽度和父元素相同
有些时候，不设置比设置100%更好
宽度是不能继承的
浮动元素，定位元素（虽然是块状元素），但是宽度不是和父元素相同，而是由内容撑开
-
高度自适应1:
元素的高度不设置，或者设置为auto，那么它的高度就由子元素撑开
需求：
没有内容的时候，希望有一个最小的高度
内容多的时候，又能由内容撑开min-height
min-height在ie6里面不支持，ie6里面的height相当于是min-height在属性前面加上_,只有ie6能识别这条属性
在属性前面加上*,只有ie6和ie7能识别这条属性
div {
min-height: 200px;
_height: 200px;
}!important 把属性的权重调到最大
在ie6中不识别
div {
min-height: 200px;
height: auto!important;
height: 200px;
}
更推荐 -
高度自适应2
元素的高度设置成100%的时候，它的高度由父元素决定
如果做的是全屏页面，首先要将html和body的高度设置成100%
-
高度塌陷
父元素没有高度，或者只设置最小高度，子元素浮动
解决高度塌陷：1.给高度塌陷的元素添加 overflow: hidden; 形成BFC，会形成一个独立的空间，在计算空间的高度时，浮动元素也会参与计算 弊端：溢出隐藏，隐藏掉元素外的内容 2.在高度塌陷的元素的里面的最下面添加一个空的div 给空的div添加一条属性 clear: both; clear: 清除浮动(闭合浮动) left: 清除左浮动 right： 清除右浮动 both： 清除两侧浮动 弊端： 添加空元素，页面里会出现很多的无用元素，导致代码冗余 3.万能清除法 div::after { content: '.'; display: block; height: 0; overflow: hidden; visibility: hidden; clear: both; }
visible
visibility: hidden;和display: none;同样是做元素隐藏的
visibility: hidden;隐藏的元素依旧占据空间
display: none;隐藏的元素不再占据空间
跟opacity： 0；效果类似
伪元素
伪元素（伪对象）： 用css的方式在页面里面生成内容（结构）
伪元素只能给块状元素加，加出来的伪元素默认是行内元素
伪元素是可以用两个冒号的，也可以用一个冒号
用两个冒号为了区分伪类（推荐）
::after 在元素的后面
::before 在元素的前面
::after和::before一定要配合content属性一起使用
::first-line 第一行
::first-letter 第一个字
::selection 被用户选中时的样式,只能改变字体颜色和背景颜色
::placeholder input里面placeholder的样式
vw，vh
1vw: 相当于浏览器窗口宽度的1%
1vh：相当于浏览器高度的1%
calc()
calc() css计算的功能函数，四则运算
运算符的前后都要加空格
布局
圣杯布局
中间部分写在最前面
三部分同时加浮动
父元素加padding-left和padding-right
左边部分加
margin-left: -100%;
position: relative;
left: -150px;
右边部分加
margin-right: -200px;
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.wrap {
height: 100%;
background: thistle;
margin: 0 auto;
padding-left: 150px;
padding-right: 200px;
}
.center,.left,.right {
float: left;
}
.center {
width: 100%;
height: 400px;
background: tomato;
}
.left {
width: 150px;
height: 400px;
background: violet;
margin-left: -100%;
position: relative;
left: -150px;
}
.right {
width: 200px;
height: 400px;
background: yellowgreen;
/* margin-right: -200px; */
}
</style>
</head>
<body>
<div class="wrap">
<div class="center">
中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
</body>
</html>
双飞翼布局
中间的写在最上面
中间的元素需要用容器套一层
<style>
.wrap {
width: 800px;
height: 500px;
background: lightsalmon;
}
.centerBox {
float: left;
width: 100%;
height: 400px;
}
.center {
margin-left: 150px;
margin-right: 200px;
height: 100%;
background: lightseagreen;
}
.left {
float: left;
width: 150px;
height: 400px;
background: lightskyblue;
margin-left: -100%;
}
.right {
float: left;
width: 200px;
height: 400px;
background: lightgreen;
margin-left: -200px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="centerBox">
<div class="center">中</div>
</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
</body>
</html>
表单补充
form
action method name
input
text 文本框
password 密码框
submit 提交按钮
reset 重置按钮
radio 单选框
checkbox 多选框
button 按钮
select -> option 下拉菜单
textarea 多行文本框
button 按钮
1.表单字段集
< filedset>< /filedset>
相当于就是一个方框，对表单里面的控件进行分组，可以包含控件和其他的内容
可以嵌套
2.字段集标题标签
< legend align=“left/center/right/justify”>< /legend>
可以在表单字段集里面创建一个标题，legend必须放在filedset的里面的第一个元素
3.提示信息标签
< label>
for属性可以用来绑定对应的表单控件
for的属性值要和需要绑定的表单控件的id值相同
表格补充
table -> tr -> td
width
height
border
bgcolor
bordercolor
align
valign
cellspacing
cellpadding
rowspan
colspan
1.合并单元格的边框
border-collapse:
separate: 不合并单元格边框（默认值）
collapse: 合并单元格边框
必须给table加
2.单元格间距
border-spacing: value;
必须给table加
如果表格添加了border-collapse:collapse；那么border-spacing将无效
3.无内容时单元格的隐藏和显示
empty-cells:
show: 显示
hide: 不显示
4.表格的布局算法
table-layout:
auto: 内容越多，分配到的宽度就越大 （默认值）
fixed: 表格的宽度固定，宽度不会因为内容的多少发生改变
给table加
auto: 灵活，渲染慢
fixed: 不灵活，速度快
5.表格标题
< caption>< /caption>
要放在table里面的第一个标签
caption-side: top/bottom/right/left
left和right只有在火狐浏览器生效
6.表格列标题
< th>
要放在tr里面，代替td
加粗，居中
7.数据行分组
< thead>< /thead> 表头
< tbody>< /tbody> 表体
< tfoot>< /tfoot> 表尾
tbody是一定要有的，就算不写，浏览器也会自动加上
tbody可以有多个
thead和tfoot可以省略
8.数据列分组
< colgroup span=“3”>< /colgroup>
写在table里面的最上面
9.分隔线
rules=“groups/rows/cols/all/none”
给table加
groups: 添加位于行分组和列分组之间的分隔线， 颜色跟table的边框相同
rows: 添加位于每行之间的分隔线
cols： 添加位于每列之间的分隔线
all： 添加每个单元格之间的分隔线
两栏布局
1.用calc
2.类似于圣杯布局的写法
3.用BFC的方式
（BFC不会和浮动元素相重叠）
BFC
BFC: block formatting context (块状格式化上下文)
BFC是一个独立的空间，只有块状元素参与
它还规定了内部的块状元素如何布局，并且与这个容器外面的元素毫不相干
怎么样能触发BFC
1.html根元素本身就是BFC
2.float不为none的时候
3.position的值为absolute或者fixed的时候
4.display的值是inline-block，table-cell，flex，inline-flex等的时候
5.overflow的值不为visible
BFC的布局规则
1.BFC内部的box垂直方向从上到下排列
2.内部盒子的垂直方向的间距由margin决定，在同一个BFC内部的两个相邻元素的margin会重叠
3.内部的盒子的margin-left和父元素的border-left相接触
4.BFC的区域不会和浮动区域相重叠
5.BFC和区域外的元素毫不相干
6.在计算BFC高度的时候，浮动元素也会参与计算
margin-bottom
第一个子元素如果有margin-top,会把父元素带下来
最后一个子元素如果有margin-bottom,不会撑开父元素的高度
解决：
触发BFC， overflow: hidden;
BFC三栏布局
<style>
.left {
width: 200px;
height: 500px;
background: brown;
float: left;
}
.center {
/* width: 100%; */
height: 500px;
background: cadetblue;
overflow: hidden;
}
.right {
width: 250px;
height: 500px;
background: blueviolet;
float: right;
}
</style>
</head>
<body>
<div class="left">左</div>
<div class="right">右</div>
<div class="center">中</div>
</body>
线性渐变
线性渐变
background-image: linear-gradient(to direction, color-stop1, color-stop2, …);
direction: 方向， 要带to关键字
可以省略的， 默认向下 to bottom
对角线渐变：
background-image: linear-gradient(to top right, red, yellow, green);
两个方向值可以换位置
角度渐变
deg 角度单位
background-image: linear-gradient(0deg, red, yellow, green);
角度增大时，分隔线顺时针旋转
默认值是180deg
不均匀渐变
background-image: linear-gradient(to right, red 20%, yellow 40%, green 100%);
颜色突变
background-image: linear-gradient(to right, red 50%, green 50%);
重复渐变
background-image: repeating-linear-gradient(to right, red 20%, green 40%);
background-repeat,
background-position,
background-size,
多背景
径向渐变
径向渐变不同于线性渐变，线性渐变是从“一个方向”向“另一个方向”的颜色渐变，而径向渐变是从“一个点”向四周的颜色渐变
语法：
background: radial-gradient(shape size at center, start-color, ..., last-color);
说明：
center：渐变起点的位置，可以为百分比，默认是图形的正中心。
需要有at关键字, 可以省略
第一个参数表示横坐标，第二个参数表示纵坐标
可以是像素，也可以是百分比，也可以是关键字（left/center/right...）
shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显 示一样。可以省略
size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边；
farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角
可以省略, 默认值是最远角farthest-corner
不均匀渐变：
background-image: radial-gradient(circle farthest-corner at 30% 80%, blue 10%, yellow 20%, green 100%);
突变：
background-image: radial-gradient(circle, red 0%, red 30%, white 30%, white 100%);
重复渐变：
background-image: repeating-radial-gradient(circle, red 0%, red 30%, white 30%, white 100%);
过渡
transition
css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值
一般加在默认的样式上
transition-property：检索或设置对象中的参与过渡的属性
不必填，默认值是all，
如果有多个属性要参与过渡，那么用逗号隔开
像width，height，color，font-size，background，opacity等等都是可以参与过渡的，
但是display:none;和visibility：hidden；不能参与过渡的
transition-duration：检索或设置对象过渡的持续时间
必填， 可以用s， 也可以用 ms
transition-delay：检索或设置对象延迟过渡的时间
不必填， 可以用s， 也可以用 ms
默认是0
transition-timing-function：检索或设置对象中过渡的动画类型
不必填， 默认值是ease
linear: 匀速运动
ease: 先加速后减速
ease-in: 加速
ease-out: 减速
ease-in-out: 先加速后减速
cubic-bezier(): 贝塞尔曲线
2D转换
transform
translate()平移
scale（）缩放
rotate（）旋转
skew（）倾斜
translate() 表示平移的功能函数
将元素向指定的方向移动，类似于position中的relative，占据之前的空间
支持写两个参数，第一个参数表示水平方向的平移量，正数往右负数往左
第二个参数表示垂直方向的平移量，正数往下，负数往上
如果只写一个参数，会默认第二个参数为0
translateX(x)
translateY(y)
元素的水平垂直居中
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
transform用百分比代表的是元素自身的比例
scale()表示缩放的元素
scaleX()
scaleY()
rotate()表示旋转的功能函数
rotate()跟 rotateZ()是一样的效果
rotate() 正角度是顺时针，负角度是逆时针
rotateX()正角度是上面部分向后，负角度是上面部分向前
rotateY()正角度是右边部分向后，负角度是右边部分向前
让轴的正方向朝向自己，正角度是顺时针
skew()表示倾斜的功能函数
transform-origin变形原点
两个参数，第一个参数表示水平位置，第二个参数表示垂直位置
支持像素，支持百分比，关键字
变形原点可以在元素的外部
scale() rotate() skew()
只有translate()不支持
CSS3中的3D变换主要包括以下几种功能函数：
3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数；
3D旋转：CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数；
3D缩放：CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数；
3D平移
生活中的3d 区别于2d的地方
近大远小 景深
程序中实现的方法 perspective 元素距离 视线的距离（物体和眼睛的距离越小，近大远小的效果越明显）
perspective: 1200px;（在父元素中使用）
transform:perspective(1200px) （在子元素中使用）
两个都设置会发生冲突，建议只设置父元素，通常的数值在900-1200之间
如果当你的视线距离物体足够远的时候，基本上就不会有近大远小的感觉
perspective-origin;
观察3d元素的（位置）角度 perspective-origin：center center （中心）
perspective-origin：left top （左上角）
perspective-origin：100% 100% （右下角）
transform-style属性
transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat和preserve-3d
能让元素形成一个3d的舞台
translate3d(x, y, z)
第三个参数z不能用百分比
translateZ() 不能用百分比
3D旋转
在三维变形中，我们可以让元素在任何轴旋转。为此，CSS3新增三个旋转函数：rotateX()、rotateY()、rotateZ()和rotate3d(x,y,z,a)。
rotateX(a)
rotateX()函数指定一个元素围绕X轴旋转，旋转的量被定义为指定的角度；如果值为正值，元素围绕X轴顺时针旋转；反之，如果值为负值，元素围绕X轴逆时针旋转。
rotateY(a)
rotateY()函数指定一个元素围绕Y轴旋转，旋转的量被定义为指定的角度；如果值为正值，元素围绕Y轴顺时针旋转；反之，如果值为负值，元素围绕Y轴逆时针旋转。
rotateZ(a)
rotateZ()函数和其他两个函数功能一样的，区别在于rotateZ()函数指定一个元素围绕Z轴旋转。
rotate3d(x,y,z,a)
x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。
不建议写
rotate() 相当于 rotateZ()
3D缩放
CSS3
3D变形中的缩放主要有scaleZ()和scale3d()两种函数，当scale3d()中X轴和Y轴同时为1，即scale3d(1,1,sz)，其效果等同于scaleZ(sz)。通过使用3D缩放函数，可以让元素在Z轴上按比例缩放。默认值为１，当值大于１时，元素放大，反之小于１大于0.01时，元素缩小
scale3d(sx,sy,sz)
sx：横向缩放比例；
sy：纵向缩放比例；
sz：Z轴缩放比例；
scaleZ(s)
s：指定元素每个点在Z轴的比例。
css3动画
animation
animation和transition的区别
相同点：
都是随着时间改变元素的属性值。
不同点：
transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性；
而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值。
transition只能从一个状态到另外一个状态，只能是一次
animation中间可以有很多个状态，次数可以自定义的，可以是无限次
keyframes
动画关键帧
@keyframes mymove{
from{
初始状态属性
}
to{
结束状态属性
}
}中间再可以添加关键帧）
@keyframes mymove{
0%{初始状态属性}
100%{结束状态属性}
}（中间再可以添加关键帧）
animation是一个复合属性
1.animation-name 检索或设置对象所应用的动画名称
必须与规则@keyframes配合使用，eg:@keyframes mymove{} animation-name:mymove
必填
2.animation-duration 检索或设置对象动画的持续时间
可以是s，也可以是ms，
必填
3.animation-timing-function 检索或设置对象动画的过渡类型
不是整一段动画的类型，是每一小段的动画类型
linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start: 会跳过中间的过程，只显示关键帧的效果
可以用来实现逐帧动画
不必填，默认值是ease
4.animation-delay 检索或设置对象动画延迟的时间
可以是s，也可以是ms，
不必填，默认值是0s
整一段动画一开始的延迟，而不是每一小段的延迟
5.animation-iteration-count 检索或设置对象动画的循环次数
数字, infinite
不必填，默认是1
6.animation-direction 检索或设置对象动画在循环中是否反向运动
说明：
normal：正常方向
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行
7.animation-play-state 检索或设置对象动画的状态
running: 运动
paused: 暂停
在3D里面，如果既要平移又要旋转，
一般是先平移，后旋转，因为旋转会改变轴方向
Backface-visibility
Backface-visibility:visible;可见
Backface-visibility:hidden;不可见
说明：定义当元素不面向屏幕时是否可见。
如果在旋转元素不希望看到其背面时，该属性很有用。
HTML5发展史
HTML5的前身宣称Web应用程序1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队
。HTML 5的第一部分正式宣布已于2008年1月22日公布。HTML5仍处于完善之中。然而，大部分现代浏览器已经有了某些HTML5支持。？。
2012年12月17日，全球联盟（W3C）正式宣布凝结取代了网络工作者心血的HTML5规范已经正式定稿。根据W3C的补充稿称：“ HTML5是开放的Web网络平台的奠基石。”？
2013年5月6日，HTML 5.1正式发布公布。该规范定义了第五次重大版本，第一次要修订的核心语言：超文本标记语言（HTML）。在这个版本中，新功能不断推出，
本次摘要的发布，从2012年12月27日至今，进行了超过近百项的修改，包括HTML和XHTML的标签，，，以帮助Web应用程序的作者，努力提高新元素互操作性。 相关的API，Canvas等，同时HTML5的图像img标签以及svg也进行了改进，性能得到进一步提升。
HTML5的浏览器兼容
支持Html5的浏览器，包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的遨游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程）版或称实验版）所推出的360浏览器，搜狗浏览器，QQ浏览器，猎豹浏览器等国产浏览器同样支持HTML5的功能。
语义化标签
section元素 表示页面中的一个内容区块
article元素 表示一块与上下文无关的独立的内容
aside元素 在article之外的，与article内容相关的辅助信息
header元素 表示页面中一个内容区块或整个页面的标题
footer元素 表示页面中一个内容区块或整个页面的脚注
nav元素 表示页面中导航链接部分
figure元素 表示一段独立的流内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)
main元素 表示页面中的主要的内容 (ie不兼容)
mark元素 行内元素，文字高亮
address元素 行内元素，一般放作者或者公司的邮箱或者地址
city元素 行内， 一般放城市名称
兼容低版本浏览器： < script src=“html5.js”>
视频和音频的应用
video元素 定义视频
< video src=“movie.ogg” controls=“controls”>Video元素< /video>
支持的格式 mp4/mpeg4 ogg webm
audio元素 定义音频
< audio src=“someaduio.wav”>Audio元素< /audio>
支持的格式 MP3/mpeg3 mp4/mpeg4 ogg
controls属性：如果出现该属性，则向用户显示控件，比如播放按钮。
autoplay属性：如果出现该属性，则视频在就绪后马上播放。
loop属性：重复播放属性。
muted属性：静音属性。
poster属性：规定视频正在下载时显示的图像，直到用户点击播放按钮,封面照。
如果标签的属性和属性值相同的时候，直接写属性就可以
< video controls autoplay muted loop poster="">
< source src=“images/movie.mp4” type=“video/mp4”>
< source src=“images/movie.ogg” type=“video/ogg”>
< source src=“images/movie.webm” type=“video/webm”>
< /video>
智能表单
Type=“email” 限制用户必须输入email类型
限制必须有@符，且@符后面必须有内容
无法判断是否存在该邮箱
Type=“url” 限制用户必须输入url类型
只能限制前面是http:// 或者 https:// 等协议开头
无法判断是否是真的网址
Type=“number” 限制用户必须输入数字类型
当鼠标移入时，还会出现上下箭头，用于加减
在chrome中，限制用户只能输入数字，正负号，小数点，e
在firefox中，可以输入随意内容，但是提交的时候会做一些限制
Type=“range” 产生一个滑动条表单
Type=“search” 产生一个搜索意义的表单
在chrome中，当输入框输入内容时，会出现清除内容的x
在firefox无效，相当于type=“text”
Type=“color” 生成一个颜色选择的表单
Type=“time” 限制用户必须输入时间类型
在chrome中，24小时制，有×，有上下箭头
在firefox中，分上下午，12小时制，有×，没有箭头
Type=“month” 限制用户必须输入月类型
在chrome中，可以选择年月
在firefox中无效
Type=“week” 限制用户必须输入周类型
在chrome中，可以选择年周
在firefox中无效
Type=“datetime-local” 选取本地时间
在chrome中，可以选择年月日时间
在firefox中无效
Type=“file” 选取本地文件
表单新增属性
placeholder属性：
文本框处于未输入状态时文本框中显示的输入提示。
autofocus属性：
给文本框、选择框、或者按钮控件加上该属性，当打开页面时，该控件自动获得国标焦点，一个页面只能有一个。
属性和属性值相同的，如果有多个控件同时有autofocus，那么第一个控件将有国标焦点
required属性：
验证输入不能为空
属性和属性值相同的
list属性：
结合datalist元素使用
< input type=“url” list=“url_list” name=“link” />
< datalist id=“url_list”>
< option label=“W3School” value=“http://www.W3School.com.cn” />
< option label=“Google” value=“http://www.google.com” />
< option label=“Microsoft” value=“http://www.microsoft.com” />
< /datalist>
提示：option 元素永远都要设置 value 属性。
datalist里面的id属性要和input的list属性对应，label属性选项的提示文字
autocomplete属性：
输入富足和所用的自动完成功能，是一个节省输入时间，同时也十分方便的功能。只有三种：on/off/""。on可是显示指定候补输入的数据列表，使用datalist元素与list属性提供候补输入的数据列表，自动完成时，可以讲该datalist元素中的数据作为候补输入的数据在文本框中显示：
< input type=“text” name=“greeting” autoconplete=“on” list=“greeting”>
自动提示功能，默认为on
contenteditable属性:
可编辑功能
属性和属性值相等
pattern属性：
将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式。
例：
min、max、step：
为包含数字或日期的 input 类型规定限定（约束）
max: 最大值
min: 最小值
step: 数字间隔，步幅
例：< input type=“number“ min=” 0" max=“10” step=“3” />
novalidate:
可以对form表单添加novalidate属性，即使form表单中的input添加了required，也将不进行验证
属性等于属性值
Multiple:
可以输入一个或多个值，每个值之间用逗号分开
例：< input type=“email” multiple />
还可以应用于file
Css3的概念和优势
CSS3是css技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
css3的优点：CSS3将完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。对我们来说，CSS3主要的影响是将可以使用新的可用的选择器和属性，这些会允许实现新的设计效果（譬如动态和渐变），而且可以很简单的设计出现在的设计效果（比如说使用分栏）
渐进增强和优雅降级
渐进增强 progressive enhancement：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：
优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
选择器
层级选择器
E>F 子选择器 选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素
E和F父子关系
E+F 相邻兄弟选择器 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面
E F兄弟关系
看E元素相邻的兄弟元素是否是F，如果是，加上样式，如果不是，无效
E~F 通用选择器 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
E F兄弟关系
属性选择器
1、E[attr]：只使用属性名，但没有确定任何属性值；
2、E[attr=“value”]：指定属性名，并指定了该属性的属性值；
3、E[attr~=“value”]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写
4、E[attr^=“value”]：指定了属性名，并且有属性值，属性值是以value开头的；
5、E[attr$=“value”]：指定了属性名，并且有属性值，而且属性值是以value结束的
6、E[attr*=“value”]：指定了属性名，并且有属性值，而且属值中包含了value；
7、E[attr|=“value”]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;
支持自定义属性
结构性伪类
X:first-child 匹配子集的第一个元素。IE7就可以支持
先找到和X同级的所有子元素，再去找第一个元素，
如果满足是X，那么加上样式，不是不加
X:last-child匹配父元素中最后一个X元素
先找到和X同级的所有子元素，再去找最后一个元素，
如果满足是X，那么加上样式，不是不加
X:nth-child(n)用于匹配索引值为n的子元素。索引值从1开始
先找到和X同级的所有子元素，再去找第n个元素，
如果满足是X，那么加上样式，不是不加
隔行变色
odd: 奇数 或者 2n+1
even： 偶数 或者 2n
X:nth-last-child(n)从最后一个开始算索引。
先找到和X同级的所有子元素，再去找倒数n个元素，
如果满足是X，那么加上样式，不是不加
X:only-child这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。
X:first-of-type匹配同级兄弟元素中的第一个X元素
先找到和X同级的所有子元素X,然后给第一个X加上样式
X:last-of-type匹配同级兄弟元素中的最后一个X元素
先找到和X同级的所有子元素X,然后给最后一个X加上样式
X:nth-of-type(n)匹配同类型中的第n个同级兄弟元素X
先找到和X同级的所有子元素X,然后给第n个X加上样式
X:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素X
先找到和X同级的所有子元素X,然后给倒数第n个X加上样式
X:only-of-type匹配属于同类型中唯一兄弟元素的X
必须元素类型唯一
X:root匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML
X:empty匹配没有任何子元素（包括包含文本）的元素X
目标伪类选择器
E:target 选择匹配E的所有元素，且匹配元素被相关URL指向
用到锚点
UI伪类状态选择器
E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素
E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素
E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E
radio checkbox
E::selection 匹配E元素中被用户选中或处于高亮状态的部分
伪元素
只能改变背景颜色和字体颜色
否定伪类状态选择器
E:not(s) （IE6-8浏览器不支持:not()选择器。）
匹配所有不匹配简单选择符s的元素E
动态伪类选择器
E:link
链接伪类选择器
选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
E:visited
链接伪类选择器
选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
E:active
用户行为选择器
选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
E:hover
用户行为选择器
选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
E:focus 用户行为选择器 选择匹配的E元素，而且匹配元素获取焦点
E:focus-within 子元素获得焦点，E元素被匹配
盒子阴影
box-shadow: 10px 10px 10px 10px #888888 inset;
h-shadow:
水平阴影的位置，水平方向的偏移量
必填的
正向右，负向左
v-shadow:
垂直阴影的位置，垂直方向的偏移量
必填的
正向下，负向上
blur:
模糊距离
可省略
越大越模糊，不能为负值
spread:
阴影大小
可省略
正的时候比元素大，负的时候比元素小
color:
可省略，默认跟字体颜色相同
inset:
外阴影还是内阴影
默认是外阴影
圆角属性
border-radius: value;
单一方向加圆角：
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
上下在前面，左右在后面
多个参数
一个参数： 四个角
两个参数： 左上右下 右上左下
三个参数： 左上 右上左下 右下
四个参数： 左上 右上 右下 左下
头往左歪45°
椭圆角
border-radius: 50px/250px;
斜杠前面是水平方向，斜杠后面是垂直方向
border-radius: 30px 90px 150px 210px/60px 120px 180px 240px;
单一方向椭圆
border-top-left-radius: 100px 200px;
CSS3文本属性
浏览器前缀的简介及应用
某些CSS属性还只是最新版的预览版，并未发布成最终的正式版，而大部分浏览器已经为这些属性提供了支持，但这些属性是小部分浏览器专有的；有些时候，有些浏览器为了扩展某方面的功能，它们会选择新增的一些CSS属性，这些自行扩展的CSS属性也是浏览器专属的。为了让这些浏览器识别这些专属属性，CSS规范允许在CSS属性前增加各自的浏览器前缀。
文字阴影
text-shadow: 5px 5px 5px #000;
水平方向的位移
垂直方向的位移
模糊距离
阴影颜色
多阴影
text-shadow: 5px 5px 5px #000,-5px -5px 5px #000;
用逗号隔开
文本换行
-
Word-wrap
属性值：
normal
说明：只在允许的断字点换行（浏览器保持默认处理）
break-word
说明：属性允许长单词或 URL 地址换行到下一行。
属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。 -
Word-break
属性值：
break-all
说明：它断句的方式非常粗暴，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句
@font-face
@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体（@font-face这个功能早在IE4就支持）
@font-face的语法规则：
@font-face {
font-family: < YourWebFontName>;
src: < source> [ < forma t>][, [] ] *;
[ font-weight: < weight>];
[ font-style: < style>];
}
@font-face语法说明：
1、YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:“YourWebFontName”;”
2、source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；
3、format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等；
4、weight和style:这两个值大家一定很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体。
实例：
@font-face {
font-family: ‘icomoon’;
src:url(‘fonts/icomoon.eot’);
src:url(‘fonts/icomoon.eot?#iefix’) format(‘embedded-opentype’),
url(‘fonts/icomoon.svg#icomoon’) format(‘svg’),
url(‘fonts/icomoon.woff’) format(‘woff’),
url(‘fonts/icomoon.ttf’) format(‘truetype’);
font-weight: normal;
font-style: normal;
}
背景属性
1、Background-origin 背景原点
说明：
指定background-origin属性应该是相对位置
属性值：
padding-box 背景图像填充框的相对位置
border-box 背景图像边界框的相对位置
content-box 背景图像的相对位置的内容框
注：默认值为：padding-box;
2、Background-clip 背景裁切
说明：
background-clip 属性规定背景的绘制区域。
属性值：
border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。
注：默认值：border-box;
text 背景被裁剪到文字区域。
3、Background-size 背景尺寸
说明：
background-size 规定背景图像的尺寸
属性值：
length
规定背景图的大小。第一个值宽度，第二个值高度。
Percentage(%)
以百分比为值设置背景图大小
cover
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
将最小边适应容器，大的边超出
contain
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
将最大边适应容器
4、css3多背景属性
Eg:
p{ background:url(demo.gif) no-repeat; //这是写给不识别下面这句的默认背景图片
background:url(demo.gif) no-repeat ,url(demo1.gif) no-repeat left bottom, url(demo2.gif) no-repeat 10px 15px;
//这是高级浏览器的css多重背景，第一个最上面
background-color:yellow; //这是定义的默认背景颜色，全部适合 }
渐变字体
span {
background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
color: transparent;
}
边框图片
1、border-image
border-image 属性是一个简写属性，用于设置以下属性:
border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移。
border-image-repeat 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)
默认值是拉伸
border-image-outset 边框图像区域超出边框的量
边框向外延申，不占据空间
弹性盒
display: flex / inline-flex;
布局的传统解决方案，基于盒模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非 常不方便，比如，垂直居中就不容易实现。
Flex 是 Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
弹性盒能够控制子元素在其内部的位置关系
特点:
1.在弹性盒内部，所有的元素都是按照主轴排列的（可以是从上往下，也可以是从左往右）
2.弹性盒里面的元素，会自动转成块状元素，可以直接添加宽高
3.弹性盒垂直居中，父元素加display:flex;子元素margin:auto;
给父元素加的属性
1.形成弹性盒
display: flex; 或者 display: inline-flex;
2.改变主轴的方向
flex-direction
row: 从左往右（默认值）
column: 从上往下
row-reverse: 从右往左
column-reverse: 从下往上
3.改变主轴的排列方式
justify-content
flex-start: 主轴的顶端对齐（默认值）
center: 主轴的中间对齐
flex-end: 主轴的末端对齐
space-around: 主轴方向两端撑开，两端的空白是中间空白的一半
space-between: 主轴方向两端撑开，最两端没有空白
space-evenly： 主轴方向两端撑开，两端的空白和中间相同
4.改变侧轴的排列方式（与主轴垂直的方向叫侧轴）
align-items
flex-start: 侧轴的顶端对齐
center： 侧轴中间对齐
flex-end： 侧轴末端对齐
baseline： 侧轴的顶端对齐
stretch： 如果子元素没有高度，会让子元素的高度和父元素相同（默认值）
5.改变子元素是否换行
flex-wrap
nowrap: 不换行（默认值）
wrap: 换行
wrap-reverse: 换行，改变了侧轴的方向
6.行与行的排列方式
align-content
flex-start: 侧轴的顶端对齐（默认值）
center: 侧轴的中间对齐
flex-end: 侧轴的末端对齐
space-around: 侧轴方向两端撑开，两端的空白是中间空白的一半
space-between: 侧轴方向两端撑开，最两端没有空白
space-evenly： 侧轴方向两端撑开，两端的空白和中间相同
默认是有多少列就平分成几份，在每一份的最顶端排列
给子元素加的属性
1.order: 整数;
数值越大排越后面，越小排越前面
可以取负数
默认值是auto,效果跟0相同
2.子元素在侧轴的排列方式
align-self:
flex-start: 侧轴的顶端对齐
center： 侧轴中间对齐
flex-end： 侧轴末端对齐
baseline： 侧轴的顶端对齐
stretch： 如果子元素没有高度，会让子元素的高度和父元素相同（默认值）
3.分配主轴的剩余空间,子元素的放大比例
flex-grow: 正整数；
默认值是0
4.子元素的缩小比例
flex-shrink：
0：哪怕空间不足，在主轴方向溢出
1: 如果空间不足，会使元素变小，（在不换行的前提下）。默认值
5.分配剩余空间前，占据的空间
flex-basis: value
6.flex
flex: [flex-shrink] [flex-basis];
flex: auto 1 0;
多数情况下 flex相当于flex-grow
多列布局
1、column-count
说明： 属性规定元素应该被分隔的列数 适用于：除table外的非替换块级元素, table-cells, inline-block元素
2、column-gap
说明： 属性规定列之间的间隔大小
3、column-rule
说明： 设置或检索对象的列与列之间的边框。复合属性。
column-rule-color规定列之间规则的颜色。
column-rule-style规定列之间规则的样式。
column-rule-width规定列之间规则的宽度。
4、column-fill
说明： 设置或检索对象所有列的高度是否统一
auto：列高度自适应内容
balance：所有列的高度以其中最高的一列统一
默认值是balance
5、column-span
说明： 设置或检索对象元素是否横跨所有列。
none：不跨列
all：横跨所有列
默认值是none
6、column-width
说明： 设置或检索对象每列的宽度
每列的最小宽度
7、columns
说明： 设置或检索对象的列数和每列的宽度。复合属性 <’ column-width ‘> || <’ column-count '>
媒体查询
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或 纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒 体查询中可用于检测的媒体特性有 width 、 height 和
color （等）。使用媒体查询，可以在不改变 页面内容的情况下，为特定的一些输出设备定制显示效果。
实际操作为：对设备提出询问（称作表达式）开始，如果表达式结果为真，媒体查询中的CSS被应 用，如果表达式结果为假，媒体查询内的CSS将被忽略。
语法：
@media screen and (min-width:320px) and (max-width:750px){
body {
background-color:blue;
}
}
@media开头，and前后要加空格，条件表达式里面不要写分号
通用的样式一般写在媒体查询的前面
媒体查询的权重和普通样式的权重是相同的
link rel=“stylesheet” href=“css/small.css” media=“screen and (max-width: 599px)”>
媒体查询的优缺点
设计特点：
1. 面对不同分辨率设备灵活性强
2. 能够快捷解决多设备显示适应问题
缺点：
1. 兼容各种设备工作量大，效率低下
2. 代码累赘，会出现隐藏无用的元素，加载时间加长
3. 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
4. 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
技术文档，个人博客
css统筹
CSS文档统筹
整站里相同的CSS样式提取到一个样式表里，各个页面调用相同的样式文件即可;
网站较大的情况下一般会把网站的头部，尾部单独分离出来，包括样式文件;
根据页面类型分离文件
根据功能模块分离文件
根据标签类型分离文件
根据设备类型分离文件
根据代码规模综合分离文件
网页自身优化（如何让网站被搜索引擎搜索到）：
★页面头部优化
页面头部指的是代码部分，具体一点就是指的“Description（描述）”和“Keywords（关键字）”两部分：
1、“描述”部分应该用近乎描述的语言写下一段介绍你网站的文字，在这其中，你应该适当的对你网站的特色内容加以重复以求突出；
2、“关键字”部分应该列出你认为合适的，能突出网站内容的关键字就可以了，关键字不要设置太多，可设置10—8个，搜索引擎只会浏览靠前的几个关键字。
★超链接优化
搜索引擎为何可以能够索引全世界的网站，是因为各个搜索引擎程序中都有一个会自动“爬行”于互联网上的智能机器人程序，这个机器人就是顺着网站之间的链接游览世界的，那么我们就应该为它创造一个良好的爬行通道——合理的设置链接。 怎样的链接才是合理的呢？
1、采用纯文本链接，少用，最好是别用Flash动画设置链接，因为搜索引擎无法识别Flash上的文字.
许多公司、个人都喜欢酷酷的Flash动画，网站的入口也做成Flash片断，，搜索引擎很难光顾这样的网站。而且个别设计者非常马虎，把网站的入口链接放在了Flash上，有时因为网络繁忙、缺少Flash插件而导致用户根本就看不到网站的内容，
2、按规范书写超链接，这个title属性，它既可以起到提示访客的作用，也可以让搜索引擎知道它要去哪里.
3、最好别使用图片热点链接，理由和第一点差不多。
★图片优化(alt属性，title属性)
图片优化并不是修改图片的大小、颜色，而是你应该为每个标签加上alt属性，alt属性的作用是当图片无法显示时以文字作为替代显示出来，而对于SEO来说，它可以令搜索引擎有机会索引你网站上的图片，对于一些确实没什么意义的图片，最好也不要省略alt，而应该留空，即 alt=""。
★避免大“体积”的页面
有经验表明，搜索引擎不喜欢索引大体积的页面，即一个页面代码部分的体积不要太大，控制在100kb内为佳.
★最重要的一点！合理的代码结构
搜索引擎喜欢格式清晰，结构分明的页面，理论上XML是最合乎搜索引擎，当然，这太极端了，不过如果采用XHTML+CSS技术将页面数据同表现分离，即避免大量嵌套表格和其它冗余的代码还是能够完美实现这一要求的。
原则：简化代码，易修改
二、CSS规范
1、命名方法（语义化命名，结构化命名）
ID:结构化 head
class: .border0 . red: .font12 .clear
2、CSS命名规则
1）建议使用小写字母
2）以英文字母开头，后面可以连接数字、字母、下划线、连字符，建议尽量使用英文字母，适当使用下划线和连接线；
3）词必达意，名称要反映用途和相关信息，同时也要简短。
三、CSS Reset
CSS Reset是什么？
在HTML标签在浏览器里有默认的样式，例如 p 标签有上下边距，strong标签有字体加粗样式，em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别，例缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。
为什么要重置它？
因为浏览器的品种很多，每个浏览器的默认样式也是不同的，比如标签，在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的，所以，通过重置button标签的CSS属性，然后再将它统一定义，就可以产生相同的显示效果。
三、样式重置
1、规则设置
以新浪为例：
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:; }
fieldset, img { border:none; }
img{ vertical-align:top;}
address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }
ul, ol { list-style:none; }
body { color:#333; font:16px/20px “SimSun”,“宋体”,“Arial Narrow”,HELVETICA; background:#fff;/* overflow-y:scroll;*/ overflow-x:hidden;}
a { color:#666; text-decoration:none; }
a:visited { color:#666; }
a,input{outline:none;}
2、腾讯
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px “宋体”,“Arial Narrow”,HELVETICA;background:#fff;}
a{color:#172c45;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}
.ind{text-indent:2em}
.ind10{text-indent:10px;}
.noborder{border:0;}
.clear{zoom:1}
.clear:after{content:"."; display:block; clear:both; height:0; visibility:hidden;}
3、搜狐
body{font-family:"\5B8B\4F53",“Arial Narrow”,HELVETICA;text-align:center;margin:0 auto;padding:0;background:#FFF;font-size:12px;color:#333;}
body > div{text-align:center;margin-right:auto;margin-left:auto;}
div,form,ul,ol,li,span,p{margin:0;padding:0;border:0;}
img,a img{border:0;margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12px;font-weight:normal;}
ul,ol,li{list-style:none}
table,td,input{font-size:12px;padding:0} /* 默认链接颜色 */
a{outline-style:none;color:#333;text-decoration:none}
a:hover{color:#c00;text-decoration:underline;}
< sub>< /sub>下标
< sup>< /sup>上标
< meta name=“keywords” content=“小米商城”>
< meta name=“description” content=“小米商城直营小米公司旗下所有产品，包括小米手机系列小米CC9 美图手机定制版、小米9、小米MIX Alpha，Redmi 红米系列Redmi K30、Redmi Note 8，小米电视、笔记本、米家智能家居等，同时提供小米客户服务及售后支持”>
怪异盒模型
margin border padding content
在标准盒模型中，宽度 = 左右border + 左右padding + width
高度 = 上下border + 上下padding + height
在怪异盒模型中， 宽度 = width
高度 = height
box-sizing：
border-box: 将元素转成怪异盒
content-box: 将元素转成普通盒模型
rem
px pt em vw vh deg %
em: 相对于父元素字体大小的倍数
rem: 相对于根元素(html)字体大小的倍数
rem: 等比缩放
meta标签
< meta name=“viewport” content=“width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no”>
ddi，dpi，dpr
ppi: （像素数目）
Pixels Per Inch也叫像素密度，所表示的是每英寸所拥有的像素数量。因此PPI数值越高，即代表显示屏能够以越高的密度显示图像。当然，显示的密度越高，拟真度就越高
英寸： 对角线的长度单位，1英寸约等于2.54厘米
乔布斯： 10年发布iphone4时提出的，当手机的ppi超过300的时候，肉眼就看不到像素点了（视网膜高清屏， retina）
dpi: 类似于ppi，一般用于安卓或其他平台
dpr:
设备像素比 = 设备像素 / 图像像素
设备像素（物理像素）： 设备能够控制的最小单位
图像像素（css像素）： 图像能够控制的最小单位
以iphone6，7，8为例：
设备像素： 750 * 1334
图像像素： 375 * 667
设备像素比dpr： 750 / 375 =2
iphone4,5,se: 2
iphone6p,7p,8p: 2.6… 3
iphoneX: 3
根据设计图来指定对应的dpr
640px 750px 1125px
比方说，拿到一张设计图的宽度640px，我们就认为它的dpr为2
如果我们在设计图上量出一个元素的宽度是100px，100px / 2 == 50px;
增加
td的padding是往里面的
button按钮的padding是往里面的
img横向的间距
写在同一行
加浮动
父元素的font-size设置成0
如果一个元素的宽度接近或者大于50%的时候，宽度就不用rem去做
用vw做
cursor
cursor的属性值有default 默认光标（通常是一个箭头） auto 默认。浏览器设置的光标。 crosshair 光标呈现为十字线。 pointer 光标呈现为指示链接的指针（一只手） move 此光标指示某对象可被移动。 e-resize 此光标指示矩形框的边缘可被向右（东）移动。 ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。 nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。 n-resize 此光标指示矩形框的边缘可被向上（北）移动。 se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。 sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。 s-resize 此光标指示矩形框的边缘可被向下移动（南）。 w-resize 此光标指示矩形框的边缘可被向左移动（西）。 text 此光标指示文本。 wait 此光标指示程序正忙（通常是一只表或沙漏）。 help 此光标指示可用的帮助（通常是一个问号或一个气球）。
outline
outline：none；
outline-color
outline-style
outline-width
outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
注释：轮廓线不会占据空间，也不一定是矩形。
浏览器兼容
1.为什么会出现浏览器兼容问题？
由于各大主流浏览器由不同的厂家开发，所用的核心架构和代码也很难重和，这就为各种莫名其妙的Bug(代码错误）提供了温床。再加上各大厂商出于自身利益考虑而设置的种种技术壁垒，让CSS应用起来比想象得要麻烦。浏览器的兼容问题是我们必须去克服的。
2.关于浏览器
1）主流浏览器
Internet Explorer、 Safari、Mozilla Firefox、 Google Chrome、Opera、百度、360、搜狗、傲游
2）最早的浏览器 : Mosaic / Netscape Navigator(网景领航者)（1994-2008）简称NN
3)浏览器大战
第一次浏览器大战发生在上个世纪90年代，微软发布了它的IE浏览器，和网景公司的Netscape Navigator大打出手。
第二次浏览器大战发生在20世纪。
4）浏览器内核及代表作品
浏览器最关键的部分就是它的渲染引擎（Rendering Engine），也就是大家平常所说的的“内核”。
3、主流浏览器市场份额
2013年2月份全球主流浏览器市场份额排行榜
2014年11月份全球主流浏览器市场份额排行榜
2016年12----2017年2月
1）五大浏览器内核
•Trident （MSHTML） （三叉戟；三叉线；三齿鱼叉）
•Gecko （壁虎）
•Presto （ 迅速的）
•Webkit （Safari内核,Chrome内核原型,它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核）
•Blink (由Google和Opera Software开发的浏览器排版引擎)
（2）五大浏览器内核代表作品
*Trident:IE、Maxthon(遨游)、腾讯 、Theworld世界之窗、360浏览器
代表作品IE,因为IE捆绑在Windows中，所以占有极高的市场份额，又称IE内核或是MSHTML，此内核只能应用于windows平台，且是不开源的。
*Gecko：代表作品Mozilla Firefox 是开源的,它的最大优势是跨平台，能在Microsoft Windows、Linux和MacOS X等主要操作系统上运行。
*Webkit :代表作品Safari、Chrome ， 是一个开源项目。
*Presto :代表作品Opera ，Presto是由Opera Software开发的浏览器排版引擎。它也是世界上公认的渲染速度最快的引擎。
*Blink ：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。
4、CSS Bug、CSS Hack和Filter
1)CSS Bug:CSS样式在各浏览器中解析不一致的情况，或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug.
2)CSS Hack: CSS中，Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法，因为它们都属于个人对CSS代码的非官方的修改，或非官方的补丁。有些人更喜欢使用patch(补丁)来描述这种行为。
3)Filter:表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，Filter是一种用来过滤不同浏览器的Hack类型。
*使用Hack带来的一些副作用
降低了CSS代码的可读性，增加了代码的负担。
*设计CSS Hack和 Filter通常有两种方法
1)一种是利用浏览器自身的Bug，来隐藏或显示样式或声明；
2)另一种是利用浏览器对CSS支持的不完善，如对某些规则或语法还没有形成支持，来隐藏或显示样式。
5、IE6常见CSS解析Bug及hack
1)图片间隙
A)在元素中直接插入图片时，图片下方会产生约3像素的间隙(该bug出现在IE6及更低版本中)
hack1:将转为块状元素，给
添加声明：display:block;
hack2:将img设置vertical-align:top/middle/bottom;只要不为baseline
2) 双倍浮向（双倍边距）
描述：当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界加倍显示。
hack:给浮动元素添加声明：display:inline;
3)默认高度（IE6）
描述：在IE6及以下版本中，部分块元素拥有默认高度（低于16px高度）
hack1:给元素添加声明：font-size:0;
hack2：给元素添加声明：overflow:hidden;
4)百分比bug
描述：在IE6及以下版本中在解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%的情况。
hack:给右面的浮动元素添加声明：clear:right; 意思：清除右浮动。
5)表单元素高度及对齐方式不一致(IE,MOZ,C,O,S)
描述：表单元素行高对齐方式不一致
hack:给表单元素添加声明：float:left;或vertical-align:top;
2)表单元素中按钮的解析是按怪异盒模型解析的。
3）直接去掉表单控件的边框时用border:0;border:none;不能兼容ie7以下浏览器。
*透明写法
1.opacity:0~1;IE8以上的浏览器
2.filter:alpha(opacity=1~100); IE9及IE9以下的浏览器
6)列表阶梯BUG（IE6及更低版本的浏览器中）
bug1:在给的子元素中使用了Float:left;父元素中没有设置浮动属性，li阶梯状效果。
hack:给父元素设置浮动便能解决此问题
bug2:当给LI里的A转成块元素，并设置了固定高度时，且给父元素写了浮动后在IE6及更低的版本浏览器里会出现垂直显示。
hack:给a也设置左浮动便可解决。
8)鼠标指针bug
描述：cursor属性的hand属性值只有IE浏览器识别，其它浏览器不识别该声明，cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明。
hack:如统一某元素鼠标指针形状为手型，应添加声明：cursor:pointer;
扩展内容：
鼠标指针
cursor:crosshair(十字架)pointer(手形)move(移动)e-resize(左右方向)ne-resize（向右及向上移动）nw-resize(向上及向左移动)n-resize(向上移动)se-resize(向下及向右)sw-resize(向下及向左)s-resize（向下移动）w-resize（向左移动）text(文本)wait(等待状态)help(帮助)