前端面試題——CSS篇

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末今豆,一起剝皮案震驚了整個(gè)濱河市嫌拣,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌呆躲,老刑警劉巖异逐,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異插掂,居然都是意外死亡灰瞻,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門辅甥,熙熙樓的掌柜王于貴愁眉苦臉地迎上來酝润,“玉大人,你說我怎么就攤上這事璃弄∫” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵夏块,是天一觀的道長疏咐。 經(jīng)常有香客問我,道長脐供,這世上最難降的妖魔是什么浑塞? 我笑而不...
    開封第一講書人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮患民,結(jié)果婚禮上缩举,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好仅孩,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開白布托猩。 她就那樣靜靜地躺著,像睡著了一般辽慕。 火紅的嫁衣襯著肌膚如雪京腥。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評(píng)論 1 312
  • 那天溅蛉,我揣著相機(jī)與錄音公浪,去河邊找鬼。 笑死船侧,一個(gè)胖子當(dāng)著我的面吹牛欠气,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播镜撩,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼预柒,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了袁梗?” 一聲冷哼從身側(cè)響起宜鸯,我...
    開封第一講書人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎遮怜,沒想到半個(gè)月后淋袖,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡锯梁,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年即碗,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片涝桅。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡拜姿,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出冯遂,到底是詐尸還是另有隱情蕊肥,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布蛤肌,位于F島的核電站壁却,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏裸准。R本人自食惡果不足惜展东,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望炒俱。 院中可真熱鬧盐肃,春花似錦爪膊、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至谦铃,卻和暖如春耘成,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背驹闰。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來泰國打工瘪菌, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人嘹朗。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓师妙,卻偏偏與公主長得像,于是被迫代替她去往敵國和親骡显。 傳聞我的和親對(duì)象是個(gè)殘疾皇子疆栏,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361