Cascading Style Sheet – 层叠样式表
--> 主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
文字控制属性
字号 – font-size
字体 – font-family
颜色 – color
对齐 – text-align
加粗 – font-weight
文字风格 – font-style
文本修饰（线段） – text-decoration
行高 – line-height
首行缩进：text-indent：2em
区块控制属性
宽度 – width
高度 – height
背景 – background（盒子默认是透明状态）
描边 – border
外边距 – margin
内边距 – padding
列表项目符号 – list-style：none；
禁止任意拖拽 – resize：none；
浮动：float
overflow
定位：position
清除浮动：clear
CSS三大特性 –> 层叠 继承 优先级
CSS层叠性
所谓层叠性是指多种CSS样式的叠加
是浏览器处理冲突的一个能力,如果一个属性通过两个选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。
CSS继承性
所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可
注意：
恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）
CSS优先级
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。
注意
继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。
CSS特殊性（Specificity）
关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准
specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。
总结优先级：
- 使用了 !important声明的规则。
- 内嵌在 HTML 元素的 style属性里面的声明。
- 使用了 ID 选择器的规则。
- 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
- 使用了元素选择器的规则。
- 只包含一个通用选择器的规则。
CSS初识
位置
–> head标签内部 (一般书写习惯在title下面)
规则
1选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
2.属性和属性值以“键值对”的形式出现。
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
4.属性和属性值之间用英文“:”连接。
5.多个“键值对”之间用英文“;”进行区分。
可以用段落 和 表格的对齐的演示。
准备环境
–> html只认识标签,css不属于标签,因此需要准备一个环境
–> 一对style标签,并且要将style标签添加一个属性type = “text / css”(一位纯文本的css格式)
p{color :#F00;font-size:80px;font-family:’黑体’;}
css样式条
–> 确定选中的对象
–> 紧跟css键值对(k:v;) 并在一对英文大括号里面
文字控制三属性
颜色 –> color
字号 –> font-size
用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较
字体 –> font-family
用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等
p{ font-family:”微软雅黑”;}
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体
1. 现在网页中普遍使用14px+。
2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
3. 各种字体之间必须使用英文状态下的逗号隔开。
4. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
5. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;。
6. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
文字加粗 font-weight
–> 属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）
–> 数字 400 等价于 normal，而 700 等价于 bold
字体风格font-style
–> 属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：
normal：默认值，浏览器会显示标准的字体样式。
italic：浏览器会显示斜体的字体样式。
oblique：浏览器会显示倾斜的字体样式。
内容对齐: text-align: left/center/right
font: 综合设置
选择器{font: font-style font-weight font-size/line-height font-family;}
使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
实体化三属性
宽度 –> width
高度 –> height
背景色–> background
css书写方式
行内式
是通过标签的style属性来设置元素的样式，其基本语法格式如下：
<标签名 style=”属性1:属性值1; 属性2:属性值2; 属性3:属性值3;”> 内容
内嵌式
将css嵌入到html页面
结构与样式实现半分离
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方
此CSS对整个页面都其作用
外部链接式/外链式
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件
作用域最广泛–谁用谁知道
通过link标签将外部样式表文件链接到HTML文档中
语法格式
前台工作人员最常用的书写方式。外部链接式才是实现了真正的结构与样式分离
属性
1. href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
2. type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
3. rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
制作步骤
1、新建单独的一个css后缀文件；
2、利用link标签将单独的css文件引入到html页面
三种样式表总结
样式表 优点 缺点 使用情况 控制范围
行内样式表 书写方便，权重高 没有实现样式和结构相分离 较少 控制一个标签（少）
内嵌样式表 部分结构和样式相分离 没有彻底分离 较多 控制一个页面（中）
外部样式表 完全实现结构和样式相分离 需要引入 最多，强烈推荐 控制整个站点（多）
标签显示模式（display）
新标签
div：大容器、大盒子。通常用作网页的布局和排版，结构的搭建；内部可以存放任何标签、任何内容。
span：小容器、小盒子、通常存放特殊效果的文字或小图标、小图片等等。
显示模式
就是盒子在页面中的显示方式
所有html标签按显示模式划分为两类：块级标签和行内标签
块级标签：最具代表性的标签就是div。特点：独占一行，可以设置宽高并能生效
行内标签：最具代表性的标签就是span。特点：一行可以共存多个，可以设置宽高但是不生效，自身尺寸受内容的控制。
显示模式之间的转换
属性：display
转化为块 – block；
转换为行内 – inline;
行内块（由css制造出来的显示模式） –> inline-block；特点：既有块级标签的优点（成功设置宽高）又有行内标签的优点（一行可以共存多个）
隐藏
display：none；不占位隐藏
visibility：hidden；占位隐藏
块级元素(block-level)
每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
常见的块元素有
~
、
、
-
、
- 、
- 等，其中
标签是最典型的块元素。
块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。
行内元素(inline-level)
行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
常见的行内元素有、、、、、、、、等，其中标签最典型的行内元素。、
行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。（a特殊）
注意：
1. 只有 文字才 能组成段落 因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
2. 链接里面不能再放链接。
块级元素和行内元素区别
块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。
行内元素的特点:
（1）和相邻行内元素在一行上.
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。
行内块元素（inline-block）
在行内元素中有几个特殊的标签——、、，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。
选择器
定义：选中的对象/控制的对象
定义选择器
但凡是id选择器，声明的时候都要以#号开头，紧跟id选择器的名称（自定义），规则为：不能出现中文；不能使用特殊符号；不能以数字开头，可以以数字结尾
1 #zidingyi{ background:green;}
2 #li01{ background:red;}
标签选择器
就是以HTML标签名称命名的选择器,为页面中某一类标签指定统一的CSS样式
例
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
id选择器
“#”进行标识，后面紧跟id名，
id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
经验：id选择器分定义和应用两个步骤，但不分先后顺序
必须具有唯一性
应用选择器
直接在标签身上添加属性：id=“id选择器的名称”
1
- 111
- 2
- 111
- 3
- 111
- 注意：在一个页面中，同一个id名称只能出现1次，通常为开发人员常用的选择器
类选择器
定义选择器
要求以点开头，后面紧跟选择器名称，名称自定义，规则同id选择器应用选择器
在首标签身上添加class=“类选择器的名称”
1 .box{ background:green;}
2这是div
3这是p
4 如果多个类选择器使用,class = “类名1 类名2…”
经验：类选择器是前台人员最常用的选择器
类选择器最大的优势是可以为元素对象定义单独或相同的样式。多类名选择器:
- 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
- 各个类名中间用空格隔开。
id选择器和类选择器的区别
W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
类选择器（class） 好比人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜
id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。id选择器和类选择器最大的不同在于 使用次数上。
选择器的权重
Id选择器权重大于类选择器大于标签选择器
谁针对性高谁优先生效
！important 提权 – 可以将权重提高到最高
注意：！important书写在键值对分号之前属性选择器
语法:
选择器名 [属性名 = ‘属性值’]通配符选择器
“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
作用：选中所有标签（包括废标签）
经验：由于通配符可以选中所有标签，针对性最低，权重最低伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。
伪类 用 2个点 就是 冒号 比如 :link{}链接伪类选择器
- :link /* 未访问的链接 */
- :visited /* 已访问的链接 */
- :hover /* 鼠标移动到链接上 */
:active /* 选定的链接 */
注意写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序。 love hate 爱上了讨厌 记忆法 或者 lv 包包 非常 hao
结构(位置)伪类选择器（CSS3)
:first-child :选取属于其父元素的首个子元素的指定选择器
:last-child :选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型
:nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n 可以是数字、关键词或公式
nth-child(even) 第一个开始偶数项
odd –> 奇数
even –> 偶数
3n –> 0,3,6….目标伪类选择器(CSS3)
:target目标伪类选择器 :选择器可用于选取当前活动的目标元素
:target {
color: red;
font-size: 30px;
}复合选择器/高级选择器
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。
后代选择器
后代选择器又称为包含选择器，用来选择元素或元素组的后代，
写法
外层标签写在前面，内层标签写在后面，中间用空格分隔。
当标签发生嵌套时，内层标签就成为外层标签的后代。
语法选择器 选择器{};
一个空格表示包含（嵌套）关系，不管空格前后是哪种基础选择器，只要有空格就是后代选择器
1 /ul li{ background:green;}/
2 .father .son{ background:blue;}它能选择任何包含在内 的标签
子元素选择器
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。
比如： .demo > h3 {color: red;} 说明 h3 一定是demo 亲儿子。 demo 元素包含着h3。交集选择器
交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。
比如： p.one 选择的是： 类名为 .one 的 段落标签。
并集选择器
并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。
作用：控制页面中样式相同的盒子
一个逗号表示合并关系
1 div,p,h1,span{ background:blue;}
并集选择器 和 的意思， 就是说，只要逗号隔开的，所有选择器都会执行后面样式。指定标签选择器
不管标签身上有类选择器也好，或者id选择器也好，直接在标签选择器后面连着写，别的什么都不加
1 p.box{ background:blue;}
比如 .one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。 通常用于集体声明。伪元素选择器（CSS3)
- E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
- E::first-line 文本第一行；
- E::selection 可改变选中文本的样式；
4、E::before和E::after
在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。
E:after、E:before
在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，
在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。
E:after、E:before后面的练习中会反复用到，目前只需要有个大致了解
“:” 与 “::” 区别在于区分伪类和伪元素
注释
CSS注释 – /注释内容/
HTML注释 –
作用：能够使加了注释的代码不被浏览器渲染。一般工作中，利用添加注释的方式给工作人员添加帮助信息
border属性
border属性是复合属性 – 允许链接多个属性值的属性即是复合属性
允许书写3个属性值，分别是：边框线粗细、线条样式、边框线颜色。
CSS要求复合属性各个属性值之间用空格隔开（属性值不分先后顺序）线条样式
实线 – solid
虚线 – dashed
1 border:1px dashed green;css的层叠性和继承性
层叠性 – 覆盖
后写的css属性覆盖先写的css属性；后写css样式条覆盖先写的css样式条（前提选择器权重相同的情况下）
继承性
某些css属性会从父级继承给子级，某些则不会继承
CSS属性分类
文字控制属性
所有文字控制属性都能继承
区块控制属性
所有区块控制属性都不能继承
区块控制属性就是控制盒子的属性background
background-image
语法
background-image : none | url (url)
参数：
none : 无背景图（默认的）
url : 使用绝对或相对地址指定背景图像 background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。 如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。
小技巧： 我们提倡 背景图片后面的地址，url不要加引号。background属性是一个复合属性，允许连接多个属性值，属性值之间用空格隔开
background：背景色 背景图 平铺方式 背景图定位；（经验：属性值之间不分先后顺序）平铺方式
语法background-repeat : repeat | no-repeat | repeat-x | repeat-y
平铺 – repeat（默认值）
x轴平铺 – repeat-x
y轴平铺 – repeat-y
不平铺 – no-repeat
设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。背景位置 –> position
语法
background-position : length || length
background-position : position || position参数：
length : 百分数 | 由浮点数字和单位标识符组成的长度值。
position : top | center | bottom | left | center | right说明：
设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。注意：
1. position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
2. 如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。
实际工作用的最多的，就是背景图片居中对齐了。/background-position: left top; 默认的是 左上角 /
/background-position: bottom right ; 方位名词没有顺序，谁在前都可以 /
/* background-position: center center ; */
/* background-position: left; 如果方位名词只写一个，另外一个默认为center */
/* background-position: 10px 30px;
2. 精切单位 第一值一定是x坐标 第二个值一定是y坐标 */取值：
1.具体像素单位数值；
2.方向英文（left，top，right，bottom，center）注意：背景图定位取值：水平方向位置 垂直方向位置，且顺序不可以颠倒
1 body{ background:green url(bg.gif) no-repeat left bottom; height:700px;}背景附着
background-attachment : scroll | fixed
参数：
scroll : 背景图像是随对象内容滚动fixed : 背景图像固定
说明：
设置或检索背景图像是随对象内容滚动还是固定的。背景简写
background属性的值的书写顺序官方并没有强制标准的。
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;背景透明(CSS3)
CSS3支持背景半透明的写法语法格式是:
background: rgba(0,0,0,0.3);
最后一个参数是alpha 透明度 取值范围 0~1之间
注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不收影响。
文字和边框透明 都是 rgba 的格式来写
color:rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.3);背景缩放(CSS3)
通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。
其参数设置如下：
a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）
b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。
c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。
background-image: url(‘images/gyt.jpg’);
background-size: 300px 100px;
/* background-size: contain; */
/* background-size: cover; */
多背景(CSS3)
以逗号分隔可以设置多背景，可用于自适应布局background-image: url(‘images/gyt.jpg’),url(‘images/robot.png’);
多标记构图法
精髓：标签要层层嵌套，并且保证标签的显示区域是完全相等
1
2
3
4
5
6
7外观属性
color:文本颜色
color属性用于定义文本的颜色，其取值方式有如下3种：
1.预定义的颜色值，如red，green，blue等。
2.十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。
3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。行高 line-height
属性
用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px
水平对齐方式:text-align
text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：
left：左对齐（默认值）
right：右对齐
center：居中对齐首行缩进:text-indent
text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。
1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度letter-spacing:字间距
letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。
word-spacing:单词间距
word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。
word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距。颜色半透明(css3)
文字颜色到了CSS3我们可以采取半透明的格式了语法格式如下：
color: rgba(r,g,b,a) a 是alpha 透明的意思 取值范围 0~1之间 color: rgba(0,0,0,0.3)文字垂直居中
小技巧：设置行高取值和盒子自身高度取值相等
1 div{ width:300px; height:200px; background:pink; text-align:center; line-height:200px;}文字阴影(CSS3)
文本修饰属性
1 文字线段 – text-decoration
none – 无线段
overline – 顶划线
line-through – 删除线/贯穿线
underline – 下划线2 加粗属性
不加粗 – normal
10.3 字体风格
italic – 倾斜
normal – 正常超链接的伪类
伪类其实就一个状态，超链接有4个状态供我们学习：
访问前（默认状态） – ：link
访问后 – ：visited
鼠标移上 – ：hover
点击状态 – ：active
注意：当要同时修改超链接的四个状态的时候，一定要遵循顺序：L~V~H~A
经验：一般工作中，超链接的默认状态和访问后状态样式完全相同，可以并集选择器放到一起书写，也有一种最优的写法：直接书写a标签选择器，代表的是同时选中超链接的所有状态，万一哪个状态特殊，再单独设置样式；一般情况下，默认状态的超链接都没有下划线，目的就是想要让页面干净整洁
1 /.nav a:link,.nav a:visited{ background:url(images/gray.JPG); width:88px; height:44px; display:inline-block; color:#3e3e3e; font-weight:bold; text-decoration:none; line-height:44px;}/
2 .nav a{ background:url(images/gray.JPG); width:88px; height:44px; display:inline-block; color:#3e3e3e; font-weight:bold; text-decoration:none; line-height:44px;}
3 .nav a:hover{ background:url(images/red.JPG); color:#fff;}盒子模型Box Model
盒子模型的组成部分
把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。元素框(element box) –> 所有的文档元素(标签)都会生成一个矩形框
–>描述一个文档元素在网页布局所占的位置大小
–>每个盒子除了有自己的大小和位置外,还影响着其他盒子的大小和位置盒子边框（border）
语法：
border : border-width || border-style || border-color边框属性—设置边框样式（border-style）
none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线
表格的细线边框
table{ border-collapse:collapse; }
border-collapse:collapse; 表示边框合并在一起。设置内容 样式属性 常用属性值
上边框 border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度 样式 颜色;
下边框 border-bottom-style:样式;border- bottom-width:宽度;border- bottom-color:颜色;border-bottom:宽度 样式 颜色;
左边框 border-left-style:样式; border-left-width:宽度;border-left-color:颜色;border-left:宽度 样式 颜色;
右边框 border-right-style:样式;border-right-width:宽度;border-right-color:颜色;border-right:宽度 样式 颜色;
样式综合设置 border-style:上边 [右边 下边 左边]; none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线
宽度综合设置 border-width:上边 [右边 下边 左边]; 像素值
颜色综合设置 border-color:上边 [右边 下边 左边]; 颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
边框综合设置 border:四边宽度 四边样式 四边颜色;圆角边框(CSS3)
语法
Border-radius: 水平半径/垂直半径；
一般我们垂直半径都是省略的默认和水平半径一样
border-radius: 左上角 右上角 右下角 左下角;内边距（padding）
设置内边距。 是指 边框与内容之间的距离。
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
后面跟几个数值的意思
值的个数 表达意思
1个值 padding：上下左右边距 比如padding: 3px; 表示上下左右都是3像素
2个值 padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素
3个值 padding：上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
4个值 padding:上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针外边距（margin）
设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边
取值顺序跟内边距相同。
外边距实现盒子居中
条件：
1. 必须是块级元素。
2. 盒子必须指定了宽度（width）左右的外边距都设置为auto，就可使块级元素水平居中
.header{ width:960px; margin:0 auto;}清除元素的默认内外边距
- {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
行内元素是只有左右内外边距的，是没有上下内外边距的
外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并
相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）
嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
解决方案：
- 可以为父元素定义1像素的上边框或上内边距。
- 可以为父元素添加overflow:hidden。
content宽度和高度
■ 使用宽度属性width和高度属性height可以对盒子的大小进行控制。 ■ width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。 ■ 大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和
盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和
注意：
1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。
2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。盒子模型布局稳定性
按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。
原因：
- margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。
- padding 会影响盒子大小， 需要进行加减计算（麻烦）其次使用。
- width 没有问题我们经常使用宽度剩余法 高度剩余法来做。
CSS3盒模型
CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box
两种情况：
1、box-sizing: border-box 盒子大小为 width
2、box-sizing: content-box 盒子大小为 width + padding + border
注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。
盒子阴影
语法格式：
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；
img {
border:10px solid orange;
box-shadow:3px 3px 5px 4px rgba(0,0,0,1);
}- 前两个属性是必须写的。其余的可以省略。
- 外阴影 (outset) 但是不能写 默认 想要内阴影 inset
浮动(float)
浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
选择器{float:属性值;}
属性值 描述
left 元素向左浮动
right 元素向右浮动
none 元素不浮动（默认值）浮动详细内幕特性
浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。浮动首先创建包含块的概念（包裹）。就是说， 浮动的元素总是找离它最近的父级元素对齐。但是不会超出内边距的范围。
浮动的元素排列位置，跟上一个元素（块级）有关系。
–> 如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；
–> 如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。
–> 一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示
–> 元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。总结
浮动的目的就是为了让多个块级元素同一行上显示。
float 浮 漏 特
浮： 加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。
漏： 加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏 给了标准流的盒子。
特： 特别注意，首先浮动的盒子需要和标准流的父级搭配使用， 其次 特别的注意浮动可以使元素显示模式体现为行内块特性。
版心和布局流程
“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。布局流程：
1、确定页面的版心（可视区）。
2、分析页面中的行模块，以及每个行模块中的列模块。
3、制作HTML结构 。
4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。
清除浮动本质
方法1
选择器{clear:属性值;}属性值 描述
，或则其他标签br等亦可。
left 不允许左侧有浮动元素（清除左侧浮动的影响）
right 不允许右侧有浮动元素（清除右侧浮动的影响）
both 同时清除左右两侧浮动的影响
额外标签法
是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如父级添加overflow属性方法
可以通过触发BFC的方式，可以实现清除浮动效果
可以给父级添加： overflow为 hidden|auto|scroll 都可以实现。使用after伪元素清除浮动: after 方式为空元素的升级版，好处是不用单独加标签了
.clearfix:after { content: “.”; display: block; height: 0; clear: both; visibility: hidden; }.clearfix {zoom: 1;} / IE6、7 专有 */
○ 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。代表网站： 百度、淘宝网、网易等
○ 注意： content:”.” 里面尽量跟一个小点，或者其他，尽量不要为空，否则再firefox 7.0前的版本会有生成空格。使用before和after双伪元素清除浮动
.clearfix:before,.clearfix:after {
content:”“;
display:table; /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
优点： 代码更简洁缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
代表网站： 小米、腾讯等
定位position
定位模式和边偏移
边偏移
边偏移属性 描述
top 顶端偏移量，定义元素相对于其父元素上边线的距离
bottom 底部偏移量，定义元素相对于其父元素下边线的距离
left 左侧偏移量，定义元素相对于其父元素左边线的距离
right 右侧偏移量，定义元素相对于其父元素右边线的距离定位模式(定位的分类)
选择器{position:属性值;}
position属性的常用值
值 描述
static 自动定位（默认定位方式）
relative 相对定位，相对于其原文档流的位置进行定位
absolute 绝对定位，相对于其上一个已经定位的父元素进行定位
fixed 固定定位，相对于浏览器窗口进行定位静态定位(static)
静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。相对定位relative
相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。如下图所示，即是一个相对定位的效果展示：
注意：
- 相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
- 其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）
就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。（相对定位不脱标）
如果说浮动的主要目的是 让多个块级元素一行显示，那么定位的主要价值就是 移动位置， 让盒子到我们想要的位置上去。绝对定位absolute
[注意] 如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。
当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。
注意： 绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。
若所有父元素都没有定位，以浏览器为准对齐(document文档)。
绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。子级是绝对定位的话， 父级要用相对定位
因为子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方。
父盒子布局时，需要占有位置，因此父亲只能是 相对定位.
绝对定位的盒子水平/垂直居中
普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了
定位的盒子也可以水平或者垂直居中，有一个算法。
首先left 50% 父盒子的一半大小
然后走自己外边距负的一半值就可以了 margin-left。固定定位fixed(认死理型)
固定定位是绝对定位的一种特殊形式，类似于 正方形是一个特殊的 矩形。它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。
当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显 示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。
固定定位有两点：
固定定位的元素跟父亲没有任何关系，只认浏览器。
固定定位完全脱标，不占有位置，不随着滚动条滚动。叠放次序（z-index）
注意：
- z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
- 如果取值相同，则根据书写顺序，后来居上。
- 后面数字一定不能加单位。
- 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。
四种定位总结
定位模式 是否脱标占有位置 是否可以使用边偏移 移动位置基准
静态static 不脱标，正常模式 不可以 正常模式
相对定位relative 不脱标，占有位置 可以 相对自身位置移动（自恋型）
绝对定位absolute 完全脱标，不占有位置 可以 相对于定位父级移动位置（拼爹型）
固定定位fixed 完全脱标，不占有位置 可以 相对于浏览器移动位置（认死理型）定位模式转换
跟 浮动一样， 元素添加了 绝对定位和固定定位之后， 元素模式也会发生转换， 都转换为 行内块模式，
因此 比如 行内元素 如果添加了 绝对定位或者 固定定位后 浮动后，可以不用转换模式，直接给高度和宽度就可以了。元素的显示与隐藏
在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。
他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。 最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫！！display 显示
display 设置或检索对象是否及如何显示。
display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思。
特点： 隐藏之后，不再保留位置。visibility 可见性
设置或检索是否显示对象。
visible : 对象可视
hidden : 对象隐藏
特点： 隐藏之后，继续保留原有位置。（停职留薪）overflow 溢出
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible : 不剪切内容也不添加滚动条。
auto : 超出自动显示滚动条，不超出不显示滚动条
hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll : 不管超出内容否，总是显示滚动条CSS高级技巧
CSS用户界面样式
鼠标样式cursor
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
cursor : default 小白 | pointer 小手 | move 移动 | text 文本轮廓 outline
是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
outline : outline-color ||outline-style || outline-width
但是我们都不关心可以设置多少，我们平时都是去掉的。
最直接的写法是 ： outline: 0;
防止拖拽文本域resize
resize：none 这个单词可以防止 火狐 谷歌等浏览器随意的拖动 文本域。
右下角可以拖拽：
右下角不可以拖拽：
vertical-align 垂直对齐
vertical-align : baseline |top |middle |bottom
vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片和表单等。
图片和文字对齐
所以我们知道，我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。去除图片底侧空白缝隙
很重要特性你要记住： 如果一个元素没有基线，比如图片或者表单等行内块元素，则他的底线会和父级盒子的基线对齐。 这样会造成一个问题，就是图片底侧会有一个空白缝隙
解决的方法就是：
1. 给img vertical-align:middle | top等等。 让图片不要和基线对齐。
2.给img 添加 display：block; 转换为块级元素就不会存在问题了。溢出的文字隐藏
word-break:自动换行
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。text-overflow 文字溢出
text-overflow : clip | ellipsis
设置或检索是否使用一个省略标记（…）标示对象内文本的溢出
clip : 不显示省略标记（…），而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记（…）CSS精灵技术（sprite）
CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图，
使用 –> CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位字体图标
优点
可以做出跟图片一样可以做的事情,改变透明度、旋转度，等..
但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等…
本身体积更小，但携带的信息并没有削减。
几乎支持所有的浏览器字体图标使用流程
总体来说，字体图标按照如下流程：滑动门
一般的经典布局都是这样的：
-
导航栏内容
- 总结：
1. a 设置 背景左侧，padding撑开合适宽度。
2. span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。
3. 之所以a包含span就是因为 整个导航都是可以点击的。一下不知要掌握到什么程度,以后看
伸缩布局(CSS3)
CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。
主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的
方向：默认主轴从左向右，侧轴默认从上到下
主轴和侧轴并不是固定不变的，通过flex-direction可以互换。Flex布局的语法规范经过几年发生了很大的变化，也给Flexbox的使用带来一定的局限性，因为语法规范版本众多，浏览器支持不一致，致使Flexbox布局使用不多
2、各属性详解**
a、flex-direction调整主轴方向（默认为水平方向）
b、justify-content调整主轴对齐
c、align-items调整侧轴对齐
d、flex-wrap控制是否换行
e、align-content堆栈（由flex-wrap产生的独立行）对齐
f、flex-flow是flex-direction、flex-wrap的简写形式
g、flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
h、order控制子项目的排列顺序，正序方式排序，从小到大
此知识点重在理解，要明确找出主轴、侧轴、方向，各属性对应的属性值before和after伪元素
过渡(CSS3)
过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。
语法格式:
transition: 要过渡的属性 花费时间 运动曲线 何时开始;属性 描述 CSS
transition 简写属性，用于在一个属性中设置四个过渡属性。 3
transition-property 规定应用过渡的 CSS 属性的名称。 3
transition-duration 定义过渡效果花费的时间。默认是 0。 3
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。 3
transition-delay 规定过渡效果何时开始。默认是 0。 3
运动曲线示意图：img {
width:80px; height: 80px; border:8px solid #ccc; border-radius: 50%;
transition:transform 0.5s ease-in 0s;
}
img:hover {
transform:rotate(180deg);
}
2D变形(CSS3)
转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
变形转换 transform
● 移动 translate(x, y)translate(50px,50px);
使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。
可以改变元素的位置，x、y可为负值；
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x)仅水平方向移动（X轴移动）
translateY(Y)仅垂直方向移动（Y轴移动）.box {
width: 499.9999px;
height: 400px;
background: pink;
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%); /* 走的自己的一半 */
}
让定位的盒子水平居中
● 缩放 scale(x, y)transform:scale(0.8,1);
可以对元素进行水平和垂直方向的缩放。该语句使用scale方法使该元素在水平方向上缩小了20%，垂直方向上不缩放。
scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大
● 旋转 rotate(deg)
可以对元素进行旋转，正值为顺时针，负值为逆时针；transform:rotate(45deg);
1. 当元素旋转以后，坐标轴也跟着发生的转变
2. 调整顺序可以解决，把旋转放到最后
3. 注意单位是 deg 度数
案例旋转扑克牌
body {
background-color: skyblue;
}
.container {
width: 100px;
height: 150px;
border: 1px solid gray;
margin: 300px auto;
position: relative;
}
.container > img {
display: block;
width: 100%;
height: 100%;
position: absolute;
transform-origin: top right;
/* 添加过渡 */
transition: all 1s;
}
.container:hover img:nth-child(1) {
transform: rotate(60deg);
}
.container:hover img:nth-child(2) {
transform: rotate(120deg);
}
.container:hover img:nth-child(3) {
transform: rotate(180deg);
}
.container:hover img:nth-child(4) {
transform: rotate(240deg);
}
.container:hover img:nth-child(5) {
transform: rotate(300deg);
}
.container:hover img:nth-child(6) {
transform: rotate(360deg);
}
● 倾斜 skew(deg, deg)transform:skew(30deg,0deg);
该实例通过skew方法把元素水平方向上倾斜30度，处置方向保持不变。
可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。5.transform-origin可以调整元素转换的原点
div{transform-origin: left top;transform: rotate(45deg); } /* 改变元素原点到左上角，然后进行顺时旋转45度 */
案例： 菱形照片 三角盒子
3D变形
左手坐标系
伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度，如下图
rotateX()
就是沿着 x 立体旋转.img {
transition:all 0.5s ease 0s;
}
img:hove {
transform:rotateX(180deg);
}
rotateY()
沿着y轴进行旋转img {
transition:all 0.5s ease 0s;
}
img:hove {
transform:rotateX(180deg);
}
rotateZ()
沿着z轴进行旋转
img {
transition:all .25s ease-in 0s;
}
img:hover {
/* transform:rotateX(180deg); */
/* transform:rotateY(180deg); */
/* transform:rotateZ(180deg); */
/* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg); */
}透视(perspective)
电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
注：并非任何情况下需要透视效果，根据开发需要进行设置。
perspective有两种写法
1. 作为一个属性，设置给父元素，作用于所有3D转换的子元素
2. 作为transform属性的一个值，做用于元素自身
理解透视距离原理：开门案例
body {
}
.door {
width: 300px;
height: 300px;
margin: 100px auto;
border: 1px solid gray;
perspective: 1000px;
background: url(‘images/dog.gif’) no-repeat center/cover;
position: relative;
}
.door > div {
box-sizing: border-box;
border: 1px solid black;
}
.left {
float: left;
width: 50%;
height: 100%;
background-color: brown;
transform-origin: left center;
transition: 1s;
position: relative;
}
.left::before {
content: ”;
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
top: 50%;
right: 0px;
transform: translateY(-10px);
border: 1px solid whitesmoke;
}
.right {
width: 50%;
height: 100%;
float: left;
background-color: brown;
transform-origin: right center;
transition: 1s;
position: relative;
}
.right::before {
content: ”;
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
top: 50%;
left: 0px;
transform: translateY(-10px);
border: 1px solid whitesmoke;
}
.door:hover .left {
transform: rotateY(-130deg);
}
.door:hover .right {
transform: rotateY(130deg);
}
translateX(x)
仅水平方向移动**（X轴移动）主要目的实现移动效果
translateY(y)
仅垂直方向移动（Y轴移动）translateZ(z)
transformZ的直观表现形式就是大小变化，实质是XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。比如设置了perspective为200px;那么transformZ的值越接近200，就是离的越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了，我相信你正常情况下，是看不到自己的后脑勺的。
3D呈现（transform-style）
设置内嵌的元素在 3D 空间如何呈现，这些子元素必须为转换原素。
flat：所有子元素在 2D 平面呈现
preserve-3d：保留3D空间
3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。
一般而言，该声明应用在3D变换的兄弟元素们的父元素上。
翻转盒子案例(百度钱包)
body {
margin: 0;
padding: 0;
background-color: #B3C04C;
}
.wallet {
width: 300px;
height: 300px;
margin: 50px auto;
position: relative;
transform-style: preserve-3d;
transition: all 0.5s;
}
.wallet::before, .wallet::after {
content: ”;
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-image: url(./images/bg.png);
background-repeat: no-repeat;
}
.wallet::before {
background-position: right top;
transform: rotateY(180deg);
}
.wallet::after {
background-position: left top;
transform: translateZ(2px);
}
.wallet:hover {
transform: rotateY(180deg);
}动画(CSS3)
动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
语法格式：
animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意r
@keyframes 动画名称 {
from{ 开始位置 } 0%
to{ 结束 } 100%
}
animation-iteration-count:infinite; 无限循环播放
animation-play-state:paused; 暂停动画”
3841
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
