前端总结·基础篇·CSS
* {box-sizing:border-box;} /* IE8+ */body {margin:0;} /* 去除边距 */ul {margin:0;padding-left:0;} /* 去除边距和左填充 */li {list-style-type:none;} /* 去除列表的圆点 */a {text-decoration:none;} /* 去除下划线 */
2 浏览器前缀
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
3 兼容性
为针对不同IE浏览器进行样式修改，可以使用css hack
指定版本：IE6(_),IE7(+),IE8(/),IE9(:root 9)
指定范围：IE6-7(*),IE8-10(\0),IE9-10(\9\0),IE All(\9)
除了手写IE兼容性，你也可以直接使用IE9.js自动处理IE6-9的bug。
IE6-9支持的支持圆角、背景渐变、边框图片、盒阴影、rgba等可视化的功能可以用CSS3PIE。
4 指定渲染模式
<meta http-equiv="X-UA-Compatible" content="IE=7" /> // IE8-9使用IE7模式渲染
<meta http-equiv="X-UA-Compatible" content="IE=8" /> // IE8-9使用IE8模式渲染
<meta http-equiv="X-UA-Compatible" content="edge" /> // IE8-9使用IE最高版模式渲染
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> // 安装GCF之后，IE使用chrome模式渲染
5 CSS库
为了方便快速的再次实现需要的效果，把常用的功能封装起来。通过设置class的方式，使用封装好的css库。
1 路径：
1 ../ 上一级目录
2 ./ 当前目录
3 / 根目录
2 float+margin-布局
双飞翼布局比圣杯布局多使用了1个div，
少用大致4个css属性（圣杯布局container的 padding-left和padding-right这2个属性，
加上左右两个div用相对布局position: relative及对应的right和left共4个属性，；
而双飞翼布局子div里用margin-left和margin-right共2个属性
，比圣杯布局思路更直接和简洁一点。
简单说起来就是：双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了。
3 clear：清除浮动
eg: .clear{ zoom: 1;}
.clear:after { content:‘‘;display:block;clear:both;}
.fl{ float:left;}
.fr{ float:right;}
浮动：1.overflow 将父辈元素的overflow设置为hidden
2.after伪类 对于元素after伪类进行设置
4 position与dispay
1.display:none; // 会清除原本占用的布局空间。
2.visibility:hidden; // 隐藏元素
3.display:none; // 隐藏元素并清除原本占用的布局空间
（1）清除布局空间的定位（absolute fixed）
fixed 偏移量相当视口的。固定定位（fixed）不会随着鼠标的滚动而改变位置。他真的是固定屏幕的某一个位置的，比较常见的是网页右下角的广告。
absolute 偏移相当于最近的一段podition 不是static的祖先元素。绝对定位（absolute）的定位原点是非默认定位（static）的父节点。可以是absolute fixed relative，如果父节点没有这些，那定位原点就是body了。使用了这两种定位中的一种，元素原本占用的布局空间将会消失（脱离文档流）。下面是绝对定位（absolute）的一个例子。左图是默认布局，右图是使用绝对定位（absolute）之后的（元素原本的布局空间被清除）。
（2）留布局空间的定位（relative）
元素原本占用的布局空间依旧保留在文档流中。
reltive偏移相当于原先在文档中的位置。相对定位（relative）相对原有位置定位。把上例中的absolute改成relative即可看到效果。使用这种方法，元素原本占用的布局会保留。
（3）默认定位：默认定位为static。
（4）巧用relative+absolute定位 父相子绝
父级采用relative，子代采用absolute。则子代的定位原点变为父级元素的左上角。
5 居中
（1）水平居中
a. text-align:center
.parent {width: 500px;height: 100px;border: 1px solid #ddd;text-align: center;}.child {display: inline-block;width: 100px;}<div class="parent"><span class="child">123</span> </div>
该方法可以水平居中块级元素中的行内元素，如`inline`，`inline-block`；
对于块级元素中的块级元素，只会让子元素中的内容居中，子元素仍然是左对齐，如上述例子中span改成`display：block`，则child会左对齐，其中的文字会 相对于span居中。
b. margin:0 auto
.parent {width: 500px;height: 100px;border: 1px solid #ddd;}.child {display: block;margin:0 auto;width: 100px;}<div class="parent"><span class="child">123</span></div>
对于已知width的块级元素，可以用`margin：0 auto`来设置水平居中。
（2）垂直居中
a. line-height
对于已知height的单行文本，设置line-height=height的值，即可实现垂直居中。
b. vertical-align: middle
模拟成表格属性来实现居中。
.parent {display: table-cell; //模拟表格属性vertical-align: middle;text-align: center;width: 500px;height: 100px;border: 1px solid #ddd;}.
child {display: inline-block;width: 100px;}
<div class="parent"><span class="child">123</span></div>
c. position：absolute + translate
对于height和width未知的元素可以采用该方法
.parent {position: relative;width: 500px;height: 100px;border: 1px solid #ddd;}.
child {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: #ddd;}
<div class="parent"><span class="child">123<br>123<br>123</span></div>
（3） 水平居中
1.text-align:center 水平居中的块级元素的行内元素 inline inline-block
2.margin:auto 对已知的width块级元素
6 垂直矩阵
1.line-height 单行文本
2.vertical-algin:middle 表格
3.position:absolute+translate 对height,width未知的元素采用该方法
4.flex布局 多个因素
7 行高
1.line-height 在文本行中垂直居中
2.vertical-align (1)top 按顶线对齐
(2)bottom 按底线对齐
(3)middle 文字居中
(4)..px 按数字
8 margin-外边距
垂直方向的margin会合并，水平方向的不会。实际显示的margin是两者中较大的那个
1.margin：0 auto （对已知的width块级元素，实现水平居中等功能）
2.margin：上外 右外 下外 左外
3.margin：上外 左右外 下外
4.margin：上下外 左下外
5.margin：上下左右外
9 padding-内边距
padding:1px 2px 1px 2px;（top/right/bottom/left）
1.padding：上内 右内 下内 左内
2.padding：上内 左右内 下内
3.padding：上下内 左右内
4.padding：上下左右内
10 border
outline和border类似，但是不占用布局空间。
border-image:url() 30 30 stretch;（round为边框重复，stretch为边框拉伸）
border:1px solid rgba(——，——，——，透明度)
11 border-radius-圆角
border-radius: 10px 0 10px 0; //设置圆角（四个值分别为top-left、top-right、bottom-right和bottom-left）
1.border-radius：左上 右上 右下 左下
2.border-radius：左上 右上右下 左下
3.border-radius：左上右上 右下左下
4.border-radius：左上右上右下左下
1.圆 border-radius(100%)
2.半圆 border-radius(10px 0 0 10px)
3.扇形 border-radius(0 0 0 10px)
4.椭圆 border-radius(20px 40px)
12 list-列表与表格
1.list-style-type cellspacing border
合并边框：border-collapse:collapse
2.list-style-image
3.list-style-position
13 text-文本样式
@font-face用来设置自定义字体
1.text-algin 水平对齐方式
2.text-indent 文本缩进
3.line-height 行间距
4.text-decoration
14 word-文字折行
1.word-wrap: 文字溢出
2.word-break: 进行字母级截断
3.white:space:
15 input
1.aufocus 自动获取焦点
2.requred
3.placehoder
4.pattern 正则表达式
5.height/width 只适用于image
16 overflow
1.visble 滚动条
2.hidden
3.scroll:滚动条显示
4.auto: 滚动条自动显示
17 box-shadow-阴影
opacity: .5; // 设置默认透明度为0.5
box-shadow:
18 background-背景属性
制作精灵图（sprite）可以用，
然后将元素的width和height设置成小图的大小。
background:red url(laughcry.gif) repeat top left;
多背景：（-image:url(bg.jpg),url(dog.jpg)）定位源（-origin:content-box/padding-box/border-box）显示区域（-clip:content-box;）和尺寸（-size(80px 60px)）
1.三种写法：
(1)image、
(2)repeat、
(3)position、
(4)color（理解）
2.background:url(img/..) no-repeat 颜色 （10px 10px）
repeat x y
1.背景颜色
2.渐变色背景
3.背景与属性
4.base64和性能优化
5.多分辨流适配
19 linear-gradient-渐变
background:linear-gradient(red,blue,green)
* background:linear-gradient(to right,red 10%,blue 50%,green 70%)
* background:linear-gradient(rgba(220,220,220,0),rgba(220,220,220,1))
默认为从上到下渐变，to right（前缀写法中皆为left）
可以设置从左到右渐变，to bottom right
则对角线渐变（前缀写法中webkit为left top），
180deg则可以设置按照角度渐变；
linear-gradient(方向,开始的颜色,结束的颜色)
-moz-linear-gradient(top,red,yellow);
-webkit-linear-gradient(top,red,yellow);
-ms-linear-gradient(top,red,yellow);
linear-gradient(top,red,yellow)
-ms-fliter:“progid:DXImageTransform.Microsoft.gradient(enabled=‘false‘,
startColorstr=red, endColorstr=yellow)”;
20 尺寸：
1.百分比
2.rem html的font-size
3.em 父元素的flow-size
4.盒子
21 Z-index
1.Z顺序 值大的覆盖值小的
2.auto
3.<interger>整数值
4.inherit
22 resize（notIE）（CSS3）
定义用户是否可调整当前元素的边框大小。
resize: horizontal（水平）/vertical（垂直）/both/none/inherit;
23 分栏（column）（IE10+ notOperaMini）（CSS3）
column-count: 3; /* 设定需要分几栏 */
column-gap: 20px; /* 设定两栏间隔 */
24 滤镜（filter）（notIE,-webkit-）
25 自定义鼠标指针（cursor）
cursor:pointer/help/wait/text/move/crosshair;
26 @keyframe-动画
定义动画可以用from-to的两个定点形式，也可用百分比（0%、50%、100%）的多个定点形式
animation: toRight 5s;
transition: width 2s; /* 只需添加这一条 */
a.transform
1)translate
translate(x,y) transformX(n) translateY(n) translateZ(n) translate3d
2)rotate
rotateX() rotateY() rotateZ() rotatae3d()
3)shew
4)scale
scaleX() scaleY() scaleZ() scale3d()
5)matrix
6)transform-style:preserve-3d matrix3d(n,n,n,n,....,n)
b.transform-origin
(1)x-axis
X的值 left center right length %
(2)y-axis
Y的值 top center bottom length %
(3)z-axis
Z的值 length
3.background:
(1)liner-gradient
(2)radical-gradient
4.transition
(1)transition-property: none / all / property(与动画里的名称可以取一样)
(2)transition-duration:
(3)transition-delay:
(4)transition-timing-function linear 匀速
ease 慢-快-慢（moren）
ease-in 慢开始
ease-out 慢结束
ease-in-out 慢速开始和结束
27 移动端
（1）视口（viewport）
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
width=device-width // 把页面宽设置成设备一样initial-scale=1.0 // 初始缩放为1.0
user-scalable=no // 不允许用户缩放（此处有坑，有时会无效）
（2）媒体查询（media query）
媒体查询来根据不同宽度的设备显示不同的布局。
（3）相对字体大小（rem/em）
rem是相对于根字体的大小，em是相对于父级的字体大小
