1、text-align: center的作用是什么照筑,作用在什么元素上吹截?能讓什么元素水平居中
- 水平居中的作用。
- 用在行內(nèi)元素凝危。
2波俄、IE 盒模型和W3C盒模型有什么區(qū)別?
- IE盒模型:
width= border + padding + 內(nèi)容寬度
<div> width:100px; border:10px solid; padding:10px; </div>
那面content的寬度就是:
100px - border-left:10px; - padding-left:10px; - padding-right:10px; - border-right:10px;=60px。
- W3C盒模型:
width = 內(nèi)容寬度
border蛾默、padding所占空間不包含在width和height的范圍內(nèi)懦铺。
width設(shè)置為100px,content的寬度就是100px支鸡。
3冬念、*{ box-sizing: border-box;}的作用是什么?
- box-sizing:border-box:
指定使用IE盒模型牧挣。
使用IE盒模型也是有好處的急前,可以省去計算邊框、內(nèi)邊距的時間瀑构。
4裆针、ine-height: 2和line-height: 200%有什么區(qū)別?
-
line-height:2
:
行高為本身字體的2倍。 -
line-height:200%
:
行高為父元素文字大小的2倍
5检碗、inline-block有什么特性据块?如何去除縫隙?高度不一樣的inline-block元素如何頂端對齊?
- inline-block的特性:
呈現(xiàn)行內(nèi)元素的特性折剃,不占據(jù)一整行另假,寬度大小由內(nèi)容決定,同時又有塊級元素的特性怕犁,可設(shè)置寬高和內(nèi)外邊距边篮。 - 如何去除縫隙:
1己莺、第一種方法:
先去除標簽之間的空格,父元素設(shè)置font-size:0;
戈轿,行內(nèi)元素在設(shè)置字體大小凌受。
2、第二種方法:
<div> <span>饑人谷</span><span>饑人谷</span>
3思杯、第三種方法:
<div> <span>饑人谷<span>饑人谷</span>
4胜蛉、第四種方法:
`<div>
- inline-block元素如何頂端對齊:
行內(nèi)元素設(shè)置vertical-align:top;
6、CSS sprite 是什么?
CSS Sprites在國內(nèi)很多人叫css精靈是一種網(wǎng)頁圖片應(yīng)用處理方式色乾。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去誊册,這樣一來,當訪問該頁面時暖璧,載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了案怯。對于當前網(wǎng)絡(luò)流行的速度而言,不高于200KB的單張圖片的所需載入時間基本是差不多的澎办,所以無需顧忌這個問題嘲碱。加速的關(guān)鍵,不是降低重量局蚀,而是減少個數(shù)麦锯。傳統(tǒng)切圖講究精細,圖片規(guī)格越小越好至会,重量越小越好离咐,其實規(guī)格大小無所謂谱俭,計算機統(tǒng)一都按byte計算奉件。客戶端每顯示一張圖片都會向服務(wù)器發(fā)送請求昆著。所以县貌,圖片越多請求次數(shù)越多,造成延遲的可能性也就越大凑懂。
7煤痕、讓一個元素"看不見"有幾種方式?有什么區(qū)別?
opacity:0接谨;整體透明度為零
visibility:hidden:和opacity類似
display:none摆碉;消失,不占用位置
background-color:rgba(0脓豪,0巷帝,0,0.2)扫夜;設(shè)置背景色透明