新鲜出炉的前端面试题之CSS

css选择器种类
（1）id选择器（#myid）1,0,0
（2）类选择器（.myclassname）0,1,0
（3）伪类选择器（a:hover,li:nth-child）0,1,0
（4）属性选择器（a[rel="external"]）0,1,0
（5）标签选择器（div,h1,p）0,0,1
（6）伪元素选择器（::before、::after）0,0,1
（7）后代选择器（h1 p） （后代选择器：就是对象当中所有的子元素，孙子元素以及最底层的元素）
（8）相邻后代选择器（子）选择器（ul>li）(子选择器：就单单是子元素，子元素的子元素就不算了)
（9）兄弟选择器（li~a）(通用兄弟选择器：是选中元素后的所有兄弟元素（不须为相邻）)
（10）相邻兄弟选择器（li+a）(相邻兄弟选择器：选择紧接在另一个元素后的元素，而且二者有相同的父元素)
（11）通配符选择器（*）0,0,0
选择器优先级
有3大类选择器。他们有不同的优先级。
如果选择器的 ID 数量更多，则它会胜出（即它更明确）。
如果 ID 数量一致，那么拥有最多类的选择器胜出。 
如果以上两次比较都一致，那么拥有最多标签名的选择器胜出。(id > 类,伪类 ,属性> 标签,伪元素)
伪类选择器（如:hover）和属性选择器（如[type="input"]）
与一个类选择器的优先级相同。通用选择器（*）和组合器（>、+、~）对优先级没有影响
口诀  是遇同级比数量，遇不同级，找高级，全一样，看先后，后者胜。
复制代码

盒模型指的是网页元素的结构。当指定一个元素的宽度或高度时，便设置了元素内容（content）的尺寸—— 
任何内边距（padding）、边框（border）、外边距（margin）都会基于它叠加。
盒模型都是由四个部分组成的，分别是margin、border、padding和content。 
标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同。
标准盒模型的width和height属性的 范围只包含了content，
而IE盒模型的width和height属性的范围包含了border、padding和content。 
一般来说，我们可以通过修改元素的box-sizing属性来改变元素的盒模型。
复制代码

（1）有两种盒子模型：IE盒模型（border-box）、W3C标准盒模型（content-box）
（2）盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个部分
IE盒模型和W3C标准盒模型的区别：
（1）W3C标准盒模型：属性width，height只包含内容content，不包含border和padding
（2）IE盒模型：属性width，height包含content、border和padding，指的是content+padding+border。
①box-sizing 的默认值为 content-box，这意味任何指定的宽或高都只会设置内容盒子的大小
②在ie8+浏览器中使用哪个盒模型可以由box-sizing（CSS新增的属性）控制，
默认值为content-box，即标准盒模型；
③如果将box-sizing设为border-box则用的是IE盒模型。
如果在ie6，7，8中DOCTYPE缺失会将盒子模型解释为IE盒子模型。
若在页面中声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C盒模型。
复制代码

双冒号和单冒号的区别
在css3中伪类选择器用于选中处于某个特定状态的元素。这种状态可能是由于用户交互，也可能是由 
于元素相对于其父级或兄弟元素的位置。伪类选择器始终以一个冒号（:）开始。
在css3中伪元素类似于伪类，但是它不匹配特定状态的元素，而是匹配在文档中没有直接对应 HTML 
元素的特定部分。伪元素选择器可能只匹配元素的一部分，甚至向 HTML 标记中未定义的地方 
插入内容。
2者都是伪元素选择器，单冒号是浏览器为了向后兼容而允许的。
::after,::before作用:
创建一个伪元素，使其成为匹配元素的第(最后)一个子元素，
该元素默认是行内元素，可用于插入文字、图片或其他形状，
必须指定 content 属性才能让元素出现。
复制代码

伪类选择器用于选中处于某个特定状态的元素。这种状态可能是由于用户交互，也可能是由 
于元素相对于其父级或兄弟元素的位置。伪类选择器始终以一个冒号（:）开始。
伪元素类似于伪类，但是它不匹配特定状态的元素，而是匹配在文档中没有直接对应 HTML 
元素的特定部分。伪元素选择器可能只匹配元素的一部分，甚至向 HTML 标记中未定义的地方 
插入内容。
这些选择器以双冒号（::）开头，尽管大多数浏览器也支持单冒号的语法以便向后兼容。
::before——创建一个伪元素，使其成为匹配元素的第一个子元素。该元素默认是行内 
元素，可用于插入文字、图片或其他形状。必须指定 content 属性才能让元素出现，例 
如：.menu::before。
::after——创建一个伪元素，使其成为匹配元素的最后一个子元素。该元素默认是行 
内元素，可用于插入文字、图片或其他形状。必须指定 content 属性才能让元素出现， 
例如：.menu::after。
复制代码

css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母（伪元素），或者是列表中的第一个元素（伪类）。
伪类选择器用于选中处于某个特定状态的元素。这种状态可能是由于用户交互（:hover,:focus等等），也可能是由于元素相对于其父级或兄弟元素的位置（child类，type类）。伪类选择器始终以一个冒号（:）开始。
伪元素类似于伪类，但是它不匹配特定状态的元素，而是匹配在文档中没有直接对应 HTML 
元素的特定部分。伪元素选择器可能只匹配元素的一部分（一句话中的第一个字母::first-letter,等等），甚至向 HTML 标记中未定义的地方 （创建一个伪元素，使其成为匹配元素的第一个子元素::before,等等）
插入内容。
伪元素选择器以双冒号（::）开头，尽管大多数浏览器也支持单冒号的语法以便向后兼容。
复制代码

如果一个元素的某个属性没有层叠值，则可能会继承某个祖先元素的值。
每一个属性在定义中都给出了这个属性是否具有继承性，一个具有继承性的属性会在没有指定值的时候，会使用父元素的同属性的值来作为自己的值。
一般具有继承性的属性有，
字体，文本相关的属性，（color、font、font-family、font-size、font-weight、font-variant、font-style、line-height、letter-spacing、text-align、
text-indent、text-transform、white-space 以及 word-spacing。）
表格的一些边框属性，这些属性控制的是表格的边框行为，而不是常用于指定非表格元素边框的属性。（border-collapse 和border-spacing）
列表属性（list-style、list-style-type、list-style-position 以及 list-style-image。）。
光标属性cursor、元素可见性visibility。
当一个属性不是继承属性的时候，我们也可以通过将它的值设置为inherit来使它从父元素那获取同名的属性值来继承。
复制代码

每个CSS属性定义的概述都指出了这个属性是默认继承的，还是默认不继承的。这决定了当你没有为元素的属性指定值时该如何计算
值。
当元素的一个继承属性没有指定值时，则取父元素的同属性的计算值。只有文档根元素取该属性的概述中给定的初始值（这里的意思应
该是在该属性本身的定义中的默认值）。
当元素的一个非继承属性（在Mozilla code里有时称之为reset property）没有指定值时，则取属性的初始值initial v
alue（该值在该属性的概述里被指定）。
有继承性的属性：
（1）字体系列属性
font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust
（2）文本系列属性
text-indent、text-align、text-shadow、line-height、word-spacing、letter-spacing、
text-transform、direction、color
（3）表格布局属性
caption-side border-collapse empty-cells
（4）列表属性
list-style-type、list-style-image、list-style-position、list-style
（5）光标属性
cursor
（6）元素可见性
visibility
（7）还有一些不常用的；speak，page，设置嵌套引用的引号类型quotes等属性
注意：当一个属性不是继承属性时，可以使用inherit关键字指定一个属性应从父元素继承它的值，inherit关键字用于显式地
指定继承性，可用于任何继承性/非继承性属性。
复制代码

一个常用的表示优先级的方式是用数值形式来标记，通常用逗号隔开每个数。
判断优先级时，首先我们会判断一条属性声明是否有权重，也就是是否在声明后面加上了!important。一条声明如果加上了权重，
那么它的优先级就是最高的，前提是它之后不再出现相同权重的声明。如果权重相同，我们则需要去比较匹配规则的特殊性。
一条匹配规则一般由多个选择器组成，一条规则的特殊性由组成它的选择器的特殊性累加而成。选择器的特殊性可以分为四个等级，
第一个等级是行内样式，为1000，第二个等级是id选择器，为0100，第三个等级是类选择器、伪类选择器和属性选择器，为0010，
第四个等级是元素选择器和伪元素选择器，为0001。规则中每出现一个选择器，就将它的特殊性进行叠加，这个叠加只限于对应的等
级的叠加，不会产生进位。选择器特殊性值的比较是从左向右排序的，也就是说以1开头的特殊性值比所有以0开头的特殊性值要大。
比如说特殊性值为1000的的规则优先级就要比特殊性值为0999的规则高。如果两个规则的特殊性值相等的时候，那么就会根据它们引
入的顺序，后出现的规则的优先级最高。
复制代码

CSS的优先级是根据样式声明的特殊性值来判断的。
选择器的特殊性值分为四个等级，如下：
（1）标签内选择符x,0,0,0
（2）ID选择符0,x,0,0
（3）class选择符/属性选择符/伪类选择符 0,0,x,0
（4）元素和伪元素选择符0,0,0,x
计算方法：
（1）每个等级的初始值为0
（2）每个等级的叠加为选择器出现的次数相加
（3）不可进位，比如0,99,99,99
（4）依次表示为：0,0,0,0
（5）每个等级计数之间没关联
（6）等级判断从左向右，如果某一位数值相同，则判断下一位数值
（7）如果两个优先级相同，则最后出现的优先级高，!important也适用
（8）通配符选择器的特殊性值为：0,0,0,0
（9）继承样式优先级最低，通配符样式优先级高于继承样式
（10）!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。
计算实例：
（1）#demo a{color: orange;}/*特殊性值：0,1,0,1*/
（2）div#demo a{color: red;}/*特殊性值：0,1,0,2*/
注意：
（1）样式应用时，css会先查看规则的权重（!important），加了权重的优先级最高，当权重相同的时候，会比较规则的特殊性。
（2）特殊性值越大的声明优先级越高。
（3）相同特殊性值的声明，根据样式引入的顺序，后声明的规则优先级高（距离元素出现最近的）
 (4) 部分浏览器由于字节溢出问题出现的进位表现不做考虑
复制代码

a标签有五种状态：链接访问前、链接访问后、链接获得焦点时、鼠标滑过、激活，分别对应五种伪类:link、:visited、：focus、:hover、:active；
这些选择符的特指度相等,都是0,0,1,0。因为它们的显式权重、来源和特指度都一样，所以最后一个匹配的规则将胜出。因此顺序很重要。
链接状态要么已访问，要么未访问，因此:link和:visited总是会把其他的规则覆盖掉。所以得放其他规则的前面，因为状态不同，所以:link和:visited可以不考虑顺序。
其他3个样式必须按FHA的顺序书写了。当active时（点击），鼠标通常其实还在hover状态，
所以是两者都满足的情况，在两条规则specificity一样的情况下，color取值就会是后写的hover里的值，也就意味着你给active设定的color并未生效。
当然如果把伪类串起来书写就不用考虑规则的前后顺序了。但是在不同状态写多个伪类时要考虑顺序（FHA）。
复制代码

伪类选择器用于选中处于某个特定状态的元素。这种状态可能是由于用户交互，也可能是由
于元素相对于其父级或兄弟元素的位置。伪类选择器始终以一个冒号（:）开始。优先级等于一
个类选择器（0,1,0）。
 :first-child——匹配的元素是其父元素的第一个子元素。
 :last-child——匹配的元素是其父元素的最后一个子元素。
 :only-child——匹配的元素是其父元素的唯一一个子元素（没有兄弟元素）。
 :nth-child(an+b)——匹配的元素在兄弟元素中间有特定的位置
 :nth-last-child(an+b)——类似于:nth-child()，但不是从第一个元素往后数，而
是从最后一个元素往前数。括号内的公式与:nth-child()里的公式的规则相同。
 :first-of-type——类似于:first-child，但不是根据在全部子元素中的位置查找元
素，而是根据拥有相同标签名的子元素中的数字顺序查找第一个元素。
 :last-of-type——匹配每种类型的最后一个子元素。
 :only-of-type——该选择器匹配的元素是满足该类型的唯一一个子元素。
 :nth-of-type(an+b)——根据目标元素在特定类型下的数字顺序以及特定公式选择元
素，类似于:nth-child。
 nth-last-of-type(an+b)——根据元素类型以及特定公式选择元素，从其中最后一个
元素往前算，类似于:nth-last-child。
 :not(<selector>)——匹配的元素不匹配括号内的选择器。括号内的选择器必须是基
础选择器，它只能指定元素本身，无法用于排除祖先元素，同时不允许包含另一个排除
选择器。
 :empty——匹配的元素必须没有子元素。注意，如果元素包含空格就无法由该选择器
匹配，因为空格在 DOM 中属于文本节点。写作本书时，W3C 正在考虑:blank 伪类选择
器，它跟:empty 的行为类似，但是能选中仅包含空格的元素，目前还没有浏览器支
持:blank。
 :focus——匹配通过鼠标点击、触摸屏幕或者按 Tab 键导航而获得焦点的元素。
 :hover——匹配鼠标指针正悬停在其上方的元素。
 :root——匹配文档根元素。对 HTML 来说，这是<html>元素，但是 CSS 还可以应用到
XML 或者类似于 XML 的文档上，比如 SVG。在这些情况下，该选择器的选择范围更广。
还有一些表单域相关的伪类选择器。其中一些是在选择器 Level4 版本的规范中提出或者修
订的，因此在 IE10 以及其他一些浏览器中不受支持。请在 Can I Use 网站上查看兼容情况。
 :disabled——匹配已禁用的元素，包括 input、select 以及 button 元素。
 :enabled——匹配已启用的元素，即那些能够被激活或者接受焦点的元素。
 :checked——匹配已经针对选定的复选框、单选按钮或选择框选项。
 :invalid——根据输入类型中的定义，匹配有非法输入值的元素。例如，当<input 
type="email">的值不是一个合法的邮箱地址时，该元素会被匹配（Level4）。
 :valid——匹配有合法值的元素（Level4）。
 :required——匹配设置了 required 属性的元素（Level4）。
 :optional——匹配没有设置 required 属性的元素（Level4）。以上并未列出全部伪类
选择器。请参阅 MDN 文档 Pseudo-classes，查看 MDN 上的完整清单
复制代码

一般常见的几种居中的方法有：
对于宽高固定的元素
（1）我们可以利用margin:0 auto来实现元素的水平居中。
（2）利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水
平和垂直方向上的居中。
（3）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素
的中心点到页面的中心。
（4）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素
的中心点到页面的中心。
（5）使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对
齐，然后它的子元素也可以实现垂直和水平的居中。
对于宽高不定的元素，下面的后面两种方法，可以实现元素的垂直和水平的居中。
复制代码

-水平居中：给 div 设置一个宽度，然后添加 margin:0 auto 属性
```css
div {
  width: 200px;
  margin: 0 auto;
}
```
-水平居中，利用 text-align:center 实现
```css
.container {
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  font-size: 0;
}
.box {
  display: inline-block;
  width: 500px;
  height: 400px;
  background-color: pink;
}
```
-让绝对定位的 div 居中
```css
div {
  position: absolute;
  width: 300px;
  height: 300px;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: pink; /*方便看效果*/
}
```
-水平垂直居中一
```css
/*确定容器的宽高宽500高300的层设置层的外边距div{*/
position: absolute;/*绝对定位*/
width: 500px;
height: 300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -250px;/*外边距为自身宽高的一半*/
background-color: pink;/*方便看效果*/
}
```
-水平垂直居中二
```css
/*未知容器的宽高，利用`transform`属性*/
div {
  position: absolute; /*相对定位或绝对定位均可*/
  width: 500px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: pink; /*方便看效果*/
}
```
-水平垂直居中三
```css
/*利用flex布局实际使用时应考虑兼容性*/
.container {
  display: flex;
  align-items: center; /*垂直居中*/
  justify-content: center; /*水平居中*/
}
.containerdiv {
  width: 100px;
  height: 100px;
  background-color: pink; /*方便看效果*/
}
```
-水平垂直居中四
```css
/*利用text-align:center和vertical-align:middle属性*/
.container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  font-size: 0;
  white-space: nowrap;
  overflow: auto;
}
.container::after {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.box {
  display: inline-block;
  width: 500px;
  height: 400px;
  background-color: pink;
  white-space: normal;
  vertical-align: middle;
}
```
复制代码

值 描述
none  此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline  默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block  行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in  此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker  CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table  此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group  此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group  此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group  此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column  此元素会作为一个单元格列显示（类似 <col>）
table-cell  此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
inherit 规定应该从父元素继承 display 属性的值。
flex flex布局
grid grid布局
复制代码

relative定位的元素，是相对于元素本身的正常位置来进行定位的。
absolute定位的元素，是相对于它的第一个position值不为static的祖先元素的padding box来进行定位的。这句话
我们可以这样来理解，我们首先需要找到绝对定位元素的一个position的值不为static的祖先元素，然后相对于这个祖先元
素的padding box来定位，也就是说在计算定位距离的时候，padding的值也要算进去。
复制代码

1.对非根元素来说,如果position属性的值是relative或static,其容纳块由最近的块级、单元格或行内块级祖辈元素框体的内容边界划定。
2.对非根元素来说，如果position属性的值是 absolute，其容纳块是position属性的值不是static的最近的祖辈元素(任何类型）。
  ①如果祖辈元素是块级元素,容纳块是那个元素的内容距边界，即由边框限定的区域。
  ②如果祖辈元素是行内元素,容纳块是祖辈元素的内容边界。
  在由左至右书写的语言中，容纳块的顶边和左边是祖辈元素中第一个框体的内容边界的顶边和左边，底边和右边是最后一个框体的内容边界的底边和右边。
  在从右向左书写的语言中，容纳块的右边界是第一个框体内容区的右边界，左边界是最后一个框体内容区的左边界;顶边和底边与前述情况一样。
  ③如果没有祖辈元素,元素的容纳块是初始容纳块。
复制代码

新增各种CSS选择器  （:not(.input)：所有class不是“input”的节点）
圆角    （border-radius:8px）
多列布局  （multi-column layout）
阴影和反射 （Shadow\Reflect）
文字特效    （text-shadow）
文字渲染    （Text-decoration）
线性渐变    （gradient）
旋转      （transform）
缩放，定位，倾斜，动画，多背景
例如：transform:\scale(0.85,0.90)\translate(0px,-30px)\skew(-9deg,0deg)\Animation:
复制代码

flex布局是CSS3新增的一种布局方式，我们可以通过将一个元素的display属性值设置为flex从而使它成为一个flex
容器，它的所有子元素都会成为弹性子元素。
一个容器默认有两条轴，一个是水平的主轴，一个是与主轴垂直的交叉轴。我们可以使用flex-direction来指定主轴的方向。
我们可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。
还可以使用flex-wrap来规定当一行排列不下时的换行方式。
对于容器中的弹性子元素，我们可以使用order属性来指定弹性子元素的排列顺序。
还可以使用flex-grow来指定当排列空间有剩余的时候，弹性子元素的放大比例。
还可以使用flex-shrink来指定当排列空间不足时，弹性子元素的缩小比例。
复制代码

采用的是相邻边框连接处的均分原理。
  将元素的宽高设为0，只设置
  border
  ，把任意三条边隐藏掉（颜色设为
  transparent），剩下的就是一个三角形。
  #demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
  // border:20px solid transparent transparent red transparent;
}
复制代码

- 浮动布局
    * {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        height: 100%; /*此设置非常关键，因为默认的body，HTML高度为0，所以后面设置的div的高度无法用百分比显示*/
      }
      .header {
        height: 50%; /*此步结合html,body高度为100%，解决元素相对窗口的定位问题*/
        width: 50%;
        background: #ccc;
        margin: 0 auto;
      }
      .main {
        width: 100%;
        height: 50%;
        background: #ddd;
      }
      .main .left,
      .main .right {
        float: left; /*采用float方式，对元素进行左右定位*/
        width: 50%; /*此步解决元素相对窗口的定位问题*/
        height: 100%; /*此步解决元素相对窗口的定位问题*/
        background: yellow;
      }
      .main .right {
        background: green;
      }
- 定位布局
 body {
        height: 1200px;
      }
      .main {
        position: fixed; /*此步解决元素相对窗口的定位问题*/
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
      }
      .wrapper-up {
        height: 50%;
      }
      .wrapper-down {
        height: 50%;
        position: relative;
      }
      .div-square-up {
        width: 50%;
        margin: 0 auto;
        border: 2px solid red;
        height: 96%;
        box-sizing: border-box;
      }
      .div-square-left {
        position: absolute; /*此步解决元素左右定位问题*/
        left: 0;
        width: 48%;
        height: 100%;
        box-sizing: border-box;
        border: 2px solid red;
      }
      .div-square-right {
        position: absolute; /*此步解决元素左右定位问题*/
        right: 0;
        width: 48%;
        height: 100%;
        border: 2px solid red;
        box-sizing: border-box;
      }
复制代码

（1）利用padding-bottom|margin-bottom正负值相抵，不会影响页面布局的特点。设置父容器设置超出隐藏（overflow:
hidden），这样父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则
父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。
（2）利用table-cell所有单元格高度都相等的特性，来实现多列等高。
（3）利用flex布局中项目align-items属性默认为stretch，如果项目未设置高度或设为auto，将占满整个容器的高度
的特性，来实现多列等高。
复制代码

-  CSS 表格布局 （table + table-cell + border-spacing + margin负外边距）
     .wrapper {
        margin-left: -1.5em;
        margin-right: -1.5em;
      }
      .container {
        display: table;
        width: 100%;
        border-spacing: 1.5em 0;
      }
      .main {
        display: table-cell;
        width: 70%;
        background-color: coral;
      }
      .sidebar {
        display: table-cell;
        width: 30%;
        padding: 1.5em;
        background-color: red;
      }
- Flexbox （如果你不用支持 IE9 及其以下的浏览器，建议使用 Flexbox 而不是表格布局）
    .container {
      display: flex;
    }
    .main {
      width: 70%;
      background-color: orange;
    }
    .sidebar {
      width: 30%;
      margin-left: 1.5em;
      background-color: skyblue;
    }
复制代码

（1）png24位的图片在iE6浏览器上出现背景
解决方案：做成PNG8，也可以引用一段脚本处理。
（2）浏览器默认的margin和padding不同
解决方案：加一个全局的*{margin:0;padding:0;}来统一。
（3）IE6双边距bug：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或
margin-right，margin值会加倍。
#box{float:left;width:10px;margin:0 0 0 10px;}
这种情况之下IE会产生20px的距离
解决方案：在float的标签样式控制中加入_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
（4）渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用"\9"这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用"+"将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
.bb{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9;/*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
（5）IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义
属性；Firefox下，只能使用getAttribute()获取自定义属性
解决方法：统一通过getAttribute()获取自定义属性。
（6）IE下，event对象有x、y属性，但是没有pageX、pageY属性;Firefox下，event对象有
pageX、pageY属性，但是没有x、y属性。
解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
（7）Chrome中文界面下默认会将小于12px的文本强制按照12px显示
解决方法：
1.可通过加入CSS属性-webkit-text-size-adjust:none;解决。但是，在chrome
更新到27版本之后就不可以用了。
2.还可以使用-webkit-transform:scale(0.5);注意-webkit-transform:scale(0.75);
收缩的是整个span的大小，这时候，必须要将span转换成块元素，可以使用display：block/inline-block/...；
（8）超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了
解决方法：改变CSS属性的排列顺序L-V-H-A
（9）怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模
式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。
复制代码

浏览器会把inline元素间的空白字符（空格、换行、Tab等）渲染成一个空格。而为了美观。我们通常是一个<li>放在一行，
这导致<li>换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。
解决办法：
（1）为<li>设置float:left。不足：有些容器是不能设置浮动，如左右切换的焦点图等。
（2）将所有<li>写在同一行。不足：代码不美观。
（3）将<ul>内的字符尺寸直接设为0，即font-size:0。不足：<ul>中的其他字符尺寸也被设为0，需要额外重新设定其他
字符尺寸，且在Safari浏览器依然会出现空白间隔。
（4）消除<ul>的字符间隔letter-spacing:-8px，不足：这也设置了<li>内的字符间隔，因此需要将<li>内的字符
间隔设为默认letter-spacing:normal。
复制代码

-因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
-当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
最简单的初始化方法：*{padding:0;margin:0;}（强烈不建议）
淘宝的样式初始化代码：
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend
,button,input,textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font:12px/1.5tahoma,arial,\5b8b\4f53;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:couriernew,courier,monospace;}
small{font-size:12px;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
复制代码

一般而言，容纳块指包含另一个元素的框体，但是对定位元素来说,容纳块完全取决于定位类型。（包含块也叫容纳块）
对非根元素来说,如果position属性的值是relative或static,其容纳块由最近的块级、单元格或行内块级祖辈元素框体的内容边界划定。
对非根元素来说，如果position属性的值是 absolute，其容纳块是position属性的值不是static的最近的祖辈元素(任何类型）。
  ①如果祖辈元素是块级元素,容纳块是那个元素的内边距边界，即由边框限定的区域。
  ②如果祖辈元素是行内元素,容纳块是祖辈元素的内容边界。
    1.在由左至右书写的语言中，容纳块的顶边和左边是祖辈元素中第一个框体的内容边界的顶边和左边，底边和右边是最后一个框体的内容边界的底边和右边。
    2.在从右向左书写的语言中，容纳块的右边界是第一个框体内容区的右边界，左边界是最后一个框体内容区的左边界;顶边和底边与前述情况一样。
  ③如果没有祖辈元素,元素的容纳块是初始容纳块。
对非根元素来说，如果元素position:fixed，则“包含块”是“初始包含块”。
对粘滞定位的元素来说，容纳块的边界由粘滞限定矩形确定。粘滞定位就发生在这个矩形中
另外，定位的元素可能位于容纳块外部。浮动元素可以使用负外边距移到父元素的内容区外部
复制代码

visbility: collapse在渲染表格时使用
collapse与用在非表格元素上的hidden具有相同的作用。
但例外的是，如果这个元素是table相关的元素，
例如table行，table group，table列，table column group，
它的表现却跟display: none一样，也就是说，它们占用的空间也会释放。
在不同浏览器下的区别：
在谷歌浏览器里，使用collapse值和使用hidden值没有什么区别。
在火狐浏览器、Opera和IE11里，使用collapse值的效果就如它的字面意思：table的行会消失，它的下面一行会补充它的位
置。
复制代码

一般而言
width:100%会使元素box的宽度等于父元素的content box的宽度。
width:auto会使元素撑满整个父元素，margin、border、padding、content区域会自动分配水平空间。
复制代码

绝对定位元素的宽高百分比是相对于临近的position不为static的祖先元素的padding box来计算的。
非绝对定位元素的宽高百分比则是相对于父元素的content box来计算的。
复制代码

base64编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，在页面上显示的时候，可以用该字符串来代替图片的
url属性。
使用base64的优点是：
（1）减少一个图片的HTTP请求
使用base64的缺点是：
（1）根据base64的编码原理，编码后的大小会比原文件大小大1/3，如果把大图片编码到html/css中，不仅会造成文件体
积的增加，影响文件的加载速度，还会增加浏览器对html或css文件解析渲染的时间。
（2）使用base64无法直接缓存，要缓存只能缓存包含base64的文件，比如HTML或者CSS，这相比域直接缓存图片的效果要
差很多。
（3）兼容性的问题，ie8以前的浏览器不支持。
一般一些网站的小图标可以使用base64图片来引入。