一、网站初始化
========================================================================
1.原因：兼容不同浏览器
2.弊端：会对SEO有一定的影响，力求影响最小的情况下初始化
3.各大主流网站初始化代码参考：网易官网、腾讯官网、新浪官网、淘宝官网、雅虎
4.著名的库：normalize.css、reset.css
5.附录文件
二、浏览器兼容：主要兼容IE浏览器
========================================================================
1、IE8兼容方案：参考教程
2、实用技巧
1.能够比较神奇地解决ie下比较奇葩的bug：zoom:1
2.实现渐变用自己的滤镜
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);
3.在IE浏览器下 input type=“text"文本框点击时后面会出现"X”,
以及type="password"后面会出现眼睛,如何除去这两种默认样式,IE9-不识别
::-ms-clear,::-ms-reveal{display:none;}
4.PIE.htc 使IE支持css3属性：参考教程
3、使用建议：有条件在虚拟机搭建一个win7+IE8测试环境用来测试
4、CSS Hack
尽量避免使用,为了顾及用户体验实现向下兼容才使用hack：参考教程
三、实用技巧
========================================================================
1、重要元素
1.定位Position
1.相对于最近的父元素定位，绝对定位下才可以使用z-index
2.固定定位的问题：移动端问题比较严重
2.浮动Float
1、浮动可以实现文字环绕
2、清除浮动的8种技巧：浮动可能造成父元素高度塌陷，推荐2种
1.父级div定义 overflow:hidden只适合没有定位和理解深的使用
2.父级div定义 伪类:after 和 zoom，推荐使用，定义公共类减少代码
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
了解6种
3.父级div定义 height，只适合高度固定的布局
4.结尾处加空div标签并添加样式 clear:both
5.父级div定义 overflow:auto
6.父级div也一起浮动
7.父级div定义 display:table
8.结尾处加 br标签 clear:both
3、经典布局：
圣杯：配合relative使用，然后通过负值margin进行调整
双飞翼：与圣杯布局的差别在于多了一个div，实现的思路不一样
3.盒子模型
1.标准：contentcontent + border + padding + margin
2.IE：content + border + padding
3.box-sizing：可以实现两个div并排，忽略margin
content-box，默认值，只计算内容的宽度，border和padding不计算入width之内
padding-box，padding计算入宽度内
border-box，border和padding计算入宽度之内
4.margin：页面的第一个margin-top | bottom会作用到父元素上，解决：父元素上添加overflow:hidden;
4.文本
1.CSS修改选中文字的颜色.p1::selection{ background:red;color:#fff; }
2.强制文本显示
单行：white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
多行：display: -webkit-box;-webkit-line-clamp:2;overflow: hidden;-webkit-box-orient: vertical;text-overflow: ellipsis;
3.控制文本的大小写：text-transform
4.text-shadow：水平方向位移（支持负值）、垂直方向位移（支持负值）、模糊半径、阴影颜色
5.box-shadow
box-shadow:-10px 0 10px red, 左边
box-shadow:10px 0 10px yellow, 右边
box-shadow:0 -10px 10px blue, 顶部
box-shadow:0 10px 10px green; 底边
6.字符间距：letter-spacing: 2px;
7.设置字体
@font-face{font-family: myFirstFont;src: url('Sansation_Light.ttf'),url('Sansation_Light.eot'); IE9+}
div{font-family:myFirstFont;}
8.网页字体设置
font-family:'YourWebFontName';
src:url('YourWebFontName.eot'); IE9 Compat Modes
src:url('YourWebFontName.eot?#iefix') format('embedded-opentype'), IE6-IE8
url('YourWebFontName.woff') format('woff'), Modern Browsers
url('YourWebFontName.ttf') format('truetype'), Safari, Android, iOS
url('YourWebFontName.svg#YourWebFontName') format('svg'); Legacy iOS}
9.定义字体font-family
@宋体 SimSun
@ 黑体 SimHei
@ 微信雅黑 Microsoft Yahei
@ 微软正黑体 Microsoft JhengHei
@ 新宋体 NSimSun
@ 新细明体 MingLiU
@ 细明体 MingLiU
@ 标楷体 DFKai-SB
@ 仿宋 FangSong
@ 楷体 KaiTi
@ 仿宋_GB2312 FangSong_GB2312
@ 楷体_GB2312 KaiTi_GB2312
*说明：中文字体多数使用宋体、雅黑，英文用Helvetica
body { font-family: Microsoft Yahei,SimSun,Helvetica; }
10.改变单词的大小写
首字母大写：text-transform:capitalize
全部大写：text-transform:uppercase
全部小写：text-transform:lowercasecase
5.背景background
1.渐变兼容性
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#35FEA1,endColorStr=#6E9DFF); IE 6 7 8
background: -ms-linear-gradient(top, #35FEA1, #6E9DFF); IE 10
background:-moz-linear-gradient(top, #35FEA1, #6E9DFF); 火狐
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#35FEA1), to(#6E9DFF));谷歌
background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#35FEA1), to(#6E9DFF)); Safari 4-5, Chrome 1-9
background: -webkit-linear-gradient(top, #35FEA1, #6E9DFF);Safari5.1 Chrome 10+
background: -o-linear-gradient(top, #35FEA1, #6E9DFF);Opera 11.10+
2.作为网页背景，不重复，靠上靠左：body{background:url(xxx.png) no-repeat 0 0 }
3.背景图横向居中：background:url(xxx.png) no-repeat center top
4.背景图纵向居中：background:url(xxx.png) no-repeat left 50%
6.表格元素
1.设置表格中的td宽度固定：table{table-layout:fixed;}
2.合并表格边框：table{border-collapse:collapse;}
7.行内元素
1、行内元素/行内块 多个元素并排时会有几px间距，2个方法解决
1.不需要改动代码，只需要把span元素放在同一行书写即可，不推荐
2.改变父元素的font-size为0，然后在span再设置回去
2、行内元素和行内块级元素在一个行框内排列,如img与p，会有行框，不对齐，解决
在img上添加vertical-align:top | middle | bottom;来设置对齐效果
2、制作动画：变换，transform、过渡，transition、动画，animation
变换
2D缩放：scale(x,y)
2D转换：translate(x,y)
2D旋转：rotate(angle)
2D倾斜：skew(x-angle,y-angle)
3D缩放:scale3d(x,y,z)
3D转换：translate3d(x,y,z)
3D旋转：rotate3d(x,y,z,angle)
3D元素透视：perspective(n)
过渡：效果、时间、速度曲线、效果开始的时候
transition: property duration timing-function delay;
动画
创建动画：@keyframes 动画名{ from{} to{} }
调用动画：动画名，时间，速度曲线，开始时间，播放次数，是否循环
animation: myfirst 5s linear 2s infinite alternate;
3、媒体查询：针对不同的媒体类型定义不同的样式
1、PC网站简单适配规则：适配几个常规的
1.大屏幕：@media (min-width:2560px){}
2.中等屏幕：@media (min-width:1024px) and (max-width:1365px){}
3.小屏幕：@media (min-width:981px) and (max-width:1023px){}
4.移动端：@media (min-width:320px) and (max-width:980px){}
2、wap网站简单适配：适配iphone为主
1.iphonex简单适配：812-44-44-34=690，使用Safe Area高度
@media only screen and (width: 375px) and (height:690px) {
html,body{height: 690px;}
}
iphone6/7/8s
@media only screen and (width: 414px) and (height:736px) {}
iphone6/7/8
@media only screen and (width: 375px) and (height:667px) {}
iphone5
@media only screen and (width: 320px) and (height:568px) {}
4、取值和单位：px：绝对单位、em：继承父元素、rem：根据根元素
web网站多用px，移动端网站多用rem
5、CSS引入方式及优先级
@import 只能加载CSS，在网页瓦全加载后加载
!important > 内联式 > 嵌入式 > 外部式
6、去除默认样式
默认边距： * { margin:0;padding:0; }
列表前的圆点： ul,ol,li { list-style:none; }
超链接下划线：a { text-decoration:none; }
图片默认边框： img { border:none;border:0; }
表单元素自带： input,textarea,button,select { border:0;border:none;outline:0;resize:0;border-radius:0; }
7、怎么让一个不定宽高的 DIV，垂直水平居中
1.使用flex，父元素设置：display:flex;justify-content:center;align-items:center;
2.使用 CSS3 transform，父盒子设置:position:relative
Div 设置: transform: translate(-50%，-50%);position: absolute;top: 50%;left: 50%;
3.使用 display:table-cell 方法
父盒子设置:display:table-cell; text-align:center;vertical-align:middle;
Div 设置: display:inline-block;vertical-align:middle;
8、隐藏元素的4种方法
display：none;
visibility:hidden;
opacity:0;
设置height，width等盒模型属性为0
9、透明度兼容：div{filter: alpha(opacity=80);opacity:0.8;}
10、元素居中的16种方法
1.主要用到的属性
text-align:center;
line-height
margin:0 auto;
padding
display:inline-block | flex | table;
position:relative | absolute;
transform
2.水平居中
1.行内元素，父元素使用text-align: center;
2.单个块级元素，自身使用margin:0 auto;
3.多个块级元素,同行居中，自身使用inline-block;
4.多个块级元素,同行居中，父元素使用display:flex;子元素使用flex:1;
5.多个块级元素，同列居中,自身使用margin:0 auto;
3.垂直居中
1.行内元素,单行,自身使用padding
2.行内元素,单行,自身使用line-height
3.行内元素,多行,父元素使用 display: table;子元素使用 display: table-cell;vertical-align: middle;
4.行内元素,多行,父元素使用display: flex;flex-direction: column;子元素使用 flex: 1;
5.行内元素,多行,使用 伪类
6.块级元素，知道高度，父元素使用position: relative;
子元素使用 position: absolute;top: 50%;height: 100px;margin-top: -50px;高度的一半
7.块级元素，不知道高度，父元素position: relative;子元素使用top: 50%;transform: translateY(-50%);
8.块级元素，父元素使用
display: flex;flex-direction: column;justify-content: center;
4.垂直水平居中
1.知道 宽度和高度，父元素使用position: relative;
子元素position: absolute;top: 50%;left: 50%;margin: -50px 0 0 -100px;
2.不知道 宽度和高度，父元素使用 position: relative;
子元素 position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
3.flexbox，父元素使用 display: flex;justify-content: center;align-items: center;
四、层叠相关知识点
========================================================================
1、文档流概念 Normal Flow
1.标准流：又称文档流、普通流
1.浏览器默认的排版方式：从左往右，从上往下的流式排列
2.元素分类：块级、行内、行内块
3.排版方式：垂直、水平
4.特点：img之间有空隙、空白折叠现象、高矮不齐，底边对齐、自动换行，一行写不满，换行写
2.浮动流：半脱离标准流的排版方式，可控性低
1.脱离文档流
1.不再区分行内、块级、行内块元素，都可以水平排列
2.都可以设置宽高，如同块级元素
3.脱标，就像是从标准流中删除了一样
4.如前面一元素浮动走了，后面没有元素浮动，那么垂直方向元素就会自动填充，浮动元素重新归位后就会覆盖该元素
5.只有一种水平排版一种排版方式，只能设置左对齐或者右对齐，没有居中取值
6.使用后margin:0 auto;失效
2.完全脱离：指的是元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样
3.半脱离：浮动元素浮动之后的位置取决于它在浮动之前的标准流中的位置，跟标准流还是有一定关系
比如说浮动的元素在浮动之前处于标准流的第二行，那么浮动后也是处于浮动流的第二行，贴靠的准则有
1同一个方向上谁先浮动谁在前面
2不同方向上左浮动找左浮动，右浮动找右浮动
4.浮动元素贴靠问题：父元素宽度足够浮动元素就会并列显示，不够就贴前一个元素
5.解决浮动带来的问题：清除浮动
3.定位流：和浮动类似，可控性高
1.相对定位就是相对于自己以前在标准流中的位置来移动
注意点
1.同一个方向上的定位属性只能使用一个，即top|bottom，left|right
2.不脱离标准流，所以区分块级、行内、行内块元素
3.会继续在标准流中占用一份空间
4.给相对定位的元素设置margin|padding等属性，是以该标签原来的位置为基础进行偏移
应用场景
1.用于对元素进行微调
2.配合子元素绝对定位使用
2.固定定位|绝对定位：固定定位和绝对定位高度相似，和背景的关联方式也高度相似，
可以让某元素不随滚动条滚动而滚动，注意点
1.脱离文档流，不会占用标准流中的空间
2.不区分块级、行内、行内块元素
3.IE6不支持固定定位
3.静态定位：默认的标准流
应用场景：用于配合JS清除定位属性z-index属性
z-index属性：用于指定定位元素的覆盖关系
1.定位的元素覆盖没有定位的元素
2.写在后面的定位元素会盖住前面的定位元素
3.默认值是0，设置后数值越大层级越高
注意点：从父现象
父元素没有z-index值，子元素有，那么谁的数值大谁显示在前面
父元素有值，那么父元素谁的数值大就谁显示在前面
4.解决定位带来的问题：固定定位兼容性
2、格式化上下文 Formatting Context
1.简单说明：初始元素定义的环境，元素在此环境中应当如何排版布局
2.进行分类：常用BFC、IFC
BFC：块级 格式化上下文，表示盒子从上到下垂直排列
IFC：内联 格式化上下文，表示盒子从左到右水平排列
FFC：自适应 格式化上下文
GFC：网格布局 格式化上下文
3.实际应用：块级格式化上下文
简单解释：BFC就是页面上一个隔离的独立容器，容器内外的元素互不影响
触发条件：
根元素
float 的值不为 none
overflow 的值不为 visible
display 的值为 inline-block | table-cell | table-caption
position 的值为 absolute| fixed
应用场景：
1.防止margin重叠
2.清除浮动：overflow:hidden;
3.多栏布局的一种方式:实现左固定右自适应的两列布局
3、层叠上下文 Stacking Context
网页及其每个元素都有一个坐标系统，包含一个三维z轴，其中元素是层叠的，x轴指向屏幕右边，
y轴指向屏幕底部，z轴指向查看者
形成条件：
1.根元素 html
2.z-index 值不为 auto
3.position 值为 fixed
4.父元素display: flex | inline-flex
5.opacity 属性值小于 1 的元素
6.transform 属性值不为 none的元素
7.-webkit-overflow-scrolling 属性被设置 touch的元素
4、层叠水平 Stacking Level
简单说明：决定了同一个层叠上下文中元素在z轴上的显示顺序
注意点：和CSS的z-index属性不能混为一谈
5、层叠顺序 Stacking Order
默认自然层叠顺序，共有7种层叠等级
背景和边框：最低等级
负的z-index值：层叠上下文内有负z-index的子元素
块级盒子：非行内非定位元素
浮动盒子：非定位浮动元素
行内盒子：行内级别非定位子元素
z-index：0，定位元素，形成了新的的层叠上下文
正index值：绝对定位元素，最高等级
6、参考教程：文档流概念、层叠相关概念
五、附录：纯CSS实现效果
========================================================================