1.介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？低版本的IE的盒子模型有什么不同？

有兩種：IE盒子模型、W3C盒子模型；
盒模型：內(nèi)容（content）、填充（padding）、邊界（margin）、邊框（border）；
區(qū)別：IE的content部分吧border和padding計(jì)算進(jìn)去；在CSS3中引入了box-sizing屬性，它可以允許改變默認(rèn)的CSS盒模型對(duì)原宿寬高的計(jì)算方式。
共包括兩個(gè)選項(xiàng)：
content-box：標(biāo)準(zhǔn)盒模型，CSS定義的寬高只包括content的寬高。
border-box：IE盒模型，CSS定義的寬高包括了content、padding和border。
在標(biāo)準(zhǔn)模式下，一個(gè)塊的總寬度=width+margin（左右）+padding（左右）+border（左右）
在怪異模式下，一個(gè)塊的總寬度=width+margin（左右）（即width已經(jīng)包括了padding和border值）

2.CSS優(yōu)先級(jí)算法如何計(jì)算？

• 優(yōu)先級(jí)就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn)；
• 載入樣式以最后載入的定位為準(zhǔn)
  優(yōu)先級(jí)為：
  ！important>id>class>tag
  important比內(nèi)聯(lián)優(yōu)先級(jí)高

3.如何居中div？

水平垂直居中問題，在CSS中margin：0 auto；可以實(shí)現(xiàn)水平居中，但是在垂直中方面一直沒有特定的屬性，知道CSS3的出現(xiàn)，有了彈性盒，可以通過設(shè)置彈性和直接設(shè)置居中位置，做瀏覽器兼容的話可以通過使用一些hack處理負(fù)margin方法，table-cell方法，位移方法。
負(fù)margin方法
CSS代碼：

.container{
  width:500px;
  height:400px;
  border:2px solid red;
  position:relative;
}
.inner{
  width:480px;
  height:380px;
  background-color:green;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-190px;
  margin-left:-240px;
}

HTML代碼：

<div class="container">
  <div class="inner"></div>
</div>

這里，我們首先用top:50%和left:50%讓inner的坐標(biāo)原點(diǎn)（左上角）移動(dòng)到container的中心，然后再利用負(fù)margin讓它往左偏移自身寬的一半，再往上偏移自身高的一半，這樣inner的中心點(diǎn)就跟container的中心點(diǎn)對(duì)齊了。
table-cell方法
CSS代碼：

div{
  width:300px;
  height:300px;
  border:3px solid red;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}
img{
  vertical-align:middle;
}

HTML代碼：

<div> <img src="love.jpg"> </div>

通過將盒子轉(zhuǎn)換為table元素，table元素本身是可以通過屬性控制位置，div上面的vertical-align:middle是控制垂直方向上的居中的，而text-align:center是控制水平方向的。
彈性盒子法
CSS代碼：

.container{
  width:300px;
  height:200px;
  border:3px solid red;
  display: -webkit-flex; 
  display: flex; 
  -webkit-align-items: center; 
  align-items: center; 
  -webkit-justify-content: center; 
  justify-content: center; 
}
.inner{
  border: 3px solid #458761;
  padding: 20px;
 }

HTML代碼:

<div class="container">
  <div class="inner">
 我在容器中水平垂直居中 
  </div>
</div>

align-items 控制垂直方向的居中，justify-content 控制水平方向的居中。這是 CSS3 的新方法。
位移方法
位移方法和margin定位方法一樣，只不過把margin改成了位移不需要計(jì)算一半是多少，直接transform：translate（-50%，-50%）

div{
  width:200px;
  height:200px;
  background:green;
  position:absolute;
  left:50%；
  top:50%;
  transform:translate(-50%,-50%);
}

div絕對(duì)定位水平垂直居中（margin：auto實(shí)現(xiàn)絕對(duì)定位元素的居中）

div{
  width:200px;
  height:200px;
  background:green;
  left:0;
  top:0;
  bottom:0;
  right:0;
  margin:auto;
}

4.position的值relative和absolute定位原點(diǎn)是？

absolute 生成絕對(duì)定位的元素，相對(duì)于值不為static的第一個(gè)父元素進(jìn)行定位。
fixed （老IE不支持）生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。
relative 生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。
static 默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略top，bottom，left，right，z-index聲明）。
inherit 規(guī)定從父元素繼承position屬性的值。

5.CSS定義的權(quán)重

以下是權(quán)重的規(guī)則：標(biāo)簽的權(quán)重為1，class的權(quán)重為10，id的權(quán)重為100，以下例子是演示各種定義的權(quán)重值：
/權(quán)重為 1/ div{}
/權(quán)重為 10/ .class1{}
/權(quán)重為 100/ #id1{}
/權(quán)重為 100+1=101/ #id1 div{}
/權(quán)重為 10+1=11/ .class1 div{}
/權(quán)重為 10+10+1=21/ .class1 .class2 div{}
如果權(quán)重相同，則最后定義的樣式會(huì)起作用，但是應(yīng)避免這種情況出現(xiàn)。

6.請(qǐng)解釋一下為什么會(huì)出現(xiàn)浮動(dòng)和什么時(shí)候需要清除浮動(dòng)？清除浮動(dòng)的方式？

浮動(dòng)元素脫離文檔流，不占據(jù)空間。浮動(dòng)元素碰到包含他的邊框或者浮動(dòng)元素的邊框停留。
1.使用空標(biāo)簽清除浮動(dòng)
這種方式是在所有浮動(dòng)標(biāo)簽后面添加一個(gè)空標(biāo)簽定義 CSS clear:both;弊端就是增加了無意義標(biāo)簽。
2.使用overflow
給包含浮動(dòng)元素的父標(biāo)簽添加CSS屬性overflow:autozoom:1;zoom:1用于兼容IE6。
3.使用after偽對(duì)象清除浮動(dòng)
該方法只適用于非IE瀏覽器。