一.网络标准
Web标准是网页制作的标准。它不是一个标准，而是一系列标准。
Web标准包括三个方面：结构(html)、表现(css)和行为(javascript或js)
注：a)W3C-万维网联盟，它制定了结构和性能的标准。
b)ECMA-欧洲计算机制造商联合会，该联合会制定了《行为守则》。
二、html的相关概念
1 . html-超文本标记语言
2.XHTML-可扩展超文本标记语言
3.HTML 5——HTML的第五个主要修订版
注意：html和xhtml的区别
与html4.0相比，xhtml没有增加新的标签，但是语法要求更严格，比如标签名小写，标签必须关闭。
三、DW常用快捷方式
1.创建新文件。
2.保存文件。
3.预览网页F12
4.打开文件Ctrl O
5.打开首选项面板Ctrl U。
6.撤消Ctrl Z。
7.恢复ctrl y
8.查找并替换ctrl f
9.显示或隐藏文件面板F8
四。html的基本结构
1.文档语句
功能：告诉浏览器对网页使用哪种html或xhtml规范。
h5的文件声明：或或
2.网页根标签(根元素):…
网页的所有内容和标签都应该放在html标签之间。
3.html的内容分为两部分：头部分和正文部分。
A)head部分：主要用于设置字符编码，网页标题，关键字，描述，引入一些外部的css文件，js文件等。
b)正文部分：网页中所有要呈现的内容以及放置内容的标签都要放在正文部分。
注意：常用的字符编码格式是utf-8，还有GBK和gbk，gb2312。
第五，html的基本语法
1.一般标记
语法：标记attribute=”属性值” attribute=”属性值”标记
Eg:前端开发
注意：a)标签名应该是小写的。
b)属性和属性值由等号连接，属性值应该用双引号引起来。
c)在属性和标签之间添加空格，用空格分隔多个属性。
d)所有标点符号必须是英文的。
2.空标记
语法：tag attribute=”属性值” attribute=”属性值”/
eg:
六。常见的html标签
1.网页内容的标题
语法：标题内容(x是1-6)
Eg:前端开发
注：h1-h6都有加粗效果，字体逐渐变小。
2.段落文本
语法：段落文本内容
3.换行
语法：
4.空格(html转义字符)
5.粗体文本
语法：粗体文本内容
粗体文本内容
6.倾斜文本
语法：倾斜的文本内容
倾斜文本内容
7.水平分割线
语法：8。上标和下标
语法：上标：上标
下标：下标
9.无序列表
语法：aaa
…
10.有序列表
语法：aaa
…
扩展：类型用于设置序列号的类型。
Start用于设置索引值
11.自定义列表
语法：名词
解释
…
—————————————————
书写相对路径的三种方式：
a)当当前文件和目标文件在同一个目录中时，写如下：目标文件扩展名
b)当当前文件和目标文件在同一个目录下时，写为：目标文件的文件夹名/目标文件的扩展名。
c)当当前文件所在的文件夹和目标文件所在的文件夹在同一个目录时，写入如下：
./目标文件的文件夹名/目标文件的扩展名
注释：/代表返回上一个目录。
—————————————————
12.图片
语法：
eg:
注意：alt和title的区别
Alt是图片因为某种原因无法正常加载时显示的替换信息。
标题是鼠标悬停在图片上时显示的提示信息。
13.超级链接
语法：链接文本或图片
Eg:百度
空新闻链接
注意：target=”_ blank “链接地址将在新窗口中打开。
扩展：href和src的区别：
A)href表示超文本参考。用于在当前元素和文档之间建立链接。常用的有：link，a
B)src是source的缩写，src指向的内容会嵌入到当前标签所在的文档中。常用的有img和script。
14.形式
角色：显示数据
语法：名称
…
(全名)
…
…
注意：与表格相关的html标签
1)table用于定义一个表。
2)tr定义了表格的行
3)td定义了表格的列
4)th定义表格标题(自动粗体居中)
5)标题定义了表格的标题
thead定义了表格的标题。
7)tbody定义了表格的主体。
8)tfoot定义了表格的页脚。
注意：与表格相关的html属性
A) border设置表格的边框。
b)单元格间距设置单元格之间的间距。
c)单元格边距设置内容和单元格之间的间距。
d)宽度定义单元格的宽度和表格的宽度。
e)高度定义单元格或表格的高度。
f)对齐设置单元格内容的水平对齐align=”left | center | right ”
G) colspan合并列(添加至td)
H) rowspan合并行(添加到td)
菜单
一.形式
功能：用于收集用户信息。
语法：
注意：所有的表单控件都应该放在表单标签之间。
1.文字框
语法：
2.密码箱
语法：
3.提交按钮
语法：
注意：通过设置value属性来更改按钮的默认文本内容。
提交按钮和要提交的表单内容必须在提交前放在表单选项卡中。
4.复原按钮
语法：
注意：重置按钮必须放置在表单中才能具有重置功能。
5.单选按钮
语法：
注意：a)一个组中的单选按钮必须有相同的name属性值，这样才能达到多选的效果。
b)设置checked=”checked “并在页面加载后添加默认选择项。
c)当属性和属性值相同时，属性值可以省略。
6.尺度索结扣
语法：
注意：checked属性的设置与单选按钮的设置相同。
7.下拉列表
语法：
a
b
…
注意：设置selected属性以更改默认的选定项目。
8.文本字段
语法：
扩展：禁止用户随意拖拽改变文本字段的大小。这些设置如下：
textarea { resize:none}
9.普通按钮
语法：
注意：普通按钮不具备提交功能，一般配合js的onclick事件使用。
普通按钮上默认的文本内容是空的，需要通过value属性来设置。
注意：disabled=”disabled “将表单控件设置为禁用。
GET和post的区别
1)get主要用于获取数据，post主要用于向服务器发送数据。
2)当2)get发送数据时，信息会显示在url地址栏中，post直接通过服务器发送，用户看不到这个过程。
GET能传输的数据量小，一般不超过2kb，post能传输的数据量大，理论上没有限制。
4) get安全性低，post安全性高。
二。P
功能：无语义标签，主要用于板块的布局和划分。
语法：…
三。跨度
语法：…
角色：
a)标签没有固定的格式表示。当一种风格应用于它时，它会有一种视觉上的变化。
B)span标签提供了一种分隔部分文本或部分文档的方法。
四。iframe框架
语法：
注意：scrolling=”no “隐藏或删除iframe的滚动条。
角色：创建包含另一个文档的嵌入式框架。
动词（verb的缩写）html注释
语法：
Css基金会
一、css的概念和特征
CSS——层叠样式表
特点：实现了结构与表达的分离。
角色：定义html元素在网页中的显示方式。
二、css基本语法
Css由选择器和声明两部分组成，声明由属性和属性值组成。即：
选择器{Attribute :属性值；}
eg: h1 { color:red}
注意：a)语句要用花括号括起来，每个语句的末尾都要加加分。
b)属性和属性值由冒号连接。
c)建议一句话占一行。
第三，样式表的创建
1.内嵌样式(行间样式，内嵌样式)
语法：标记style=” attribute 3360″标记
Eg:前端开发
2.内部样式(嵌入样式)
语法：
选择器{Attribute :属性值；}
eg:
h1 { color:red}
注意：style标签通常放在head部分。
3.外部样式表
a)使用链接标签来介绍
首先，创建一个后缀为。钢性铸铁
然后通过link标签引入，语法如下：
注：rel用于建立外部文档和本文档之间的关系。
链接标签通常放在头部。
b)使用@import导入css文件
语法：@ import“CSS文件路径”；
Link和@import介绍了外部样式的区别。
1)link属于html标签，可以导入css文件之外的其他文件。@import属于css范畴，只能导入css文件(祖先的区别)
2)从2)link导入的css文件与页面同时加载，从@import导入的css文件在页面加载后加载(加载顺序不同)
3)不存在3)link引入的css文件的兼容性问题，所有浏览器都支持，但较低版本的@import浏览器不支持(浏览器支持不一样)
4)link是html标签，支持js改dom，而@import不支持(是否支持js改dom)
四。样式表的优先级
样式表的优先级
取邻近原则，即离集合元素越近，优先级越高。
当它出现在css属性值中时！重要的是，它的最高优先级是：
!重要的内联内部外部
动词（verb的缩写）css注释
语法：/*注释内容*/
第六，css选择器
1.id选择器
语法：标记id=”id name “标记
# id name {属性3360的属性值；}
Eg:前端开发
# edu { color : red；}
注意：a)id选择器优先级最高，id名称唯一，不能出现同名ID。
b)ID名称应该按语义命名。常见的命名方法：
I .驼峰命名id=”mainlogincontent ”
二。带下划线的连接命名ID=”main _ login _ con ”
2.类别选择器(类别选择器)
语法：tag class=”class name “标记
类名{属性：属性值；}
Eg:前端开发
.tit { color:red}
注意：您可以将相同的类名添加到具有相同样式的元素中。
注意：通用名词列表的用法：
新闻信息
当一个元素与其他元素具有相同的样式，但某个样式不同时，我们需要使用名词列表的方式。
3.后代选择器(包括选择器)
语法：选择器1选择器2{ Attribute :属性值；}
eg:box a { color:red}
注意：在使用后代选择器之前，选择器1和选择器2必须满足包含和包含之间的关系。
Css核心属性
一、字体类属性
1.字体类型
语法：font-family:字体1，字体2，字体3；
eg: body{font-family:“微软雅黑”，Arial}
或者body {font-family 3360“微软雅黑”，Arial}
注：a)当a)font-family设置了多种字体时，请用逗号分隔。
b)中文字体要加双引号，由多个字组成的英文字体也要加双引号。
c)浏览器将首先识别字体1。如果找不到可识别的字体2，如果列出的字体都无法识别，将显示浏览器默认字体。
d)所有特殊字体应使用图片。
2.字体大小
语法：font-size:数字单位；
eg : p { font-size :12 px；}
注意：a)字体大小一般设置为偶数而不是奇数。
b)浏览器默认字体大小为16px。
c)字体大小单位为px、em、rem、pt等。
注：font-size :16 px；相当于font-size : medium；
3.粗体字体
语法：font-weight : normal | bold | bold | 100-900；
eg : H3 { font-weight : normal；}
注意：100-500为常规字体，600-900为加粗字体。
4.倾斜字体
语法：字体样式3360正常|斜体|倾斜；
5.是字体大小写？
语法：font-variant : normal | small-caps；
注意：它主要适用于英语。
6 .字体复合书写
语法：font:style体重大小系列；
例如：font:12px/1.5“微软雅黑”；
上面的代码表示字体大小为12px，行高为字体大小的1.5倍，字体类型为微软雅荷。
注意：在字体的复合写法中，字号和族不能互换，也不能与其他缩写属性互换。
7.字体颜色
语法：color:颜色值；
注意：有三种写颜色值的方法：
a)十六进制符号
color: # 000Color:#fff黑色；白色
B) rgb写入
color:rgb(0，0，0)；Color:rgb(255，255，255)；白色
c)颜色词
color:black黑色；颜色：白色；颜色：红色；
二、文本类属性
1.文本水平对齐
语法：text-align : left | center | right | justify；
注意：a)当容器中的文本或图片等其他元素需要水平居中时，在父容器中添加text-align : center；
b)两端对齐主要用于英语。
2.行高
语法：line-height:数值单位；
eg:行高：32 px；
注意：a)当单行文本的行高高于容器高度时，可以实现定高容器中单行文本的垂直居中。
b)行高不允许设置为负值。
c)当line-height的属性值只写数值不写单位时，表示行高是字体大小的多少倍。
3.文本修改
语法：text-decoration 3360 none | underline | line-through | underline；
eg : a { text-decoration : none；}
a : hover { text-decoration : underline；}
CSS盒子模型
一、css盒子模型的概念和组成
css盒子模型的概念——css盒子模型是CSS的基石，主要用来设置元素之间的关系。每个html元素都有自己的盒子模型。
css盒子模型的组成——它由内容(正文)、填充(填充)、边框(边框)和边距(外边距)组成。
1 .内容
语法：width:数值单位；
Height:数值单位；
注意：宽度和高度的属性值必须加上单位。
2.填充(内容和边框之间的区域)
a)设置一个值
padding:20px上下左右都是20px。
b)设置两个值。
padding:20px 5px上下20px，左右5px。
c)设置三个值。
padding:20px 5px 10px顶部20px，左右5px，底部10px。
d)设置四个值。
padding:20px 5px 10px 0px
顺时针顺序：上20px，右5px，下10px，左0px。
e)某个方向的填充值也可以单独设置。
eg:左填充left:20px(左也可以改为上、右、下)
注意：
I .如果设置了元素的宽度和高度，在设置了padding之后，应该从原来的宽度和高度中减去padding值，以确保总的宽度和高度保持不变。
二、填充不允许设置负值。
三。背景可以延伸到填充区域。
四。当需要调整父元素中子元素的位置关系时，可以通过为父元素设置填充来实现。
容器溢出
一、容器溢出
语法：overflow :可见|隐藏|滚动|自动|继承；
Visible是默认值，内容不会被裁剪并显示在容器外。
隐藏的内容将被裁剪并隐藏起来。
滚动溢出部分的内容以滚动条的形式查看。如果没有溢出，将显示默认滚动条。
当自动容器溢出时显示滚动条
Inherit指定溢出属性值从父元素继承。
您也可以单独设置一个方向的溢出：
溢出-x :隐藏|滚动|自动；
溢出-y :隐藏|滚动|自动；
第二，文本溢出
语法：text-overflow 3360 clip |省略号；
第三，单行文本省略的设置
四个条件缺一不可：
(a)设置固定宽度width :值；
(b)设置文本以强制空白：新换行显示在一行上；
(c)将容器溢出设置为隐藏溢出：隐藏；
(d)设置文本溢出显示的省略号，text-overflow : ellipsis；
注：一、该方法仅适用于单行文本省略号的设置。如果是多行文本显示省略号，可以用js或者后端处理。
二。必须为文本所在的最近的父元素设置上述四个属性。
元素类型和转换
一. html元素的类型
Html元素分为三类：块元素、内联元素和可变元素。
注意：html元素也可以分为三类：块元素、行内元素和行内块元素。
1.块状元素
公共块元素：p、p、ul、ol、Li、dl、dt、DD、form、table、tr、TD、HR、h1、p、h6、字段集
块状元素的特征：
a)块元素以块的形式显示为矩形区域。
b)默认情况下，块元素占据一行，从上到下排列。
c)块元素可以定义自己的宽度和高度，以及盒子模型中的任何属性(如边距、填充、边框)
d)块元素可以用作容器来保存其他块元素和行内元素。
2.内嵌元素
常见的内联元素：a、span、strong、b、I、em、br、img、input、select、textarea
内嵌元素的功能：
a)行内元素没有自己的形状，也显示为矩形区域
b)行内元素一个接一个地显示在一行中。
c)行内元素不能定义宽度和高度，以及一些与高度相关的属性(边距-顶部、边距-底部、填充-顶部、填充-底部、行高)。
d)行内元素不能嵌套块元素。
常见的内联块元素：img、input、select、textarea
内嵌块元素的功能：
a)即具有内联元素的特征，一个一个的显示在一行中。
b)具有块元素的特性，可以定义宽度和高度，以及盒子模型中的任何属性。
注意：vertical-align属性仅对内联块元素有效。
3.可变元素
元素类型、可变范围块元素和内联元素根据上下文来确定。
注意：默认情况下，普通html元素有边距和填充，如下所示：
正文默认边距
H1 h6违约保证金
p违约保证金
Ul默认边距和填充
Ol默认边距和填充
Dl默认毛利
Dd默认保证金
Td默认填充
默认情况下输入填充
文本区域默认填充
设置默认填充和边距
二、元素类型转换
语法：display : block | inline | inline-block | none | list-item；
A)block将元素转换为块元素，这是大多数块元素的默认显示属性值。
B)inline将元素转换为inline元素，这是inline元素的默认显示属性值。
C)inline-block将元素转换为inline block元素，这是inline block元素的默认显示属性值(如img，input)
D)none隐藏元素，使其不可见。
E)list-item将元素转换为列表类型，这是li的默认显示属性值。
—————————————————
扩展：图片默认有间隙：
方案一：img增加display:block
方案2:给img添加float属性。
—————————————————
注意：当一个元素设置了float，就相当于转换为block。
三。替换元素和非替换元素
1.替换元素
浏览器根据元素的标签和属性决定元素的具体显示内容。
比如根据img标签的src属性决定在网页中显示什么样的图片。
根据输入标记的type属性，决定在网页中显示什么类型的输入控件。
2.非替换元素
除了替换元素，大多数html元素都是非替换元素，其内容直接显示在浏览器中。
(缺少内容)
和定位锚点设置
首先，三种常见的布局模型
1.流动模型(流动)
元素不以css样式布局，块元素从上到下排列，行内元素一个一个显示在一行中。
2.浮动模型(浮动)
使用float属性对网页进行布局，以便块元素可以显示在文档流之外的一行上，行内元素可以设置宽度和高度并显示在一行上。
3.层模型(层)
使用布局的位置定位属性。
二、定位布局
语法：position:static(默认)|absolute |relative |fixed(固定)；
1.绝对定位
语法：position:absolute
要成为绝对定位元件的基准，必须满足以下两个条件：
a)参照物和绝对定位元素必须有包含与被包含的关系。
b)参考对象必须具有定位属性。
如果找不到满足上述两个条件的父包含块，则绝对定位的参照是浏览器窗口。
注意：元素的定位位置由left、right、top和bottom属性设置。
2.相对定位
语法：position:relative
Reference:元素在偏移量之前的位置。
相对定位和绝对定位的区别
a)不同的参考对象
绝对定位参考是定位属性最接近元素的父包含块，相对定位参考是元素偏移前的位置。
b)是否会脱离文档流？
定位肯定会脱离文档流，位置会被其他元素占用，相对定位不会脱离文档流，会保持原来的位置。
3.固定定位
语法：position:fixed
参考：浏览器窗口或屏幕窗口
注意：当一个元素设置了固定位置时，该元素将脱离正常的单据流程，该位置将被其他元素占用。
三。透明度设置
语法：opacity:数值；(取值范围为0-1，0表示完全透明，1表示完全不透明)
注意：IE8及以下版本的IE浏览器不支持不透明属性，兼容写法如下：
Filter:alpha(不透明度=数值)；(取值范围为0-100)
第四，定位元素的层叠属性。
语法：z-index 3360 auto | number；
Number是一个没有单位的整数值，或者您可以设置一个负值。
注意：当z-index未设置时，最后写入的对象将首先显示在上层。设置后，值越高，层就越高。
动词（verb的缩写）锚链
语法：
a)命名锚：
标签id=”锚点名称”标签
b)连接锚点名称
Eg:第1章html基础
第一章
—————————————————
扩展1:如何在网页中插入flash
克
广泛适应性
首先，宽度适应
语法：width :100%；
注意：将元素的宽度设置为100%将继承父元素的宽度。
块元素的默认宽度是100%。
注：宽度适配主要用于横幅效果。
第二，适应性强
语法：height:auto或者不设置高度。
注意：容器的高度由其内容物决定。
三。最大和最小高度，最大和最小宽度
1.最小高度
语法：min-height:数值单位；
注意：IE6不识别min-height属性，兼容写法如下：
a)最小高度：100像素；_ height:100px
b)最小高度height:100pxheight:auto！重要；height:100px
2.最大高度
语法：max-height:数值单位；
3.最小行宽
语法：min-width:数字单位；
注意：当设置块元素的最小宽度属性时，您需要将元素转换成内嵌块元素。
4.最大宽度
语法：max-width:数字单位；
注意：以上四组属性IE6及以下不被浏览器识别。
第四，高崩问题
描述：父元素是高度自适应的，当子元素浮动时，父元素的高度为0，称为高度折叠问题。
a)给父元素一个固定的高度
父元素{ height3360value}
缺点：固定父元素的高度违反了高适应性原则，不推荐使用。
b)将overflow:hidden添加到父元素；
优点：简单
缺点：定位子元素时，定位在父元素方框外的部分会被隐藏。
c)在浮动子元素的末尾添加一个空P，并设置以下样式：
.clear { clear:both身高：0；溢出：隐藏；}
优点：兼容性好，所有浏览器都支持
缺点：在网页中添加几个无意义的P，容易导致代码冗余。
d)通用清算浮动法
{content:之后的父元素： “；
显示： block；
clear:both
身高：0；
溢出：隐藏；
可视性：隐藏；}
优点：解决了代码冗余问题，是官方推荐的解决高崩溃问题的方法。
动词（verb的缩写）伪元素
1.之前的元素：
语法：box3360before {
content:“你好”；
font-size :30 px；
颜色：红色；
…
}
注意：before是在元素中的所有内容之前添加一个虚拟元素。
2.元素：after
语法：
content:“世界”；
font-size :30 px；
颜色：绿色；
}
注意：after是在元素中的所有内容之后添加一个虚拟元素。
注意：一、无论伪元素内容是否为空，都必须添加内容属性。
二。伪元素是行内元素。
隐藏不可见元素的两种方法
1 . display : none；
元素隐藏不可见，位置不预留(不可见不可触)
2 .可视性：隐藏；
元素隐藏不可见，位置保留(不可见有形)
七。自适应窗口高度
第一组：
html，body { height :100%；}
然后设置元素：
元素{ height :100%；}
注意：窗口高度适配主要用于内容少于一屏或者没有内容的情况，body和html的高度为0。
八、水平居中
1.如果设置的元素是文本、图片等内嵌元素，则通过设置父元素text-align:center实现水平居中；去实现它。
2.满足固定宽度和块两个条件的元素可以通过将“左边距”的值设置为“自动”来居中
注意：当元素设置了浮动、绝对定位、固定定位，左边距、右边距设置为自动时，无效。
3.宽度不均匀的块状元素水平居中。
方案1:为子元素设置display : inline-block；为父元素设置text-align : center；
方案二：为父元素设置display:tablemargin:0自动；
注：显示：表；将元素转换为表格形式。
九、元素水平垂直居中。
1.固定宽度和高度元素在屏幕窗口中水平和垂直居中。该方法如下：
元素{
width:value
height:value
位置：固定；
左：50%；
top :50%；
margin-left :-宽度/2；
margin-top :-height/2；
}
2.可变宽度和高度元素在屏幕窗口中水平和垂直居中。该方法如下：
元素{
位置：固定；
左：0；
top:0
底部：0；
right:0
margin:auto自动；
}
3.宽度和高度可变的子元素在父元素中水平和垂直居中。该方法如下：
a)父元素{
position:relative相对；
}
子元素{
位置：绝对；
左：0；
top:0
底部：0；
right:0
margin:auto自动；
}
b)父元素{
显示： table-cell；
text-align : center；
垂直对齐：米；
}
注意：display : table-cell；将元素转换为表格单元格。
X.舍入效应
语法：border-radius:数字单位；
注：边框半径为：50%；(圆圈)
注意：border-radius是css3的新属性，较低版本的IE浏览器不支持。它需要通过使用背景图像来实现。
常见的兼容性问题
一.常见的兼容性问题
1.双浮动臭虫
描述：块元素浮动后，水平边距被设置。IE6下显示的边距大于设定的边距值。
解决方案：在浮动块元素中添加display:inline
2.表单元素的行高不一致。
解决方案：
方案一：添加vertical-align:middle形成元素；
方案2:向表单元素添加float属性。
扩展：如何去掉表单元素的外边框？这些方法如下：
输入{ outline:none}
3.IE6中无法识别高度较小(一般为10px)的容器。
解决方案：
a)将溢流：隐藏添加到容器中；
b)将font-size:0添加到容器中；(如果容器高度为0，则使用第一种解决方案)
4.超链接中的图片在IE浏览器中有默认边框。
解决方法：在img标签中添加border:0或者border:none
5.无法识别5.min-height属性IE6
解决方案：
a)最小高度：100像素；_ height:100px
b)最小高度height:100pxheight:auto！重要；height:100px
6.图片默认有间隙。
解决方案：
a)为img设置display:block
b)将浮动属性设置为img
7.百分比错误
描述：父元素的宽度是100%，子元素的宽度是50%，在IE6下，50% 50%大于100%
解决方法：在左右浮动的子元素中添加clear:right
8.IE浏览器的早期版本不识别不透明度属性。
解决方案：filter3360alpha(不透明度=数值)；
9.鼠标指针错误
描述：cursor:hand只有较低版本的IE浏览器支持，其他浏览器不支持。
解决方法：cursor:pointer所有浏览器都支持它。将鼠标指针改为手形。
10.上边距和下边距重叠
说明：同时设置上下元素的边距值时，只能识别较大的一个。
解决方案：
A)margin-top和margin-bottom仅设置其中之一。
b)在设置了边距属性的元素之一的外层嵌套另一个框，并设置overflow:hidden
11.假圣旨。
描述：设置子元素的上边距适用于父元素。
解决方案：
1)将子元素的上边距设置更改为父元素的上边距设置。
2)将overflow:hidden设置为父元素；
3)将float属性设置为父元素。
4)为父元素设置border-top :1px纯色透明；
注意：透明就是透明。
12.按钮的默认大小各不相同。
解决方法：根据设计稿上的按钮样式设置宽度和高度，或者使用背景图片。
二、css hack(过滤)
1.下划线属性过滤器
语法：selector {_ attribute 3360属性值；}
eg:box { _ background:red}
注意：只有IE6能识别带下划线的css属性，其他浏览器不能。
2.重要关键字过滤器
语法：选择器{Attribute :属性值！重要；}
eg:box{background:yellow！重要；background:blue蓝色；}
注意：重要提示：除IE6之外，所有浏览器都可以识别关键字过滤器。
补充！重要关键字的css属性应该放在标准css属性之前。
3.*属性过滤器
语法：selector {* attribute 3360属性值；}
eg:box { * background:pink}
注意：*属性过滤器只能被IE6和IE7识别。
4.\9
语法：selector {attribute 3360属性值\ 9；}
eg:box { background : orange \ 9；}
注意：\9是IE6，7，8，9都是可以识别的。
5.\0
语法：选择器{attribute 3360属性值\ 0；}
eg:box { background : black \ 0；}
注意：\0被IE8及以上版本的浏览器识别。
三到五个浏览器核心
1.IE内核：三叉戟
2.Mozilla Firefox内核：Gecko
3.Safari，Chrome内核：Webkit
4.Opera内核：很快
5.谷歌、Opera、软件联合开发的浏览器排版引擎内核：Blink
—————————————————
图像集成
一、图片整合的概念
图像融合是指将多幅背景图像融合成一幅背景图像，通过背景-位置属性实现图像定位的技术。
二、图片整合的优势
将多张图片整合成一张图片，减少了对服务器的请求数量，加快了页面的加载速度，减少了图片体积，从而实现了网站性能的优化。
注：图片集成技术也叫移门技术，精灵贴图，精灵贴图。
表单，表单高级
第一，形式先进
表单的组成：表单域、表单控件和提示信息。
1.表单字段
2.表单控件
文本框：
密码框：
提交按钮：
重置按钮：
单选按钮：
检查按钮：
下拉菜单：a…
文本字段：
3.提示信息
放置表单控件前后的文本内容称为提示信息。我们通常使用以下语法将提示信息放在标签label中：
a)单击文本以选择单选按钮或复选按钮。
男人
注意：设置id属性值与for属性值一致，可以达到点击文本选择按钮的效果。
b)通过设置标签label的样式达到一定的效果。
注意：标签是一个内嵌元素。
4.表单字段集和表单字段集的标题
语法：标题
表单控件…
注意：将表单中的内容分组并添加一个标题。表单中可以嵌套多个字段集。
5.上传文件
语法：
6.隐藏字段
语法：
注：主要用于后端数据处理。
7.图像域
语法：
注意：提交按钮位置使用的图像使该图像具有按钮的功能。
二、形式的先进性
1.合并相邻单元格边框(添加到表格)
语法：border-collapse : collapse | separate；
2.定义表格标题的位置(添加到表格)
语法：caption-side 3360 top | bottom | left | right；
注意：左和右仅受Firefox支持。
3.设置单元格间距(添加到表格)
语法：border-spacing:数字单位；
注意：当设置了border-collapse : collapse；之后，边框间距将失效。
4.设置不包含内容的单元格隐藏(添加到表格)
语法：empty-cells : show | hide；
5.表格布局算法(添加到表格)
语法：table-layout:auto|fixed(单元格宽度是固定的，不随内容变化)；
三。表单的重要html属性
1.合并列
Colspan=”数值”
2.合并线条
Rowspan=”数值”
3.单元格内容的水平对齐
align=”left|center|right ”
4.单元格内容的垂直对齐
valign=”顶部|中部|底部”
5.分离线
rules=”行|列|所有|组|无”
行行分隔符
列分隔线
所有分隔符和列分隔符
群体分割线
无没有分割线
注：表格行分组：表格列分组：注：span用于将几列设置为一组，默认一列为一组。
第四，css样式重置
功能：CSS重置的功能是让每个浏览器的CSS样式有一个统一的基准。
第五，seo优化
SEO——搜索引擎优化
站内优化
1.页面主题优化
给网站添加一个有意义的标题。
2.页眉优化
向网站添加关键词，描述
关键字
形容
3.超链接优化
a)尽量少用或不用flash设置超链接。seo无法识别flash中的超链接文本。
b)给A标签添加title属性可以提示访问者。
c)尽量避免使用图片的热链接。
4.图像优化
向img标签添加title，alt属性
5.网站地图
在网站中添加网站地图或网站导航，以便访问者可以快速找到所浏览网页的信息。
6.在网站上添加友情链接。
7.seo认为静态页面比动态页面更有利于搜索引擎优化。
8.避免“笨重”的页面，代码结构要合理。
场外优化
1百度推广
2.流分析
3.网站品牌建设
H5新标签
I. h5增加了结构标签
1.header定义了网页的标题。
2 .页脚定义了网页的底部
3.section定义了网页的某个区域
4.nav定义网页的导航部分。
5.side定义了网页的侧边栏
6.article定义网页上的文章
7.hgroup合并网页中的标题。
8 .图中组合了网页中的元素。
9.图9 .图片标题为图片组合添加标题
定义一个对话框。
第二，h5增加了其他标签
1.定义标记的文本。
语法：定义标记的文本。
2.定义一个已知范围和度量的标量
语法：
3.定义任务的进度或进程。
语法：
第三，音频
语法：
…
您的浏览器不支持该元素
注意：音频相关的html属性
A)src引入音频文件路径
b)控制显示音频控制条
c)自动播放设置自动播放。
d)循环设置循环播放
注意：音频支持音频格式：mp3，ogg，wav。
四。录像
语法：
…
您的浏览器不支持该元素
注意：视频相关的html属性
A)src引入音频文件路径
b)控制显示音频控制条
c)自动播放设置自动播放。
d)循环设置循环播放
e)宽度定义视频区域的宽度。
f)高度定义了视频区域的高度。
g)在视频播放之前或快进快退期间海报显示的图片。
注意：视频支持的视频格式：mp4(mpeg4)，ogg，webm
动词（verb的缩写）h5增加了类型属性值
1.type=”电子邮件”
将用户输入限制为电子邮件类型(必须包含@符号，并且@符号前后的内容不能为空)
2.type=”url ”
将用户输入限制为url类型(必须包含3358，并且以下内容不能为空)
3.type=”number ”
将用户输入限制为数字类型
eg:
注意：最小值设置最小值最大值设置最大值步长设置每个增量和减量的值。
4.type=”range ”
生成一个滑动条表单。
eg:
5.type=”color ”
生成用于选择颜色的面板。
6.type=”date ”
生成用于选择日期的面板。
7.type=”time ”
生成用于选择时间的面板。
8.type=”month ”
生成用于选择年份和月份的面板。
9.type=”搜索”
生成具有搜索意义的表单。
不及物动词h5新表单属性
1.required是必需的，用户输入不能为空。
eg:
2 . placeholder=” default prompt content “向表单控件添加默认提示信息。
eg:
3.加载3.autofocus页面后，它会自动聚焦在一个输入框上。
eg:
4.pattern=”正则表达式”根据设定的规则输入内容。
eg:
5.list指定一个数据列表作为下拉提示列表。
eg:
a
…
注意：类型为搜索的输入框的list属性的值必须与datalist标签的id名称一致，才能实现搜索功能。
七。取消h5的形式验证
语法：
崇高的常用快捷键
今天是2018年7月9日2018-07-09。
今天是2018年7月9日2018-07-09。
今天是2018年7月9日2018-07-09。
今天是2018年7月9日2018-07-09。
今天是2018年7月9日2018-07-09。
今天是2018年7月9日2018-07-09。
标签。类名子标签名*编号
ul . ul sli * 6a span
Css3选择器
一.基本选择器
1.通配符
* { margin:0划：0；}
2.元素选择器(标签选择器)
h1 { color:red}
3 .类选择器(类选择器)。box { background:blue}
4.id选择器
# wrapper { color : black；}
5.组选择器
ol，ul { list-style : none；}
第二，层次选择器(关系选择器)
1.后代选择器或包含选择器
匹配e元素下的所有子元素f。
eg:box a { color:red}
匹配下的所有子元素a。包厢
2.子选择器
匹配e元素下的第一个子元素f。
eg:boxa { color:red}
匹配下一级子元素a。盒子。
3.相邻兄弟选择器
匹配紧接在E元素之后的F元素(只有一个)
eg:框h1 { color:blue}
匹配紧接在。盒子。
4.通用同胞选择器
匹配E元素之后的所有F元素(有可能匹配多个元素)
eg:box ~ h1 { color:blue}
之后匹配所有h1元素。盒子。
三。动态伪类选择器
1.e :未访问过链接。
2.e:访问后的状态
3.3的状态。e :滑过时悬停
4.4的状态。e :按下时活动的鼠标
5.5的状态。e :光标聚焦在输入框时聚焦光标
四。结构伪类选择器
1 1.first-child匹配每个父元素下的第一个子元素。
eg:box a :第一胎{ color:red}
匹配下的第一个子元素A。框(在这种情况下，必须是下的第一个子元素。方框)
eg:box :第一胎{ color:red}
匹配下每个父元素下的第一个子元素。盒子。
注：3360第一胎《=》 3360第二胎(1)
是匹配的父元素下的第一个子元素。
2 2.last-child匹配每个父元素下的最后一个子元素。
eg:盒子a : last-child { color : blue；}
匹配下的最后一个子元素A。框(在这种情况下，必须是下的最后一个子元素。方框)
eg:box : last-child { color : blue；}
匹配下每个父元素下的最后一个子元素。盒子。
注：3360末子《=》 3360末子(1)
是匹配的父元素下的最后一个子元素。
3.3360n-child(n)匹配父元素下的第n个子元素。
eg:第：号箱-儿童(3){ color : red；}
匹配下每个父元素下的第三个子元素。盒子。
4.3360n-child(2n)匹配父元素下偶数编号的子元素。
eg:tab tr :n-child(2n){ background : red；}
匹配甚至tr以下。标签
注：第3360个孩子(2n)《=》 3360个孩子(偶数)
5.第3360个子元素(2n1)匹配父元素下的奇数子元素。
eg:tab tr :n th-child(2n 1){ background : blue；}
匹配下面的奇数tr。标签
注：第3360个孩子(2 n1)《=》 3360个孩子(奇数)
6.n-last-child(n)匹配从父元素底部开始的第n个子元素。
eg:tab tr:nth第n-最后一个孩子(3){ color : red；}
匹配下的倒数第三个子元素tr。标签
——————————————————-
7.first-of-type匹配父元素下指定类型的第一个子元素
eg:uls Li :一流的{ background:pink}
下匹配类型为li的第一个子元素。uls。
注：3360第一型《=》 :第一型(1)
是父元素下与指定类型匹配的第一个子元素。
8.last-of-type匹配父元素下指定类型的最后一个子元素。
eg:uls li:last最新型{ background:yellow}
匹配此类型的最后一个子元素。uls。
注：3360最新型《=》第n个最新型(1)
是父元素下与指定类型匹配的最后一个子元素。
9.n-of-type(n)匹配父元素下指定类型的第n个子元素。
eg:uls Li : th-of-type(3){ background : blue；}
匹配此类型的第三个子元素。uls。
10.n-last-of-type(n)匹配父元素下指定类型的倒数第n个子元素。
eg:uls li:nt[class|=link]{color:blue;}
匹配含有class属性并且值以link-开头或值为link的a标签
七、否定伪类选择器
语法： E:not(F) 匹配不满足条件F的E元素
eg: li:not([class=lis]){color:red;}
匹配不满足条件class=lis的li元素
八、语言伪类选择器
语法： E:lang(val) 匹配指定了lang属性，并且值为val的E元素
九、伪元素
1. E:before 在E元素所有内容之前添加一个伪元素
eg: .box:before{
content:”hello”;
font-size:32px;
…
}
2. E:after 在E元素所有内容之后添加一个伪元素
eg: .box:after{
content:””;
display:block;
clear:both;
height:0;
overflow:hidden;
visibility:hidden;
}
注：:after常用于清除浮动
伪元素是一个内联元素
不管内容是否为空，都不能省略content
3. :first-line 匹配段落文本中的第一行
4. :first-letter 匹配段落文本中的第一个字符
5. ::selection 改变选中文字的效果
注：针对火狐内核的兼容写法如下：
p::-moz-selection{color:red;}
十、渐进增强和优雅降级
1.渐进增强
一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
eg: .box{ /*渐进增强写法*/
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
2.优雅降级
一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
eg: .box{ /*优雅降级写法*/
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
}
注：css3属性针对不同内核的兼容写法：
对webkit内核 -webkit-
针对火狐内核 -moz-
针对opera内核 -o-
针对IE内核 -ms-
扩展：如何使用border实现三角的效果，方法如下：
元素{
width:0;
height:0;
border:3px solid transparent;
border-top-color:blue; /*top还可以根据需要更改为bottom,right,left*/
}
css3圆角，阴影
一、圆角
语法： border-radius:数值+单位;
1.设置一个值
border-radius:20px; 四个方向圆角都为20px
2.设置两个值
border-radius:50px 10px; 左上，右下为50px,右上，左下为10px
3.设置三个值
border-radius:50px 0px 10px; 左上为50px,右上和左下为0,右下为10px
4.设置四个值
border-radius:0px 10px 30px 60px; 顺时针方向依次为左上0，右上10，右下30，左下60
5.用/设置圆角
border-radius:50px/100px;
第一组值代表水平半径为50px,/后的第二组值代表垂直半径为100px
6.还可以单独设置某一个方向的圆角
border-top-left-radius:10px;
注：border-top-left-radius:20px 50px; 水平半径为20px,垂直半径为50px
7.设置为圆
border-radius:50%;
二、多色彩边框
语法： .box{-moz-border-top-colors:black red yellow;}
注：只有低版本的火狐浏览器支持
三、图像边框
1.设置图像边框的路径
语法：border-image-source:url(图片路径);
2.设置图像边框的裁剪位置
语法：border-image-slice:数值;
注：a)设置数值专指像素
b) 如何需要中间部分显示出来，需要添加fill
eg: border-image-slice:27 fill;
3.设置图像边框的平铺属性
语法：border-image-repeat:stretch|repeat|round;
a)stretch 默认值，图像被拉伸
b)repeat 图片默认平铺，当碰到边界时则会被截断
c)round 图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。
eg: border-image-repeat:round stretch;
代表水平方向铺满，垂直方向拉伸
四、文本阴影
语法： text-shadow:水平偏移量 垂直偏移量 模糊度 颜色值;
eg: text-shadow:5px 5px 3px black,8px 8px 5px #999;
注：a) 多组阴影的值用逗号分隔
b) 水平偏移量向右为正，向左为负，垂直偏移量向下为正，向上为负
c) 模糊度最小值为0，不允许设置负值
扩展：文字描边，语法如下：
-webkit-text-stroke:3px blue;
五、盒阴影
语法：box-shadow:水平偏移量 垂直偏移量 模糊度 扩展半径 颜色值;
eg: box-shadow:5px 5px 10px #333,8px 8px 12px #666;
注：盒阴影默认为外阴影，如果需要设置内阴影，写法如下：
eg: box-shadow:inset 3px 3px 5px #333,inset 5px 5px 8px #666;
注：当设置了扩展半径后，一般水平和垂直偏移量设置为0
eg: box-shadow:0px 0px 5px 10px red;
box-shadow:inset 0px 0px 5px 10px red;
css3弹性布局
一、分栏布局
1.设置栏数
语法： column-count:数值;
2.设置每栏的宽度
语法：column-width:数值+单位;
注：column-count和column-width设置其中一个属性即可
3.设置栏间距
语法：column-gap:数值+单位;
4.设置栏分隔线
语法：column-rule:宽度 solid|dashed|dotted 颜色;
eg: column-rule:3px dashed blue;
5.设置是否跨栏显示
语法：column-span:all(跨栏显示)|none(不跨栏显示);
注：该属性给需要跨栏显示的元素添加
二、弹性布局
语法：display:flex;
说明：
a) 当给元素设置了display:flex;该元素就成为了弹性盒
b) 当给父元素设置弹性盒后，子元素的float,clear,vertical-align将会失效
c) 我们把设置了display:flex;属性的元素叫做flex容器，把里面的子元素叫做flex项目
d) 当给元素设置了弹性盒以后，随之会产生两根轴线：主轴和交叉轴
◆ Flex容器属性
1.改变主轴的方向
语法：flex-direction:row|row-reverse|column|column-reverse;
row 默认值，主轴在水平方向，起点在左端
row-reverse 主轴在水平方向，起点在右端
column 主轴在垂直方向，起点在上沿
column-reverse 主轴在垂直方向，起点在下沿
2.设置flex项目是单行显示还是多行显示
语法：flex-wrap:nowrap|wrap|wrap-reverse;
nowrap 默认值，不换行
wrap 换行
wrap-reverse 与wrap相似，但是行的顺序是倒过来的
3.flex-direction和flex-wrap的简写方式
语法：flex-flow:row nowrap;
4.设置主轴对齐方式
语法：justify-content:flex-start|flex-end|center|space-between|space-around;
flex-start 类似于左浮动
flex-end 类似于右浮动
center flex项目居中对齐
space-between flex项目两端对齐，中间间隔相等
space-around flex项目两侧间隔相等
5.设置交叉轴对齐方式
语法：align-items:flex-start|flex-end|center|baseline|stretch;
flex-start 对齐交叉轴的起点
flex-end 对齐交叉轴的终点
center 以交叉轴为参考，居中对齐
baseline flex项目第一行文字基线对齐
stretch flex项目没有设置高度或者为auto，将占满整个父元素的高度
———————————————–
★ 如何使用flex布局实现不定宽高的元素在屏幕窗口水平垂直都居中，方法如下：
html,body{height:100%;}
body{display:flex;justify-content:center;align-items:center;}
★ 如何使用flex布局实现不定宽高的子元素在父元素中水平垂直都居中，方法如下：
父元素{display:flex;justify-content:center;align-items:center;}
———————————————–
6.设置多根轴线对齐方式(如果只有一根轴线，该属性不起作用)
语法：align-content:flex-start|flex-end|center|space-between|space-around|stretch;
flex-start 对齐交叉轴的起点
flex-end 对齐交叉轴的终点
center 以交叉轴为参考，居中对齐
space-between 轴线两端对齐，中间间隔相等
space-around 轴线间两侧间隔相等
stretch flex项目没有设置高度或者高度为auto，将占满整个父元素的高度
◆ Flex项目属性
1.改变flex项目排列顺序
语法：order:0|数值;
注：默认值为0,值越小越靠前
2.设置某个flex项目不同于其他flex项目的交叉轴对齐方式
语法：align-self:flex-start|flex-end|center|baseline|stretch;
注：属性值的使用方法同align-items属性
3.设置flex项目的放大比例
语法：flex-grow:0|数值;
注：flex-grow默认值为0即使存在剩余空间也不放大
4.设置flex项目的缩小比例
语法：flex-shrink:1|数值;
注：flex-shrink默认值为1,当flex容器剩余空间不足时，flex项目等比例缩小
注：flex-shrink:0; 即使flex容器空间不足，flex项目也不缩小
5.设置flex项目占据主轴的空间
语法：flex-basis:数值+单位;
注：flex-basis默认值为auto
6.flex-grow,flex-shrink,flex-basis的简写方式
语法：flex:0 1 auto; (默认值)
注：flex:1; 完整写法：flex:1 1 0%;
主要应用在两个方面：
a) 等比例分配空间
b) 将剩余空间分配给某个元素
三、响应式布局
概念—写一套css样式可以应用在多个终端设备
优点：可以同时适配多个终端，灵活性更强
缺点：工作量增加，会造成代码冗余，加载时间加长
原理：媒体查询
四、媒体查询
1.外联式媒体查询
语法：
注：当屏幕窗口大于等于960px时，引用blue.css文件
当屏幕窗口小于等于960px时，引用red.css文件
2.内嵌式媒体查询
语法：
@media screen and (min-width:320px) and (max-width:960px){
body{
background:red;
}
}
注：当屏幕窗口大于等于320px,小于等于960px时，body背景色为红色
标准盒模型和怪异盒模型
一、标准盒模型和怪异盒模型
标准盒模型是由content,padding,border,margin四部分组成
怪异盒模型是由content,margin组成
标准盒模型的总宽度=width+左右padding+左右border+左右margin
标准盒模型的总高度=height+上下padding+上下border+上下margin
怪异盒模型的总宽度=width+左右margin
怪异盒模型的总高度=height+上下margin
注：当网页没有添加文档声明时，就会触发某些浏览器(如IE6)的怪异模式
二、box-sizing常用属性值有哪些及其含义？
1.box-sizing:border-box;
将标准盒模型转换为怪异盒模型，总宽高不包括padding和border
2.box-sizing:content-box;
将怪异盒模型转换为标准盒模型，总宽高包含padding和border
———————————————–
扩展：如何自定义字体
语法： @font-face{
font-family:字体名称;
src:url(字体文件路径);
}
body{
font-family:字体名称;
}
css3移动端布局
一、移动端相关概念
1.屏幕尺寸
屏幕尺寸是指屏幕对角线的长度，单位为英寸，1英寸=2.54厘米
2.屏幕分辨率
屏幕分辨率是指横纵方向上的像素点数，单位为px，1个像素点=1px
(这里的1px是指物理设备上的一个像素点)
常见移动端设备屏幕分辨率：
iphone6,6s,7,8 1334*750
iponee6plus,7plus,8plus 1920*1080
注：移动端设备一般为 纵向像素*横向像素
3.ppi
屏幕每英寸可以显示的像素点数，即屏幕像素密度，单位为ppi
计算公式：
4.dpr
dpr是devicePixelRatio的简写，指物理像素与逻辑像素的比值
物理像素：屏幕分辨率
逻辑像素：写在css文件中的像素值，即要显示在设备上的像素值
常见设备dpr值：
iphone6,7,8 dpr=2
iphone6plus,7plus,8plus dpr=3
5.移动端meta设置
注：让视图窗口的宽度等于设备的宽度
快捷键：meta:vp+tab键
二、常见移动端布局方案
1.百分比布局(流式布局)
特点：文字流式，控件弹性，图片等比例缩放
顶部和底部的bar不管分辨率怎么变，高度和位置都不变
案例：拉勾网
注：适用于内容较少比较简单的移动端页面
2.等比例缩放布局(rem布局)
特点：使用rem为主要单位进行页面布局，很好的实现了在不同设备上页面等比例缩放
案例：网易
注：适用于页面内容较多较复杂的移动端页面
3.混合布局
特点：混合布局是指将多种布局方式(如flex布局，圣杯布局，百分比布局等)融合在一起实现移动端的屏幕适配的方法
案例：淘宝网
三、移动端相关单位
1.px
像素，相对于屏幕分辨率而言
2.em
相对于父元素字体大小放大或缩小多少倍
1em = 16px
3.rem
相对于根元素字体大小放大或缩小多少倍
4.vw
vw是viewport width的缩写，即视图窗口的宽度
1vw = 视窗宽度的1%
vh是指视图窗口的高度
vmin是vw和vh中较小值
vmax是vw和vh中较大值
css3基础变形
一、css3基础变形
语法： transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移);
1.旋转(rotate)
a) rotateX(180deg) 沿x轴翻转 等价于 rotate3d(1,0,0,180deg)
b) rotateY(180deg) 沿y轴翻转 等价于 rotate3d(0,1,0,180deg)
c) rotateZ(180deg) 沿z轴翻转 等价于 rotate3d(0,0,1,180deg)
d) rotate(60deg) 不指定轴时，是2d空间的旋转，正值为顺时针，负值为逆时针
注：rotate旋转的单位是deg
2.缩放(scale)
a) scaleX(1.5) 沿x轴缩放，默认值为1，不放大不缩小，大于1为放大，小于1为缩小
b) scaleY(1.5) 沿y轴缩放
c) scale(1.5) 沿x轴和y轴同时缩放
d) scale(-1.5) 先翻转后缩放
3.倾斜(skew)
a) skewX(30deg) 沿x轴倾斜
b) skewY(-30deg) 沿y轴倾斜
c) skew(30deg) 不指定轴时，默认沿x轴倾斜
d) skew(30deg,30deg) x轴和y轴同时倾斜
skewX(30deg) skewY(30deg) x轴和y轴同时倾斜
注：两种写法倾斜效果不同
skew倾斜单位为deg
4.位移(translate)
a) translateX(100px) 沿x轴位移，向右为正，向左为负
b) translateY(-100px) 沿y轴位移，向下为正，向上为负
c) translateZ(100px) 沿z轴位移，向前为正，向后为负
d) translate(100px) 不指定轴时，默认沿x轴位移
e) translate(100px,100px) x轴和y轴同时位移
translateX(100px) translateY(100px)x轴和y轴同时位移
◆ 使用变形实现不定宽高元素在屏幕窗口水平垂直都居中，方法如下：
元素{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
◆ 使用变形实现不定宽高的子元素在父元素中水平垂直都居中，方法如下：
父元素{
position:relative;
}
子元素{
position:absolute;
left:50%;
top:50%;
transform:translateX(-50%) translateY(-50%);
}
二、变形综合
当多种变形方式综合在一起时，顺序不同，效果有可能不同，例如：
eg1: transform:rotate(360deg) scale(1.5);
transform:scale(1.5) rotate(360deg);
顺序不同，效果相同
eg2: transform:translateX(300px) rotate(360deg);
transform:rotate(360deg) translateX(300px);
顺序不同，效果不同
三、改变变形元素中心点位置
语法：transform-origin:left|center|right top|center|bottom;
四、设置元素的变形类型
语法：transform-style:flat(默认值)|preserve-3d;
flat 默认值，2d空间的变形
preserve-3d 3d空间的变形
五、透视，井深
语法：perspective:数值+单位;
eg: 父元素{perspective:1500px;}
eg: 子元素{transform:perspective(800px) rotateY(60deg);}
注：perspective主要用来设置元素3d效果的强度
transition过渡动画
一、transition过渡动画
语法：transition:过渡属性 过渡时间 过渡方式 过渡延迟时间;
eg: transition:all 1s;
1.transition-property(过渡属性)
取值：
none 没有属性发生过渡
all 所有发生变化的属性都添加过渡动画
ident 指定发生过渡的属性列表
eg: transition:transform 1s,background 2s,border-radius 3s;
2.transition-duration(过渡时间)
取值：
0 不执行过渡，直接看到结果
time 指定过渡时间，单位为s
3.transition-delay(过渡延迟时间)
取值：
0 不延迟，直接执行过渡动画
正值 按照设定的时间延迟执行过渡动画
负值 设定时间前的动画将会被截断
4.transition-timing-function(过渡方式)
取值：
ease 默认值
linear 匀速运动
ease-in 加速运动
ease-out 减速运动
ease-in-out 慢-快-慢
二、animation动画
☆ 动画关键帧
语法： @keyframes 动画名称{
0%{
属性:属性值;
}
50%{
属性:属性值;
}
…
100%{
属性:属性值;
}
}
@keyframes 动画名称{
from{
属性:属性值;
}
50%{
属性:属性值;
}
…
to{
属性:属性值;
}
}
———————————————–
语法： animation:动画名称 动画执行时间 动画延迟执行时间 动画播放次数 动画播放状态;
1.animation-name(动画名称)
eg: animation:box_ani 1s;
注：此处的动画名称要和@keyframes中的动画名称一致
2.animation-duration(动画执行一次所需时间)
取值：
0 动画不执行
time 正数，单位为s或者ms
3.animation-delay(动画延迟执行时间)
取值：
0 不延迟，动画立即执行
正数 按照设定的时间延迟执行动画
负数 设定时间前的动画将会被截断
4.animation-iteration-count(动画播放次数)
取值：
number 自定义动画执行次数，设置值可为0或正整数
infinite 无限循环播放
5.animation-play-state(设置对象动画的状态)
取值：
running 默认值，运动
paused 动画暂停
6.animation-timing-function(对象动画过渡类型)
取值：
ease
linear 匀速运动
ease-in
ease-out
ease-in-out
step-start 马上转跳到动画结束状态，或者转跳到下一帧，中间没有过渡
step-end 保持动画开始时的状态，直到动画结束时，马上转跳到动画结束状态
steps(n,start|end) n代表动画分几步完成
7. animation-direction(设置对象动画运动的方向)
取值：
normal 默认值，正常方向运动
reverse 与normal运动方向始终相反
alternate 正反方向交替运动，奇数次正方向，偶数次反方向
alternate-reverse 奇数次反方向，偶数次正方向
8.animation-fill-mode (设置对象动画时间之外的状态)
取值：
none 默认值，不设置时间之外的状态
forwards 保持动画结束时的状态
backwards 保持动画开始时的状态
both 动画遵循forwards和backwards两个规则
扩展：
隐藏翻转元素的背面，语法如下：backface-visibility:hidden;
css3背景，渐变，蒙版
一、背景切割
语法：background-clip:border-box|padding-box|content-box;
作用：设置背景在哪个区域可见
border-box 默认值.背景在边框已经边框以内的区域可见
padding-box 背景在padding区域和content区域可见
content-box 背景在content区域可见
二、背景原点
语法：background-origin:border-box|padding-box|content-box;
作用：设置背景图原点的定位区域
padding-box 默认值，背景原点从padding区域开始
border-box 背景原点从border区域开始
content-box 背景原点从content区域开始
三、背景切割&背景原点
可以将背景切割和背景原点结合使用
eg: background-clip:content-box;
background-origin:border-box;
背景原点从border区域开始，背景在content区域可见
四、背景尺寸
语法：background-size:数值|100%|cover|contain;
1.length
该数值用来设置背景图的宽度和高度，第一个值代表宽度，第二个值代表高度，如果省略第二个值，为auto,等比例缩放
eg: background-size:100px 200px; (背景图有可能发生变形)
background-size:100px; (背景图有可能超出容器,不会发生变形)
2.百分比
以容器的百分比来设置背景图的宽度和高度
eg: background-size:100% 100%;(背景图不会超出容器，但是背景图有可能发生变形)
background-size:100%;(背景图有可能超出容器，但是背景图不会发生变形)
3.cover
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像有可能超出容器，背景图不会发生变形
eg: background-size:cover;
4.contain
把图像扩展至最大尺寸，以使宽度和高度 完全适应内容区域。背景图像始终被包含在容器内,背景图不会发生变形
五、rgba模式
语法： background:rgba(r,g,b,a); a代表透明度，取值范围0~1
eg: background:rgba(0,0,0,.4);
注：rgba模式和opacity的区别：
a) 给容器添加opacity,容器中的文字和图片也会跟随透明
b) rgba模式只是给容器的背景添加一定的透明度，容器中的文本和图片不会跟随透明
———————————————–
扩展：hsla模式
语法： background:hsla(h,s,l,a);
h 色调，取值范围0~360
s 饱和度，取值范围0%~100%
l 亮度，取值范围0%~100%
a 透明度，取值范围0~1
———————————————-
六、线性渐变
语法： background:linear-gradient(渐变方向,颜色 起始位置,颜色 起始位置);
eg: background:linear-gradient(to right,red 0%,yellow 30%,blue 50%);
注：重复的线性渐变写法如下：
background:repeating-linear-gradient(to right,red 0%,yellow 15%,blue 25%);
注：设置重复的线性渐变，必须指定渐变的位置
七、径向渐变
语法：background:-webkit-radial-gradient(渐变中心点位置,渐变形状 渐变半径长度,颜色 起始位置,颜色 起始位置);
eg: background:-webkit-radial-gradient(left top,circle closest-side,red 0%,yellow 10%);
注：重复的径向渐变写法：
background:-webkit-repeating-radial-gradient(center,red 0%,yellow 10%);
注：设置重复的径向渐变，必须指定渐变的位置
———————————————–
扩展一 蒙版
语法： -webkit-mask-image:url(图片路径)|使用渐变作为蒙版图片; -webkit-mask-repeat:no-repeat|repeat-x|repeat-y|repeat;
-webkit-mask-position:center;
扩展二 背景在文字区域可见
语法： -webkit-background-clip:text;
注：设置此属性需要将文字颜色设置为透明，即 color:transparent;
扩展三：倒影
语法： -webkit-box-reflect:left|right|above(上)|below(下) 偏移量 倒影渐变;
———————————————–
八、BFC
1.概念
BFC——block formatting context (块级格式化上下文)
2.如何触发BFC
a) 设置了float除none以外的值(left,right)
b) 设置了overflow除visible以外的值(hidden,scroll,auto)
c) 设置了display属性(table-cell,inline-block,flex)
d) 设置position属性(absolute,fixed)
3.BFC的作用
a) 解决上下margin重叠问题
给设置margin的元素外边再嵌套一个父元素，并设置overflow:hidden;这样就给里面的元素创建了一个块级格式化上下文
b) 常用来清除浮动，解决高度塌陷问题
给父元素设置overflow:hidden;就给里面浮动的子元素创建了一个块级格式化上下文，闭合了浮动
c) 用于实现多栏布局
与浮动元素相邻的已生成BFC的元素不能与浮动元素互相覆盖。利用该特性可以作为多栏布局的一种实现方式