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瀏覽器。
