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