css(CascadingStyle sheets)
css称为css样式或层叠样式表，主要用于设置HTML页面的文字内容(字体、大小、对齐方式等)
图片的外形(宽高、边框样式、边距)、以及版面的布局等外观显示样式。
规则：
h1 {color:red; font-size:25px;}
h1 选择器
color 属性
red 值
color:red; 值
注意：
1、选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
2、属性和属性值以 键值对 的形式出现。
3、属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
4、属性和属性值之间用英文“:”连接
5、多个“键值对”之间用英文“;”进行区分
一，字体样式属性
1，font-size:字号大小
font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。
其中相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少
相对长度单位：
pm: 相对于当前对象内文本的字体尺寸
px: 像素
绝对长度单位：
in 英寸
cm 厘米
mm 毫米
pt 点
2，font-family:字体
font-family属性用于设置字体
例子：p{font-family:"微软雅黑";}
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体
常用技巧：
1、现在网页中普遍使用14px+
2、尽量使用偶数的数字字号，ie6等老式浏览器支持奇数会有bug
3、各种字体之间必须使用英文状态下的逗号隔开
4、中文字体需要加英文状态的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体必须位于中文字体名之前
5、如果字体中包含空格、#、$等符号，则改字体必须加英文状态下的单引号或双引号，例如：font-family:"Time New Roman"
6、尽量使用系统默认字体，保证在任何用户浏览器中都能正确显示
Unicode字体
在css中设置字体名称，直接写中文是可以的，但是在文件编码(GB2313,UTF-8)不匹配是会产生乱码的错误。
XP系统不支持微软雅黑的中文字体
方案一：可以使用英文来替代，比如 font-family:"Microsoft Yahei"
方案二：在Css直接使用Unicode编码来写字体名称可以避免这些错误。使用Unicode写中文体名称，浏览器是可以正确的解析
font-family:"\5FAE\8F6F\96C5\9ED1"，表示设置字体为“微软雅黑”。
font-weight:字体粗细
字体加速除了用b和strong标签之外，可以使用CSS来实现，但是CSS是没有语义的。
font-weight属性用于定义字体的属性，其可用属性值：normal bold bolder,lighter,100~900（100的整数）
技巧
数字400等价于normal,而700等价于bold，但是我们更喜欢用数字来表示
font-style:字体风格
字体倾斜除了使用 i 和 em标签之外，可以使用CSS来实现，但是CSS是没有语义的
normal：默认值，浏览器会显示标准的字体样式
italic:浏览器会显示斜体的字体样式
oblique：浏览器会显示倾斜的字体样式
技巧：
平时我们很少给字体加斜体，反而喜欢给斜体标签(em,i)改为普通样式
font:综合设置字体样式(简写)
font属性用于对字体样式进行综合设置，其基本语法格式如下
选择器{font:font-style font-weight font-size/line-height font-family}
样式 粗细 大小/行高 字体
使用font属性时，必须按上面的语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开
注意：其中不需要设置的属性可以省略(取默认值)，但必须保留font-size和font-family属性，否则font属性将不起作用。
二、开发者工具(Chrome)
F12 或 shift+ctrl+i 打开开发者工具
技巧：不多说
三、选择器
指定应用特定的HTML元素，需要找到该目标元素。
1、标签选择器(元素选择器)
标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为界面中某一类标签指定统一的CSS样式。
语法：
标签名{属性1:属性值; 属性2:属性值 属性3:属性值;}
或者
元素名{属性1:属性值; 属性2:属性值 属性3:属性值;}
标签选择器最大的优点是能快速为界面中同类型的标签统一样式，同时这也是他的缺点
不能设计差异化样式。
2、类选择器
类选择器使用"."(英文点号)进行标识，后面紧跟类名
语法：
.类名{属性1:属性值; 属性2:属性值 属性3:属性值;}
标签调用的时候用: class="类名" 即可;
类选择器最大的优势是可以为元素对象定义单独或相同的样式。
技巧：
1，长名称或词组可以使用中横线来为选择器命名。
2，不建议使用"_"下划线来命名CSS选择器
命名规范：
http://www.divcss5.com/jiqiao/j4.shtml
或百度一大堆
3、多类名选择器
可以给标签指定多个类名，从而达到更多的选择目的。
注意：
1）样式显示效果跟HTML元素中的类名先后顺序没有关系，受CSS样式书写的上下顺序有关
也就是，两个类选择器使用重复的属性，会显示的是顺序在下面那一个选择器的样式
2）各个类名中间用空格隔开
多类名选择器在后期布局比较复杂的情况下，还是较多使用的
4、ID选择器
id选择器使用“#”进行标识，后面紧跟id名
语法：
#id名{属性1:属性值; 属性2:属性值 属性3:属性值;}
该语法中，id名即可为html元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应
于文档中某一个具体的元素，用法基本和类选择器相同。
5,id选择器和类选择器的区别
W3C标准规定，在同一个界面内，不允许有相同名字的id对象出现，但是允许相同名字的class
类选择器好比身份证的人名。id选择器好比身份证的身份证号码，只有一个
6、通配符选择器
通配符选择器用“*”号表示，他是所有选择器中作为范围最广的，能匹配页面中所有的元素。
*{属性1:属性值; 属性2:属性值 属性3:属性值;}
例如下面的代码，使用通配符选择器定义css样式，清除所有HTML标记的默认边框
*{margin:0;}
注意：
认识就好，平时少用
7，伪类选择器
也是一个选择器，伪类选择器用于向某些选择器添加特殊的效果，
比如：给链接添加特殊效果。
伪类选择器使用的是2个点 比如: :link{}
链接伪类选择器
:link 未访问的链接 (点击过后就会一直是已经访问的链接状态)
:visited 已访问的链接
:hover 鼠标移动到链接上的效果
:active 选定的链接
注意写的时候，他们的顺序尽量不要颠倒， 按照lvha的顺序，记忆：love hate lv包好
8，结构(位置)伪类选择器(css3 兼容性问题) 挑葫芦娃
:first-child: 选取属于其父元素的首个子元素的指定选择器
:last-child: 选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n): 匹配属于其父元素的第N个子元素，不论元素的类型 even偶数 odd奇数 n 从0开始
:nth-last-child(n): 选择器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个开始计算
n可以为数字、关键字或公式
目标伪类选择器
:target 目标伪类选择器 选择器可用于选取当前活动的目标元素
配合锚点，点击定位之后目标的活动样式修改
四、外观属性
color:文本颜色
1、预定义的颜色，如 red greed blue等
2、十六进制，如 #FF0000 #FF6600 ,实际工作中，十六进制是最常见的定义颜色的方式
3、RGB代码，如红色可以表示为rgb(255,0,0)或者rgb(100%,0%,0%)
需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写上0%
line-height:行间距
行与行之间的距离，字符的垂直间距。一般称为行高。
属性值有三种：px em 和百分比%
text-align:水平对齐方式
text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性
left:左对齐
right:右对齐
center:居中对齐
text-indent:首行缩进
text-indent属性用于设置首行文本的缩进，其属性值可为不用单位的数值，em字符宽度的倍数、或相对于
浏览器窗口宽度的百分比%，允许使用负值，建议使用em作为设置单位。
1em尺寸相当于一个字的宽度，
letter-spacing:字间距
letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。属性值可以
用不同单位的数值，允许使用负数，默认为normal
word-spacing:单词间距
word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不用
单位的数值，允许使用负数，默认为normal
word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的字母之间的间距
而word-spacing定义的是英文单词之间的间距
word-break:自动换行
normal:使用浏览器默认的换行规则
break-all 允许在单词内换行。
keep-all只能在半角空格或连字符处换行。
颜色半透明(css3)：
文字颜色到了CSS3我们可以采取半透明的格式
color:rgba(r,g,b,a) a是alpha 透明的意思 取值范围0~1之间 col or:rgba(0,0,0,0.3)
文字阴影(css3)
text-shadow:水平位置 垂直位置 模糊距离 阴影颜色；
对应属性值：
h-shadow:必需。水平阴影的位置。允许负数
v-shadow:必需。垂直阴影的位置。允许负数
blur:可选。模糊距离
color:可选。阴影的颜色。
五、引入css样式表(书写位置)
1、行内模式(内联样式)
使用过标签的style属性设置元素的样式，其基本语法格式如下
<标签 style="属性1:属性值1;属性2:属性值2...">内容</标签>
语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。
其中属性和值的书写规范与css样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用
2、内部样式表(内嵌式)
内嵌式是将css代码集中写在HTML文档的head头部标签中，并且用style标签定义
<head>
<style>
选择器{属性1:属性值1;属性2:属性值2...}
</style>
</head>
语法中，style标签一般位于head标签title标签之后，也可以把他放在html文档的任何地方
3、外部样式表(外链式)
链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将外部样式表文件
链接到HTML文档中，其基本语法格式如下：
<head>
<link href="CSS文件的路径" type="text/css" rel="stylesheet" />
</head>
注意：link是单标签
该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，
-herf:定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径
-type:定义所链接文档的类型，在这里需要指定为text/css，表示链接的外部文件为css样式
-rel:定义当前文档于被链接文档之间的关系，在这里需要指定为"stylesheet",表示被链接的文档是一个样式表文件。
六、标签的显示模式
html标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素
1、块级元素(block-level)
每个标签通常都会独自占据一整行或多整行，可以对其设置高度、宽度、对齐等属性，常用于网页布局和网页结构的搭建
<h1>~<h6><div><p><ol><ul><li>等
块级元素的特点：
1、总是从新行开始
2、高度，行高，外边距，以及内边距都可以控制
3、宽度默认是容器的100%
4、可以容纳内联元素和其他块元素
2、行内元素(inline-level)
行内元素(内联元素)不占有独自的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽高
高度，对齐等属性，常用于控制页面中文本的样式
<span><a><strong><b><em><i><ins><u>等
行内元素的特点：
1、和相邻行内元素在一行上。
2、高、宽无效，但水平方向的paddin和margin可以设置，垂直方向的无效
3、默认宽度就是它本身内容的宽度
4、行内元素只能容纳文本或者其他行内元素
注意：
1、只有文字才能组成段落 因此p里面不能放块级元素，同理还有这些标签h1~h6,dt
他们都是文字类块级标签，里面不能放其他块级元素
2、链接里面不能再放链接
3、行内块元素(inline-block)
在行内元素中有几个特殊的标签<img /><input /><td>可以对他们设置和对齐属性，有些资料可能会称它们为行内块元素
行内块元素的特点：
1、和相邻行内元素(行内块)在一行上，但是之间会有空白缝隙。
2、默认宽度就是它本身内容的宽度
3、高度，行高，外边距以及内边距都可以控制
4、标签显示模式转换 display
块转行内：display：inline
行内转块：display:block
块、行内元素转换为行内块：display：inline-block
此阶段，我们只需关心这三个。后面再学
七，css复合选择器
复合选择器是由两个或者多个基础选择器，通过不同的方式组合而成的，目的是为了可以选择
更准确更精细的目标元素标签
1、交集选择器
交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能
有空格，如h3.special
h3.class{color:red; font-size:25px;}
h3:标记选择器
class:类别选择器
技巧：
交集选择器是并且的意思。即...又...的意思？？？
比如：p.one 选择的是：类名为.one的段落标签
用的相对来说比较少，不建议使用
注意：第一个是标签选择器，第二个是class选择器
2、并集选择器(css选择器分组)
是各个选择器通过逗号连接而成的，任何形式的选择器(包括标签选择器，class选择器，id选择器)
都可以作为并集选择器的一部分，如果某些选择器定义的样式完全相同，或部分相同，就可以利用
并集选择器为它们定义相同的css样式
.class,h3{ 属性1:属性值1; 属性2:属性值2;}
例子：
p,div,h1{
color: orange;
}
技巧：
并集选择器的意思，就是说，只要逗号隔开的，所有选择器都会执行后面样式
比如：.one,p,#test{...}表示 .one和p 和 #test这三个选择器都会执行颜色为红色，
注意：是使用逗号隔开的。
3、后代选择器
后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面
内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就成为标签的后代
.class h3{...;....;}
.class 类别选择器
h3 标签选择器
子孙后代都可以这么选择，或者说，它能选择任何包含在内的标签。
实例：
.nav ul li{
color: orange;
}
注意：是使用空格隔开的
4、子元素选择器
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签
写在后面，中间跟一个 > 进行连 接，注意，符号左右两侧各保留一个空格
.class > h3 {....;....;}
这里的子 值的是 亲儿子 不包括孙子 重孙子之类
比如：.demo > h3{....} h3一定是demo亲儿子，demo元素包含着h3.
注意：在指定颜色时候，它爷给它爹指定颜色，但是它儿子没有颜色时会使用上它爹的颜色，
这是应该给个颜色给它儿子，再让它爷给它爹指定颜色。
是使用 > 隔开的,符号两边要给空格
5、属性选择器
选取标签带有某些特殊属性的选择器，对齐进行修改
选择器名[]{}//属性选择器用中括号来表示
E[attr]{} 存在attr属性即可设置css
E[attr=val]{} 属性值完全等于val
E[attr*=val]{} 属性值里包含val字符 并且在任意位置
E[att^val]{} 属性值里包含val字符 并且在开始位置
E[attr$=val]{} 属性值包含val字符并且在结束位置
6、伪元素选择器(CSS3)
区分：
.demo 类选择器
:demo 伪类选择器
::first-letter 伪元素选择器
1，E::first-letter 文本的第一个单词或字(如中文，日文，韩文)
2，E::first-line 文本第一行
3，E::selection 可改变选中文本的样式
重要：
在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。
4，E::befor{content:"w";}
5，E::after{content:"e";}
则插入W在前面，E插入在后面
八、背景
1、简单介绍
background-color:pink;
background-image:url(image/xx.jpg);
background-repeat:no-repeat;//默认平铺
1、利用方位名词 修改背景图片的位置
background-position:left top;
..
方位名词没有顺序
方位名词只有一个时，另外一个默认为居中
2、精确单位，第一个值是X坐标，第二个值是Y坐标
background-position:10px 30px;
3、混搭使用
backgrounp-position:10px center;
2、背景附着
background-attachment:scroll | fixed
scroll: 背景图像是随对象内容滚动
fixed: 背景图像固定
说明：
设置或检索背景图像是随对象内容滚动还是固定的
3、背景简写
background 属性的值的书写顺序官方并没有强制标准的，为了可读性，建议如下写法
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background:transparent url() repeat-y scroll 50% 0;
4、背景透明(CSS3)
background:rgba(0,0,0,0.3);
最后一个参数是alpha透明度 取值范围0-1之间
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
同样，可以给文字和边框透明 都是rgba的格式来写。
5、背景大小缩放
通过background-size设置背景图片的尺寸
1、可以设置长度单位px或百分比
2、设置cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分，则会被隐藏
3、设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域
background-size:300px 100px;
6、多背景
以逗号分隔可以设置多背景，可用于自适应布局
background-image:url(...),url(...);
注意：
如果设置的多重背景图之间存在着交集(即存在着重叠关系)，前面的背景图会覆盖在后面的背景图之上
为了避免背景色将图像盖住，背景色通常都定义在最后一组上
7、凹凸文字
文本修饰
text-decoration 通常我们用于文字修改装饰
九、css三大特性
1、css层叠性
指多种css样式的叠加
比如先给某一个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，
这就是样式冲突
如果出现样式冲突，则会按照css书写的顺序，以最后的样式为准
2、css继承性
继承性是指书写css样式时，子标签会继承父标签的某些样式，如文本颜色和字号，想要设置一个可继承的属性，
只需将它应用于父元素即可
跟文字有关系的会继承，其他的一般不会去继承
3、css优先级
css权重，css specificity 用于衡量css值优先级
specificity用一个四位的数来表示，值从左到右，左边最大
标签选择器 0,0,0,1
类、伪类 0,0,1,0
ID选择器 0,1,0,0
行内样式 1,0,0,0
!important 无穷大
权重可以叠加
比如：标签选择器 + 标签选择器 = 0,0,0,2
十、盒子
网页编写就是盒子摆放的过程
1、边框
语法：
border：border-width || border-style || border-color
边框属性-设置边框样式(border-style)
none:没有边框、忽略所有边框的宽度(默认值)
solid：边框为单实线(最为常用)
dashed:虚线
dotted:边框为点线
2、表格的细线边框
table{border-collapse:collapse}
这个表示边框合并在一起
3、圆角边框
border-radius:左上 右上 右下 左下(顺时针)4个值
border-radius:左上&右下 右上&左下(对角线)2个值
border-radius:左上 右上&左下 右下(Z之字型)3个值
注意：可以取百分比值
4、内边距
padding:上下左右 一个值
padding:上下 | 左右 两个只
padding:上 | 左右 | 下 三个值
5、外边距
和外边距值设置一致
外边距实现盒子居中
可以让一个盒子实现水平居中，需要满足以下两个条件
1、必须是块级元素
2、盒子必须指定了宽度
然后下面带代码就可以使块级元素水平居中
选择器{ width：xxpx;margin:0 auto;}
6、文字水平居中 与 盒子水平居中的区别
文字居中是通过：
text-align:center;
盒子水平居中：
margin:0px auto;
7、插入图片和背景图片的区别
插入图片其实就是一个盒子，修改高宽控制大小
背景不会占位置，
控制大小需要通过
background-size：xxpx xxpx；
更改位置通过
background-position:
8、清除元素的默认边框
浏览器的默认border有默认的8px的外边距
body,ul,li {margin:0;padding:0;}
全部清零内外边距
9、行内元素没有上下内边距，只有左右内边距
10、外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
11、相邻块元素垂直外边距的合并
当上下相邻的两个块元素相邻时，如果上面的元素有下边距margin-bottom
下面的元素有上边距margin-top,则他们之间的垂直间距不是margin-bottom
与margin-top之和，而是两者中的较大值。这种现象被称为相邻块元素垂直外边距的合并
12、父子级元素外边距合并
嵌套关系的块元素，如果父元素没有上内边距以及边框，则父元素的上边距会
与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的
上外边距为0，也会合并
解决：
可以为父元素定义1像素的上边框或上内边距
可以为父元素添加overflow:hidden.
13、盒子的计算尺寸
盒子尺寸= 宽|高 + border + padding + margin；
控件尺寸= 宽|高 + border + padding；
14、设置padding不影响盒子大小
如果一个盒子没有宽度，则padding不影响宽度
如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding不会影响本盒子大小
15、盒子模型的稳定性
使用盒子布局的优先级
width -> padding -> margin
原因：
1、margin会有外边距合并还有ie6下面margin加倍的bug
2、padding会影响盒子大小，需要进行加减计算
16、css3盒模型(标准的idth+padding+border 或者是固定的)
CSS3中通过box-sizing来指定盒模型，即可指定为content-box,border-box,
这样计算盒子大小的方式就发生了改变
1、box-sizing:content-box 盒子大小为width+padding+border 即为默认值
2、box-sizing:border-box 盒子大小为width 就是说padding和border是包含在width里面的
注意：上面标注的width值的是CSS属性里设置的width:length content的值是会自动调整的
17、盒子阴影
box-shadow:水平位置 垂直位置 模糊位置 阴影尺寸 阴影颜色 内/外阴影
1、前两个属性时必须的、其余的可以省略
2、外阴影(outset),默认是outset，但不要编写，写了没有阴影效果
内阴影可以写上 inset
十一、浮动
元素排列方式有3种：普通流 浮动 定位
普通流
实际上就是网页内标签元素正常的从上到下，从左到右排列顺序
浮动的定义：
元素的浮动是指设置了浮动属性的元素会脱离标准流的控制，移动到其父元素中指定位置的过程
浮动的通俗定义：
指元素漂浮起来，不受标准流的限制，漂浮在标准流的上面，压住标准流
属性值：
left 元素向左浮动
right 元素向右浮动
none 元素不浮动
浮动特性(**************************)：
1、浮动元素总是找离他最近的父级元素对齐，不会超出内边距，边框的范围
2、块级元素添加浮动之后，具有行内块的特性(包裹、但是可以设置大小)
3、行内元素添加浮动之后，具有行内块的特性
注意行内块的特性，一行可以放多个，有宽度和高度，盒子的大小是有内容决定
浮动的元素位置
跟上一个元素，也就是，如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐，如果上一个元素时标准流
则A元素的顶部会和上一个元素的底部对齐
浮动的目的，就是为了让多个元素同一行上显示
总结：
1、加了浮动的元素盒子是浮起来的，也就是漂浮在其他的标准流的盒子
2、加了浮动的盒子，不占位置，它浮起来，原来的位置被下一个其他标准流的盒子占有
3、浮动的盒子需要和标准流的父级搭配使用，其次特别的注意浮动可以使元素显示模式体现为行内块特性
清除浮动：
目的：为了解决父级元素因为子级浮动引起内部高度为0的问题
在某种情况下，父级元素没有设置高度，而子级元素又设置浮动，子级元素就会脱离标准流，这时导致父级元素的
高度变为0(标准流中，父级元素没有设置高度时会根据子级元素的大小撑开高度，也就是包裹内容)
清除浮动的方法：
其实本质可以称之为闭合浮动
清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素
clear属性用于清除浮动，其基本语法格式
left 不允许左侧有浮动元素(清除左侧浮动的影响)
right 不允许右侧有浮动元素(清除右侧浮动的影响)
both 同时清除左右两侧浮动的影响
额外标签法
是W3C推荐的做法是通过在浮动元素末尾添加一个空标签
例如<div style="clear:both"></both>
父级添加overflow属性方法
触发BFC方式，可以实现清除浮动效果
给父级添加 overflow为hidden|auto|scroll 都可以实现
after伪元素清除浮动
:after方式为空元素的升级，好处是不用单独添加标签
使用方法
.clearfox:after{ content:".";display:block;height:0;clear:both;visibility:hidden; }
.clearfix{*zoom:1;}/* IE6、7专有 */
使用before 和 after 双伪元素清除浮动(标准写法)
使用方法：
.clearfix:before, .clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom:1;
}
十二、版心和布局流程
版心：
版心是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中，常见的宽度为960px 980px 1000px 1200px等
布局流程：
1、确认界面的版心(可视区域)
2、分析页面中的行模块，以及每个行模块中的列模块
3、制作HTML页面，CSS文件
4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块
十三、定位
元素的定位属性主要包括定位模式和边偏移两个部分
top 顶部偏移量，定义元素相对于其父元素上边线的距离
bottom 顶部偏移量，定义元素相对于其父元素下边线的距离
left 顶部偏移量，定义元素相对于其父元素左边线的距离
right 顶部偏移量，定义元素相对于其父元素右边线的距离
也就是以后定位要和这边偏移值搭配使用了，比如top:100px ； left:30px 等等
1、定位模式
在css中，position属性用于定义元素的定位模式，其基本语法格式如下，
选择器{position:属性}
position属性的常用值：
static 自动定位 网页中所有的标签都是静态定位的（默认静态）（对偏移无效的）
(一般用来清除定位，原来定位的盒子，不想加定位了，可以加上这个。）
relative 相对定位，相对于其原文档流的位置进行定位
（自恋型 相对于自己移动 相对定位是不脱离标准流）
absolute 绝对定位，相对于其上一个已经定位(有定位相对定位和绝对定位)的父元素进行定位
（拼爹型 完全脱标的，是不占位置的）
（父元素没有定位，子元素以浏览器为基准对齐）
子绝父相：
1，相对定位 占有位置，不脱标
2，绝对定位 不占有位置 脱标
fixed 固定位置，相对于浏览器窗口进行定位
(固定定位，完全脱标，不占用位置 固定定位一定要给宽高)
绝对定位实现水平/垂直居中：
普通的盒子是左右margin 改为auto即可，但是对于绝对定位就是无效了
定位的盒子也可以水平或者垂直居中，有一个算法（比如垂直居中）
1，首先left偏移父元素宽度的一半的值(也可以设置为50%)
2,然后left边距 设置为自己宽度负一半的值
这样就居中啦
2、z-index （叠放次序）
当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。
想调节重叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负数、0
注意：
1，z-index的默认值是0，取值越大，定位元素在层叠元素中越居上
2，如果取值相同，则根据书写顺序，后来居上
3，后面数字一定不能加单位
4，只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。
定位总结：
是否脱标占有位置 是否可以使用边偏移 移动位置基准
静态static 不脱标、正常模式 不可以 正常模式
相对定位relative 不脱标、占有位置 可以 相对自身位置移动
绝对定位 完全脱标，不占用位置 可以 相对于定位父级移动位置
固定定位 完全脱标，不占用位置 可以 相对于浏览器移动位置
定位模式转换：
跟浮动一样，元素添加了 绝对定位和固定定位之后，元素模式就会发生转换，都转为行内块模式
因此，比如行内元素(行内元素不可以设置宽高)如果添加了绝对定位或者固定定位之后，可以不用转换模式，直接给高度和宽度就可以了
十四、元素的显示与隐藏
1、display：
none:隐藏对象 (与它相反的是display：block 除了转换为块级元素之外，同时还有显示元素的意思。)
隐藏之后，不再保留位置。
2、visibility 可见性
visible: 对象可见
hidden：对象隐藏
特点：隐藏之后，继续保留原有位置。
3、overflow 溢出
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容
visible: 不剪切内容也不添加滚动条
hidden:不显示超过对象尺寸的内容，超出的部分隐藏掉
auto:超出自动显示滚动条，不超出不显示滚动条
scroll: 不管超出内容否，总显示滚动条
十五、用户界面样式
所谓的界面样式，就是更改一些用户操作的样式，比如 更改用户的鼠标样式，表单轮廓等，但是比如滚动条的样式改动受到了很多浏览器的
抵制，因此我们就放弃了，防止表单域拖动
1、cursor ： default 小白 pointer 小手 move移动 text 文本
就是鼠标放在身上查看效果
尽量不要用hand 因为 火狐不支持，pointer ie6以上都支持
2、轮廓 outline
(表单的轮廓)
是绘制于元素周围的一条线，位于边框边缘的外缘，可起到突出元素的作用
outline：outline-color || outline-style || outline-width
如果不想设置：outline：0 或者 outline：none;
<input type="text" style="outline:0" />
3、防止拖拽文字域resize
resize:none 这个单词可以防止 火狐、谷歌等浏览器随意的拖动 文本域。
outline：none 取消轮廓线
右下角默认可以拖拽：
<textarea></textarea>
右下角不可以拖拽
<textarea style="resize:none;"></textarea>
4、vertical-align 垂直对齐
以前带有宽度的块级元素居中对齐，是margin：0 auto
文字居中对齐：text-align:center;
vertical-align ：baseline | top | middle | bottom
设置或者检索对象内容的垂直对齐方式。
vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素，通常用来控制图片和表单文字的对齐。
vertical-align 主要控制图片和文字的垂直关系，默认的图片会和文字基线对齐
5、去除图片底侧空白缝隙
图片和表单等行内块元素，他的底线会和父级盒子基线对齐，这样会造成图片底侧会有空白缝隙
解决方法：
1.转换成块级元素
2.给img vertical-align:middle | top 等等，让图片不要和基线对齐
6、溢出的文字隐藏
1.word-break:自动换行
normal 使用浏览器默认的换行规则
break-all 允许在单词内换行 （wudalao 拆成 wuda lao）
keep-all 只能在半角空格或连字符处换行(和默认差不多)
主要处理英语单词
2.while-space: 设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容
normal:默认处理方式
nowrap:强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。
3，text-overflow 文字溢出
text-overflow:clip | ellipsis
设置或检索是否使用一个省略标记（...） 表示对象内文本溢出
clip:不显示省略号，而是简单的裁切
ellipsis: 当对象内文本溢出时显示省略标记(...)
注意：要先强制一行显示，while-space:nowrap; 还有text-overflow:hidden 一起使用才有效果
十六、css精灵技术（sprite） 小妖精
网页向服务器请求背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，降低页面的加载速度。
为了减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术(也称为CSS Sprites,css雪碧)
精灵技术本质
所谓的CSS精灵是一种处理网页背景图像的方式，它将一个界面涉及到的所有零星背景图像都集中到一张大图中去，
然后将大图应用于网页，这样当用户访问该界面时，只需向服务器发送一个请求，网页中的背景图像即可全部展示出来。
这个由很多小背景图像合成的大图被称为精灵图
使用：
网页元素只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的backgroud-image、background-repeat和background-position属性进行背景定位
其中最关键的是使用background-position属性精确的定位。
十七、字体图标
大图不但增加了总文件的大小，还增加了很多额外的网络请求，而且不能很好的进行缩放，图片放大和缩小会失真，这时候就可以使用“字体图标”了
字体图标的优点：
可以做出和图片一样可以做的事情，改造透明度、旋转度等
本质上其实就是文字，可以很随意的改变颜色、产生阴影、透明效果等等
本身体积很小，但携带的信息并没有削减。
几乎支持所有的浏览器
移动端设备可以使用
1、字体图标使用流程
1.UI人员设计字体图标的效果图(SVG)
2.前端人员上传生成兼容字体文件包
3.前端人员下载兼容字体文件包到本地
4.把字体文件引入到HTML界面中
上传生成字体包
http://icomoon.io
http://www.iconfont.cn
十八、滑动门(文本自动撑开容器)
为了使各种形状的背景能够自适应元素中文本内容的多少，出现了css滑动门技术。使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本，可用性更强。最常见于各种导航栏的滑动门
核心技术
核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度，以便能适应不用字数的导航栏
布局：
<li><a herf="#"><span>导航栏内容</span></a></li>
总结：
1，a 设置背景左侧，padding撑开合适宽度
2，span设置背景右侧，padding撑开合适宽度剩下由文字继续撑开宽度
3，之所以a包含span就是因为 整个导航都是可以点击
十九、before 和 after伪元素(详解)
之所以称之为伪元素，是因为它们不是真正的界面元素，html没有对应的元素，但是其所有用法和表现行为与真正的界面元素一样，
可以对其使用诸如页面元素一样的css样式
注意：
1，伪元素：before和after添加内容默认是inline元素，这两个元素的content属性，表示伪元素的内容设置：befroe和:after是必须设置content属性，否则不起作用
2，伪元素是不占位置的。
注意区分伪元素选择器，和伪类选择器 例如：伪类 :hover 伪元素::before
二十、过渡(CSS3)
transition 过渡效果实现补间动画
transition：要过渡的属性 花费时间 运动曲线 何时开始
如果是多组属性变化，还是用逗号隔开。
属性：
transition： 简写属性，用于在一个属性中设置四个过渡属性
transition-property： 规定应用过渡的CSS属性名称
transition-duration： 定义过渡效果花费的时间 默认0 单位是秒 s 比如:0.5s 这个s必须要写
transition-timing-function：规定过渡效果的时间曲线。默认是ease (linear：均速 ease：缓慢下来 ease-in：加速 ease-out：减速 ease-in-out：先加速后减速)
transition-delay 规定过渡效果何时开始。默认是0
例子： transition: width 0.5s ease-out 0s;
如果想要多个属性都变化，写个all就可以
2，2D变形
translate：水平移动
1、translate(x，y) 水平居中方向和垂直方向同时移动(也就是)
2、translate(x) 仅水平方向移动(X轴移动)
3、translate(Y) 仅垂直方向移动(Y轴移动)
transform：translate(50%); //走自己的一半宽度
transform：translate(100px); //走100px
rotate(deg),旋转角度
3,transform-origin:可以调整元素转换变形的原点
比如：
div{transform-origin:left top;transform:rotate(45deg);}//改变元素原点到左上角，然后进行顺时针旋转45度
如果是4个角，可以用left top 这些，如果想要精确的位置，可以用px像素
div{transform-origin:10px 10px;transform:rotate(45deg);}
4，rotateX() 沿着X轴旋转
rotateY() 沿着Y轴旋转
rotateZ() 沿着Z轴旋转
5、3D
x坐标 左边是负的 右边是正的
y坐标 上边是负的 下边是正的
z坐标 里面是负的 外边是正的
6、透视
透视可以将一个2D平面，在转换的过程中，呈现3D效果
原理：近大远小
浏览器透视：将近大远小的所有图像，透视在屏幕上
perspective：视距，表示视点距离屏幕的长短，视点，用于模拟透视效果是人眼的位置
perspective：500px 视距越小，效果越明显（给父容器添加视距效果）
transform：translate3d(x,y,z); x 和y可以是px或者% z只能是px;
7、两面翻转
两个盒子重合，前面翻转180度隐藏掉，后面的接着翻转180度可见
backface-visibility:hidden;不是正面则隐藏
二十一、动画(animation)
语法格式：
animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向
css3 动画属性
@keyframes 规定动画
animation 所有动画属性的简写属性，除了animation-play-state 属性
animation-name 规定@keyframes 动画名
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是0
animation-timing-function 规定动画的速度曲线。默认是 ease
animation-delay 规定动画何时开始
animation-iteration-count 规定动画被播放的次数 默认是1
animation-direction 规定动画是否在下一周期逆向地播放 默认 normal （normal 正常方向 reverse 反方向运行 alternate 动画先正常运行再反方向运行，并持续交替运行
alternate-reverse 先方向运行，再正方向运行，并持续交替）
animation-play-state 规定动画是否正在运行或暂停，默认是running
animation-fill-mode 规定对象动画时间之外的状态
@keyframes 动画名称{ form{} to{}} ->定义动画
transform：translate rotate ；多组变形
二十二、伸缩布局
主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向
侧轴：与主轴垂直的轴称为侧轴，默认是垂直方向
方向：默认主轴从左到右，侧轴默认从上到下
主轴和侧轴并不是固定不变的，通过flex-direction可以互换
使用：
类似weight
在父容器中定义 display：flex;
在子容器中定义 flex：1, 平分 或者在子容器中的各个子容器设置平分的值
1,2,1 中间的2就是占2/4 的大小
设置最大最小值
min-width:
max-width：
保证盒子被挤压或者拉伸太厉害
如果固定其中的子盒子的宽度，其他设置了flex的值，则会固定盒子之后剩下的大小进行划分
flex-direction: column;//row 是水平方向 column 是垂直方向
二十三、 调整对齐对齐方式
主要控制容器内子元素的对齐方式。
1、 justify-content (水平对齐)
flex-start 默认值。项目位于容器的开头，让子元素从容器的开头排序 白话：让子元素从父容器的开头开始排序
flex-end 项目位于容器的结尾。白话：让子元素从父容器的后面开始排序
center 项目位于容器的中心。白话：让子元素在父容器中间显示
space-between 项目位于各行之间留有空白的容器内 白话：左右的盒子贴近父盒子，中间平均分布空白间隙
space-around 项目位于各行之前、之间、之后都留有空白的容器内 白话：相当于给每一个盒子添加了左右margin外边距
2、 align-items 调整侧轴对齐,(上面相当于水平对齐，这个相当于垂直对齐)
和上面的属性类似
stretch：默认值。项目被拉伸以适应容器 白话：让子元素的高度拉伸适用父容器(子元素不给高度的情况下)
3、 flex-wrap 控制是否换行
nowrap 默认值。规定灵活的项目不拆行或不拆列。不换行，则收缩 显示
wrap 规定灵活的项目在必要的时候拆行或拆列
wrap-reverse：规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序 (翻转)
4、 align-content 堆栈(由flex-wrap产生的独立行)对齐
针对flex容器里面多轴(多行)的情况，align-items是针对一行情况下进行排列。
必须对父元素设置自由盒属性display:flex;并且设置排列方式为横向排列flex-direction:row;并且设置换行，flex-wrap:wrap;
这样设置才会起作用（flex-flow: row wrap;）注意，是在多行的情况下才会起作用；
stretch：拉伸以适应容器
center:
flex-start
flex-end
space-between
space-around
flex-flow是flex-diraction、flex-wrap的简写形式（flex-flow: row wrap;）
5、 order控制子项目的排列顺序，正序方式排序，从小到大
对排列的顺序进行排序
order: 1;(数值越小越往前)
二十四、BFC(块级格式化上下文) 就是一个封闭的区域
BFC他是一个独立渲染的区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干
里面的盒子浮动，都不会对外部盒子有影响
1、display 属性为block list-item table 的元素，会产生BFC
2、产生BFC的条件(块级元素才具有BFC特性)
float 属性不为none
position为absolute 或fixed
display为inline-block,table-cell table-caption flex inline-flex
overflow不为visible
3、BFC布局规则特性
1，在BFC中，盒子从顶端开始垂直地一个接一个地排列
2，盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻盒子的margin会发生重叠
3，在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘（border-left）（对于从右到左的格式来说，则触碰到右边缘）
4，BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘
5，计算BFC的高度时，自然也会检测浮动的盒子高度
它是一个独立的渲染区域，只有Block-level box参与，他规定了内部的Black-level Box如何布局，并且与这个区域外部毫不相干0
4、作用(常用 overflow：hidden)
可以清除内部元素的浮动
解决外边距合并问题
制作右侧自适应
二十五、补充知识
渐进增强 progressive enhancement
针对低版本浏览器进行构建页面，保证最基本的功能，然后在针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
类似爬山，由地处往高处爬
优雅降级
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
类似蹦极，由高往低处下落
浏览器前缀
-webkit- google chrome safari android browser
-moz- firefox
-o- opera
-ms- internet explorer,edge
-khtml- konqueror
背景渐变
背景渐变有很严重的兼容问题，需要加上前缀进行兼容
background：-webkit-linear-gradient(起始位置，起始颜色，结束颜色)
background：-webkit-linear-gradient(起始位置，颜色 位置，颜色位置)(top，red 0%,greed 20%,red 100%)
浏览手机等html显示地址：www.csstats.com
W3C统一验证工具：http://validator.w3.org/unicorn/
css压缩 http://tool.chinaz.com/Tools/CssFormat.aspx 或者 http://tool.chinaz.com/Tools/CssFormat.aspx
转换ico图标 http://www.bitbug.net/
<!-- 引入ico图标 1，他不是iconfont字体 2，位置是放到head标签中间 3，后面type=image/x-icon 4,为了兼容要将favicon.ico这个图标放在根目录-->
<!-- 这个写法基本上所有的网站都是这样写，小图标 -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
三大标签优化
1、网页title标题
title具有不可替代性，是我们的内页第一个重要标签，是搜索引擎了解网页的入口。
标签的长度：Google(70KB)，35个中文
Baidu(56kb)，28个中文
关键字分布：最先出现的词语权重越高
关键字词频：主关键词出现3次
辅关键词出现一次
建议：
首页标题，网站名(产品名) 网站的介绍
例如：
京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
2、description 网站说明
对于关键词的作用明显降低，但由于很多搜索引擎，仍然大量采用网页的MATA标签中描述部分作为搜索结果的“内容摘要”。
京东网：
京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!
注意点：
1、描述中出现关键词，与正文内容相关，这部分给人看的，所以要写的很详细，吸引用户
2，同样遵循简短原则，字符数含空格在内不要超过120汉字
3，补充在title和keywords中未能充分表述的说明
4，用英语逗号 时关键词1，关键词2
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
3、keywords 是页面关键词，是搜索引擎关注点之一，keywords应该限制在6~8个关键词左右，电商类网站可以多 少许
京东网：
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
网友评论