text-align: center的作用是什么，作用在什么元素上？能讓什么元素水平居中
作用：使行內(nèi)元素實(shí)現(xiàn)水平居中。（這里面的行內(nèi)元素包括文本，行內(nèi)元素，設(shè)置display：inline-block的塊級(jí)元素）
該屬性可以被繼承。因此要使想要的行內(nèi)元素實(shí)現(xiàn)居中，可以在父元素或者更遠(yuǎn)的祖先元素上加上text-align: center;
IE 盒模型和W3C盒模型有什么區(qū)別?
IE盒模型的height, width為 content 的 length, width + padding 的 length, width + border 的 length, width。
W3C盒模型height, width只是 content 的 length, width。不包括 padding border 和margin。
*{ box-sizing: border-box;}的作用是什么？
這是CSS3的屬性，在聲明html5的情況下，瀏覽器以IE盒模型計(jì)算width 和 height。
line-height: 2和line-height: 200%有什么區(qū)別?
-
line-height定義了 行內(nèi)元素 （display: inline）頂部和底部的空間，并且頂部和底部的空間相同。利用這個(gè)特點(diǎn)，可以為單行文字設(shè)置垂直居中。 -
line-height的值可以為normal, 數(shù)字, 帶單位的長(zhǎng)度（單位可以是 px, em, rem 等）或者百分比。推薦使用的值是數(shù)字， 也被稱(chēng)作是 ‘無(wú)單位’ 的line－h(huán)eight。原因是百分比或者帶單位的長(zhǎng)度的line-height這個(gè)屬性會(huì)被子元素繼承，而會(huì)影響整個(gè)頁(yè)面的整體。無(wú)單位的line-height只和元素本身的字體大小有關(guān)。
舉例來(lái)說(shuō)：
我們有這樣一個(gè)CSS：
body {
font-size: 16px;
line-height: ？;
}
h1 { font-size: 32px; ｝
p { font-size: 16px; }
.footer {font-size: 12px; }
| 元素 | font-size | 用 px 單位的line-height | 實(shí)際得到的 line height |
|---|---|---|---|
| body | 16px | 30px | 30px |
| h1 | 32px | 繼承得到的30px | 30px |
| p | 16px | 繼承得到的30px | 30px |
| footer | 12px | 繼承得到的30px | 30px |
| 元素 | font-size | 用 % 單位的line-height | 實(shí)際得到的 line height |
|---|---|---|---|
| body | 16px | 200% | 16px*200% = 32px |
| h1 | 32px | 繼承得到的32px | 32px |
| p | 16px | 繼承得到的32px | 32px |
| footer | 12px | 繼承得到的32px | 32px |
這樣做的問(wèn)題是h1和footer的行間距一個(gè)太窄一個(gè)又太寬，不是和他們各自的字體大小成比例。
如果我們用無(wú)單位的line-height 結(jié)果將是：
| 元素 | font-size | 用無(wú)單位的line-height | 實(shí)際得到的 line height |
|---|---|---|---|
| body | 16px | 2 | 16px*2 = 32px |
| h1 | 32px | 2 | 64px |
| p | 16px | 2 | 32px |
| footer | 12px | 2 | 24px |
這樣行間距是各元素各自的比例，得到的結(jié)果會(huì)更美觀。
- 一個(gè)行的高度是由行里面的所有的 inline boxes 中最高的box決定的。是
line-height而不是字體的大小決定inline box的高度。
inline-block有什么特性？如何去除縫隙？高度不一樣的inline-block元素如何頂端對(duì)齊?
-
inline-block與inline元素相似，不占據(jù)一整行。不同點(diǎn)在于inline-block可以像block一樣設(shè)置 width 和 length。margin 和 padding 的上下設(shè)置也會(huì)有效果。 - 去除縫隙的幾種方式
- 改寫(xiě)成
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
或
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
- html5中標(biāo)簽不關(guān)閉
<ul>
<li>one
<li>two
<li>three
</ul>
- 也可以將
inline-block元素的父元素設(shè)置font-size:0;然后在給inline-block元素重新設(shè)置一個(gè)font-size。 - 達(dá)到頂端對(duì)齊，可以給
inline-block元素添加vertical-align:top;
CSS sprite 是什么?
CSS Sprite (CSS 雪碧圖) 是將單一的小圖合成的一張大圖。這樣瀏覽器只需一次請(qǐng)求就可以得到所有圖片。設(shè)置background-position來(lái)顯示出不同的小圖。這樣可以減少向服務(wù)器的請(qǐng)求數(shù)量，提高加載速度。
讓一個(gè)元素"看不見(jiàn)"有幾種方式？有什么區(qū)別?
-
opacity:0設(shè)置元素透明度為0，雖然看不見(jiàn)，但仍占據(jù)空間 - vidibility:hidden 隱藏元素，與
opacity:0相似，仍占據(jù)空間 - display:none 元素從dom中消失，相當(dāng)于元素被刪除，不會(huì)有元素的位置
