一、text-align: center
的作用是什么,作用在什么元素上?能讓什么元素水平居中
text-align: center
是讓其子元素或者文本水平居中,該樣式可繼承。作用在行內(nèi)元素、內(nèi)聯(lián)塊狀元素、文本上,并讓它們水平居中。
二、IE 盒模型和 W3C 盒模型有什么區(qū)別?
首先,盒子指的是 HTML 中所有的元素,盒子模型就是這些元素占據(jù)空間的規(guī)則。盒子由四個(gè)部分組成
content(內(nèi)容)
padding(內(nèi)邊距)
border(邊框)
margin(外邊距)
。接下來就區(qū)分一下兩種盒子模型:
1. IE 盒模型
IE 盒子對(duì)于寬高的計(jì)算是
width = contentX + paddingLeft + paddingRight + borderLeft + borderRight
height = contentY + paddingTop + paddingBottom + borderTop + borderBottem
什么意思呢?就是說,當(dāng)你定義了一個(gè)
<div>
的width: 200px;height: 200px
時(shí),這里就默認(rèn)包含了padding
和border
為 0 。之后增加padding
和border
時(shí),都是往里面擠了。
2. W3C 盒模型
W3C 盒子寬高是
width = contentX
height = contentY
所以說, W3C 盒模型寬高只和本身內(nèi)容有關(guān),當(dāng)你后續(xù)添加
padding
和border
時(shí),它就會(huì)往外擠。
3. 總結(jié)
相對(duì)來說, W3C 盒模型更符合我們的認(rèn)知,寬高就應(yīng)該由內(nèi)容決定嘛,與其他屬性掛什么鉤。但在實(shí)際使用上,反而 IE 盒模型更方便。舉個(gè)例子:
<style>
div {
display: inline-block;
margin: 0 20px;
vertical-align: top;
color: #fff;
text-align: center;
}
.div1 {
box-sizing: content-box;
width: 200px;
height: 200px;
background-color: red;
border: 5px solid #000;
padding: 20px;
}
.div2 {
box-sizing: border-box;
width: 200px;
height: 200px;
background-color: green;
border: 5px solid #000;
padding: 20px;
}
.div {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<div class="div1"> W3C 盒子</div>
<div class="div2">IE 盒子</div>
<div class="div">盒子,只有寬高</div>
在上面的例子可以看到,當(dāng)使用 W3C 盒模型時(shí),容器最后占據(jù)的空間會(huì)隨著
padding
、border
和margin
增大而增大;使用 IE 盒模型時(shí),容器最后占據(jù)的空間只隨margin
增大而增大。兩者相比,IE 盒模型明顯更好控制,我只需要知道margin
,就可以為這個(gè)容器布局了;而 W3C 盒模型還需要你去計(jì)算最終占據(jù)空間大小content + padding + border + margin
,太麻煩。因此,開發(fā)中往往更喜歡用 IE 盒模型。
三、*{ box-sizing: border-box;}的作用是什么?
設(shè)置所有容器為 IE 盒模型。
四、line-height: 2
和line-height: 200%
有什么區(qū)別?
line-height: 2
不帶單位的行高,是繼承父元素的縮放因子,子元素的行高等于自身字體大小的倍數(shù),lineHeight = selfFontSize * n
。line-height: 200%
帶上單位的行高,是直接繼承父元素的行高,子元素的行高為lineHeight = parentFontSize * n
,以上。
五、inline-block
有什么特性?如何去除縫隙?高度不一樣的inline-block
元素如何頂端對(duì)齊?
當(dāng)用戶想讓元素在同一行顯示,但又能設(shè)置寬高時(shí),就用
inline-block
??p隙的存在是因?yàn)榭瞻鬃址拇嬖?,正常情況下,瀏覽器會(huì)把連續(xù)的空白字符合并成一個(gè),所以這里就有一個(gè)小小的空白。一個(gè)解決辦法是在父元素設(shè)置字體為零,因?yàn)槟呐率强瞻鬃址彩亲煮w,設(shè)置為 0 之后,就不占空間了。然后再在具體的inline-block
里面再設(shè)置字體大小,如下:
<style>
div {
font-size: 0;
}
span {
border: 1px solid;
font-size: 16px;
}
</style>
<div>
<span>1</span>
<span>2</span>
</div>
用了
inline-block
之后,就有一個(gè)新的 CSS 屬性可以使用了:vertical-align
,類似與text-align
,不過是垂直方向的,常用有三個(gè)值top
middle
bottom
,分別是頂端對(duì)齊、垂直居中、底部對(duì)齊。
六、CSS sprite 是什么?
CSC sprite,CSS 精靈圖,江湖人稱雪碧圖。是為了減少小圖片、小圖標(biāo)的請(qǐng)求次數(shù),而把這些合并到一張圖片的技術(shù),這樣可以減少不必要的請(qǐng)求。在使用上配合
background-size: x y
來對(duì)這張合并圖位移,選中需要的小圖。缺點(diǎn)是:1.無法二次調(diào)整小圖的尺寸。2.需要知道每張小圖的位置。
七、讓一個(gè)元素"看不見"有幾種方式?有什么區(qū)別?
- 保留元素位置
div {
/* 選擇讓元素 可見 還是 不可見 */
visibility: hidden;
/* 透明度,剛好透明度為 0 的時(shí)候,相當(dāng)于不可見 */
opacity: 0;
}
- 不再保留元素位置。
div {
/* 相當(dāng)于當(dāng)前元素不再存在 */
display: none;
}