清除浮动
为什么：当一个元素浮动之后，不会影响到 块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会 自动伸高来闭合浮动元素（“高度塌陷”现象）。
1，在父元素中设置overflow：hidden，消除子元素浮动对页面的影响
缺点：不能和position一起使用，超出区域的部分会被隐藏
2，使用额外标签法：在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.
缺点：这种清除浮动的方式会增加页面的标签，造成结构的混乱.
3，父级div定义伪类：after和zoom
.clearfix:after{
content:"";//设置内容为空
height:0;//高度为0
line-height:0;//伪对象中设置height:0
display:block;//将文本转为块级元素
visibility:hidden;//将元素隐藏
clear:both//清除浮动
}
.clearfix{
zoom:1;//为了兼容IE
}
.parent{
width: 100%;
height: 37.5rem/* 600px */;
background: #09c;
display: flex;
justify-content:center; /* 水平居中 */
align-items:center; /* 垂直居中 */
/* flex-direction:column; */ /* 一列显示 */
}
.children{
width: 100px;
height: 100px;
border: 1px dashed #000;
margin: 5px;
/*如果children下面还有子元素的话，可以嵌套使用*/
/* display: flex;
justify-content: center;
align-items:center; */
}
2.利用绝对定位与transform
.parent{
position: absolute;
background-color: #eee;
width: 100%;
height: 100%;
}
.parent .children{
background-color: #751;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
}
3.将父元素定位，子元素绝对定位，利用margin负值为子元素宽高的一半来实现。
.parent{
position: relative;
background-color: #eee;
height: 600px;
width: 100%;
}
.parent .children{
background-color: #751;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
}
4.利用定位与margin：auto
.parent{
width: 100%;
height: 37.5rem/* 600px */;
background: #09c;
position: relative;
}
.children{
width: 100px;
height: 100px;
background-color: #eee;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
1，内联样式 <p style="...;...;"> ...... </p>
2，内部样式表 <style type="text/css"> ...... </style>
3，外部样式表 <link rel="stylesheet" type="text/css" href=" "/>,
4，浏览器默认
同类选择符条件下层级越多的优先级越高，优先级就近原则，同权重情况下样式定义最近者为准，载入样式以最后载入的定位为准。
2，使用嵌套选择器时：
一组嵌套选择器的实际特性可以计算出来。基本的，使用ID选择器的值是100，使用class选择器的值是10，每个html选择器的值是1。它们加起来就可以计算出特性的值。基本上，一个选择器越多特性，样式冲突的时候将显示它的样式。
2、如果你把一个元素设置为absolute，其他的属性（top，left，right和bottom）不进行设置，那么它只会被抠出来，其他元素占据它的位置，除此之外，没有其他任何变化。它相对的是第一个设置了定位方式（除static外）的父元素，如果所有的父元素都没有设置那就是body元素。
context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽
可继承的属性：font-size, font-family, color
不可继承的样式：border, padding, margin, width, height
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。
background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
word-wrap（对长的不可分割单词换行）word-wrap：break-word
文字阴影：text-shadow：5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
font-face属性：定义自己的字体
圆角（边框半径）：border-radius 属性用于创建圆角
边框图片：border-image: url(border.png) 30 30 round
盒阴影：box-shadow: 10px 10px 5px #888888
媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性
在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。
弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
2、IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。 display:inline;将其转化为行内属性。
3、渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接 着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
4、设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
5、IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。
6、Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
7、超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}
chrome中，使用collapse值和使用hidden没有区别。
firefox，opera和IE，使用collapse值和使用display：none没有什么区别。
display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）
类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。
<head>里边<link rel=”stylesheet” type=”text/css” href=”xxx.css” media=”only screen and (max-device-width:480px)”>
CSS : @media only screen and (max-device-width:480px) {/css样式/}
而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。
在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport。
<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>
::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。
font-size:10px;
-webkit-transform:scale(0.8); //0.8是缩放比例
}
解决方法：
可以将<li>代码全部写在一排
浮动li中float：left
在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px
jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.
webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。
2、 可以设置高度、宽度、各个方向外补丁（margin）以及各个方向的内补丁（padding）。
3、 当宽度（width）缺省时，它的宽度时其容器的100%，除非我们给它设定了固定的宽度。
4、 块级元素中可以容纳其他块级元素或行内元素。
5、 常见的块级元素由<p><div><h1><li>等等。
6、块级元素的display属性值默认为block。
2、行内元素不可以设置高度、宽度，其高度一般由其字体的大小来决定，其宽度由内容的长度控制。
3、行内元素只能设置左右的margin值和左右的padding值，而不能设置上下的margin值和上下的padding值。因此我们可以通过设置左右的padding值来改变行内元素的宽度。
4、常见的行内元素由<a><em><img>等等。
5、行内元素一般不可以包含块级元素。
Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;
Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).
为什么：当一个元素浮动之后，不会影响到 块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会 自动伸高来闭合浮动元素（“高度塌陷”现象）。
1，在父元素中设置overflow：hidden，消除子元素浮动对页面的影响
缺点：不能和position一起使用，超出区域的部分会被隐藏
2，使用额外标签法：在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.
缺点：这种清除浮动的方式会增加页面的标签，造成结构的混乱.
3，父级div定义伪类：after和zoom
.clearfix:after{
content:"";//设置内容为空
height:0;//高度为0
line-height:0;//伪对象中设置height:0
display:block;//将文本转为块级元素
visibility:hidden;//将元素隐藏
clear:both//清除浮动
}
.clearfix{
zoom:1;//为了兼容IE
}
保持浮层水平垂直居中
1.利用flexbox布局.parent{
width: 100%;
height: 37.5rem/* 600px */;
background: #09c;
display: flex;
justify-content:center; /* 水平居中 */
align-items:center; /* 垂直居中 */
/* flex-direction:column; */ /* 一列显示 */
}
.children{
width: 100px;
height: 100px;
border: 1px dashed #000;
margin: 5px;
/*如果children下面还有子元素的话，可以嵌套使用*/
/* display: flex;
justify-content: center;
align-items:center; */
}
2.利用绝对定位与transform
.parent{
position: absolute;
background-color: #eee;
width: 100%;
height: 100%;
}
.parent .children{
background-color: #751;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
}
3.将父元素定位，子元素绝对定位，利用margin负值为子元素宽高的一半来实现。
.parent{
position: relative;
background-color: #eee;
height: 600px;
width: 100%;
}
.parent .children{
background-color: #751;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
}
4.利用定位与margin：auto
.parent{
width: 100%;
height: 37.5rem/* 600px */;
background: #09c;
position: relative;
}
.children{
width: 100px;
height: 100px;
background-color: #eee;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
CSS优先级（样式层级关系）
2，内部样式表 <style type="text/css"> ...... </style>
3，外部样式表 <link rel="stylesheet" type="text/css" href=" "/>,
4，浏览器默认
选择器优先级
（!important>）id选择器>class选择器（属性选择器/伪类选择器）>标签选择器（伪元素选择器）同类选择符条件下层级越多的优先级越高，优先级就近原则，同权重情况下样式定义最近者为准，载入样式以最后载入的定位为准。
样式冲突
1，选择器一样的情况下后面的会覆盖前面的属性。2，使用嵌套选择器时：
一组嵌套选择器的实际特性可以计算出来。基本的，使用ID选择器的值是100，使用class选择器的值是10，每个html选择器的值是1。它们加起来就可以计算出特性的值。基本上，一个选择器越多特性，样式冲突的时候将显示它的样式。
绝对定位（absolute）
1、绝对定位就相当于你把定位的元素从文档中抠了出来，那么这个元素原来的位置就空了出来，可以由别的元素来占据2、如果你把一个元素设置为absolute，其他的属性（top，left，right和bottom）不进行设置，那么它只会被抠出来，其他元素占据它的位置，除此之外，没有其他任何变化。它相对的是第一个设置了定位方式（除static外）的父元素，如果所有的父元素都没有设置那就是body元素。
相对定位
如果一个元素被设置成了relative，它也相当于被抠了出来，但是它原来的位置不会被别的元素占据。这是与absolute不一样的地方。那么我自己设置被设置为relative的元素的top和left的值时，相对的元素就是元素自身。box-sizing属性
用来控制元素的盒子模型的解析模式，默认为content-boxcontext-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽
CSS选择器
CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child）可继承的属性：font-size, font-family, color
不可继承的样式：border, padding, margin, width, height
CSS3新增伪类
p:first-of-type 选择属于其父元素的首个元素p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。
CSS3新特性
RGBA和透明度background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
word-wrap（对长的不可分割单词换行）word-wrap：break-word
文字阴影：text-shadow：5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
font-face属性：定义自己的字体
圆角（边框半径）：border-radius 属性用于创建圆角
边框图片：border-image: url(border.png) 30 30 round
盒阴影：box-shadow: 10px 10px 5px #888888
媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性
CSS3的flexbox（弹性盒布局模型）
扫描二维码关注公众号，回复：
2339825 查看本文章
该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。
在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。
弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
常见的兼容性问题
1、不同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;}2、IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。 display:inline;将其转化为行内属性。
3、渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接 着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
4、设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
5、IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。
6、Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
7、超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}
CSS里的visibility属性
当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。chrome中，使用collapse值和使用hidden没有区别。
firefox，opera和IE，使用collapse值和使用display：none没有什么区别。
display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）
position跟display、overflow、float这些特性相互叠加后
display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。
移动端的布局的媒体查询
通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示。<head>里边<link rel=”stylesheet” type=”text/css” href=”xxx.css” media=”only screen and (max-device-width:480px)”>
CSS : @media only screen and (max-device-width:480px) {/css样式/}
浏览器是怎样解析CSS选择器
CSS选择器的解析是从右向左解析的。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。
在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。
响应式设计
响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport。
<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>
::before 和 :after中双冒号和单冒号有什么区别
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。
怎么让Chrome支持小于12px 的文字
p{font-size:10px;
-webkit-transform:scale(0.8); //0.8是缩放比例
}
让页面里的字体变清晰，变细
-webkit-font-smoothing：antialiased //最佳的，灰度平滑。在window系统不起作用，但是在IOS设备上起作用li与li之间有看不见的空白间隔
行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。解决方法：
可以将<li>代码全部写在一排
浮动li中float：left
在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px
png、jpg、gif 这些图片格式
png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。 大多数地方都可以用。jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.
webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。
CSS Sprites
将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；CSS Sprites能减少图片的字节。
块级元素特点：
1、 总是以一个块的形式表现出来，占领一整行。若干同级块元素会从上之下依次排列（使用float属性除外）。2、 可以设置高度、宽度、各个方向外补丁（margin）以及各个方向的内补丁（padding）。
3、 当宽度（width）缺省时，它的宽度时其容器的100%，除非我们给它设定了固定的宽度。
4、 块级元素中可以容纳其他块级元素或行内元素。
5、 常见的块级元素由<p><div><h1><li>等等。
6、块级元素的display属性值默认为block。
行内元素特点：
1、它不会单独占据一整行，而是只占领自身的宽度和高度所在的空间。若干同级行内元素会从左到右（即某个行内元素可以和其他行内元素共处一行），从上到下依次排列。2、行内元素不可以设置高度、宽度，其高度一般由其字体的大小来决定，其宽度由内容的长度控制。
3、行内元素只能设置左右的margin值和左右的padding值，而不能设置上下的margin值和上下的padding值。因此我们可以通过设置左右的padding值来改变行内元素的宽度。
4、常见的行内元素由<a><em><img>等等。
5、行内元素一般不可以包含块级元素。
6、行内元素的display属性值默认为inline。
CSS隐藏元素的几种方法
Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;
Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;
Position:不会影响布局，能让元素保持可以操作;
页面导入样式时，使用link和@import有什么区别？
link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
CSS的盒子模型？
IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).