CSS常見樣式（二）

1. `text-align: center`的作用是什么，作用在什么元素上若厚？能讓什么元素水平居中

（1）作用：CSS屬性定義行內(nèi)內(nèi)容（例如文字）如何相對它的塊父元素對齊蜒什。text-align 并不控制塊元素自己的對齊，只控制它的行內(nèi)內(nèi)容的對齊灾常。
（2）作用元素：塊元素
（3）可以讓塊元素的內(nèi)容相對其父元素水平居中。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .div,
    h1{
        text-align:center;
        border:1px solid red;
  }
</style>
</head>
<body>
<div class="div">hello</div>
<h1>hello</h1>
</body>
</html>

效果:

text-align:center

2. IE 盒模型和W3C盒模型有什么區(qū)別?

主要區(qū)別在寬度的計(jì)算方式上：

IE盒模型：

width = content + border + padding
?

優(yōu)點(diǎn)：寬度固定沈撞。設(shè)置寬度以后會(huì)雕什，盒模型整體寬度不需要單獨(dú)考慮padding和border對整體的影響缠俺。

因?yàn)镮E盒模型的寬度包括了content监徘、padding、border凰盔，所以我們在布局樣式的時(shí)候不需要單獨(dú)去計(jì)算每個(gè)部分的寬度，只需要考慮每個(gè)每個(gè)元素之間的margin即可落剪，但是也有個(gè)問題需要注意，因?yàn)閷挾劝诉吘嗪瓦吙蛑也溃瑢?yīng)的 content 可以利用的空間相對較少。

缺點(diǎn)：content 可利用空間受限制凡泣。

因?yàn)?padding和border占據(jù)了一定的空間，那么在寬度固定的情況下骂维，content 和padding 及border的寬度相互制約贺纲。

?

image

標(biāo)準(zhǔn)盒模型（W3C盒模型）:
?
width = content
?
優(yōu)點(diǎn)：content 不受padding和border限制。
缺點(diǎn)：盒子整體寬度受限制猴誊。在進(jìn)行整體布局的時(shí)候，因?yàn)榭紤]到border和padding的寬度懈叹，盒子的整體寬度需要單獨(dú)計(jì)算，比較繁瑣滑黔。
?
?

image

如何使用环揽？

在上述兩種盒模型中，沒有哪個(gè)絕對的好與壞歉胶。實(shí)際開發(fā)中，面對不同的情況通今，所選擇的盒子模型也不同，所以漏策，按需求出發(fā)，哪種情況下哪種盒模型更好用就用哪一個(gè)掺喻，以下為兩種盒模型的轉(zhuǎn)換方法:
?

box-sizing: content-box ; // 設(shè)置盒模型為標(biāo)準(zhǔn)盒模型

box-sizing: border-box; //設(shè)置和模型為IE盒模型

3. `*{ box-sizing: border-box;}`的作用是什么？

作用：

設(shè)置所有的塊元素的和模型結(jié)構(gòu)為 IE盒模型感耙，即 width = content + padding + border ；好處在于盒模型整體結(jié)構(gòu)不會(huì)受到padding和border的影響逃片。

4. `line-height: 2`和`line-height: 200%`有什么區(qū)別?

line-height 后有三種參數(shù)可寫只酥，分別為數(shù)字（代表倍數(shù)）褥实，百分比（默認(rèn)行高的百分之幾）层皱，帶單位的像素值赠潦。已知Chrome的默認(rèn)字體大小為16px。

line-height:2
（1）設(shè)置字體的行高是默認(rèn)/本身字體的行高的2倍

當(dāng)沒有單獨(dú)設(shè)置字體大小的情況下她奥，此時(shí)行高就按照默認(rèn)字體16px的2倍來計(jì)算來計(jì)算；

當(dāng)已經(jīng)設(shè)置了字體大小 a px绷跑，此時(shí)行高的大小為 2a px凡资；
?

下圖中 line-height: 2 == line-height: 32px
```
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .div{
      border:1px solid black;
      width: 200px;
      line-height:2;
      /* line-height: 32px; */
    }
  </style>
</head>
<body>
<div class="div">
  這是一段文字，這是一段文字
   這是一段文字隙赁，這是一段文字
   這是一段文字，這是一段文字
   這是一段文字伞访，這是一段文字
  <p></p>
</div>
</body>
</html>
```
image

?

（2）繼承屬性
當(dāng)父元素設(shè)置了 line-height 以后，后面的元素會(huì)繼承前面的屬性弟灼，如下圖：

對 body 設(shè)置 line-height: 2 后面的子元素沒有設(shè)置但是依然可以繼承父元素的屬性冒黑。

?
```
//css樣式如下
body{
  line-height: 2;
}
.div{
  border:1px solid black;
  width: 200px ;
}
```
image

?

但是：

當(dāng)子元素設(shè)置了字體大小，那么父元素又設(shè)置了 font-height:2 此時(shí)子元素的行高大小為當(dāng)前值的2倍抡爹。
論證了前面的觀點(diǎn) （1）設(shè)置字體的行高是默認(rèn)/本身字體的行高的2倍 ，代碼如下：

?
```
body{
  line-height: 2;
}

.div{
  border:1px solid black;
  width: 200px;
  font-size: 20px;
}
```
image

?
line-height:200%
（1）設(shè)置字體的行高是默認(rèn)/當(dāng)前字體的行高的2倍昙篙，即Chrome的默認(rèn)字體大小為16px，那么此時(shí)行高的大小 == 32px

等價(jià)于 line-height:200%; == line-height: 32px;
```
.div{
  border:1px solid black;
  width: 200px;
/* font-size:16px; */
  line-height: 200%;
}
```
（2）繼承屬性苔可，和上面同理

?
line-height:32px
設(shè)置字體的行高為32px，
?
```
.div{
  border:1px solid black;
  width: 200px;
  line-height: 50px;
}
```
image

?

（2）繼承屬性映屋，和上面同理

5. inline-block有什么特性同蜻？如何去除縫隙？高度不一樣的inline-block元素如何頂端對齊?

inline-block 的元素（如input湾蔓、img)既具有 block 元素可以設(shè)置寬高的特性，同時(shí)又具有 inline 元素默認(rèn)不換行的特性默责。當(dāng)然不僅僅是這些特性，比如 inline-block 元素也可以設(shè)置 vertical-align（因?yàn)檫@個(gè)垂直對齊屬性只對設(shè)置了inline-block的元素有效）屬性杖虾。

HTML 中的換行符、空格符奇适、制表符等合并為空白符芦鳍，字體大小不為 0 的情況下嚷往，空白符自然占據(jù)一定的寬度怜校，使用inline-block 會(huì)產(chǎn)生元素間的空隙
簡單來說：inline-block 元素可以設(shè)置寬高，不會(huì)換行魂贬，不會(huì)占滿一行

如何去除空隙？
（1）如圖付燥，兩個(gè)hello 之間有個(gè)縫隙愈犹，這是為什么呢闻丑？

image
從圖中的HTML的代碼中我們可以看到勋颖，2個(gè)span元素之間有個(gè)空格（轉(zhuǎn)行）嗦嗡，解決縫隙的辦法就是將2個(gè)span并排寫在一起就好了饭玲。
```
<span class="box">hello</span><span class="box">hello</span>
```

（2）在外層包裹一個(gè)div，設(shè)置其字體大小為0茄厘，然后在box內(nèi)部重新設(shè)置回去即可。

//HTML
<div class = "wrap">
    <span class="box">hello</span>
    <span class="box">hello</span>
</div>

//CSS
.wrap{
  font-size: 0;
}
.box{
  border:1px solid black;
  width: 100px;
  display:inline-block;
  font-size: 14px;
}

image

如圖胎署，高度不同如何頂端對齊?
當(dāng)給兩邊的span給定不同的寬高和內(nèi)容大小以后窑滞，結(jié)果兩個(gè)元素內(nèi)容依然以內(nèi)容的基線對齊？為什么葛假？因?yàn)樵揵ox定義為 display: inline-block 那么它就有行內(nèi)元素的一個(gè)特性，即內(nèi)容默認(rèn)以基線對齊。

image

那么恢氯，該使用什么方式讓他們底部/頂部對齊呢？

vertical-align: top ; //以頂端對齊

vertical-align: bottom; //以底部對齊勋拟。

參考鏈接：

塊級(jí)元素

行內(nèi)元素和塊級(jí)元素的具體區(qū)別是什么？inline-block是什么挂滓？（面試題目）

CSS塊級(jí)元素和行內(nèi)元素

6. CSS sprite 是什么?

CSS 精靈圖：將不同的圖片/圖標(biāo)合并到一張圖片上

雪碧圖被運(yùn)用在眾多使用了很多小圖標(biāo)的網(wǎng)站上啸胧。相對于把每張小圖標(biāo)以.png格式文件的形式引用到頁面上赶站，使用雪碧圖只需要引用一張圖片纺念，對內(nèi)存和帶寬更加友好。

舉例：打開淘寶網(wǎng)站選擇其中一個(gè)小圖標(biāo)烙博，右鍵審查元素找到該圖片的鏈接,實(shí)際上就是后面一整張圖片使用絕對定位得到該圖片的位置。

使用精靈圖的優(yōu)點(diǎn)：可以減少網(wǎng)絡(luò)請求渣窜，提高網(wǎng)絡(luò)加載性能。

使用精靈圖的缺點(diǎn)：無法縮放乔宿，無法修改圖片。

image

CSS 精靈圖自動(dòng)化生成工具：css sprites generator

7. 讓一個(gè)元素"看不見"有幾種方式囤官？有什么區(qū)別?

有兩種方式——隱藏 or 透明

隱藏：看不見蛤虐，但是不占用位置
display: none :消失党饮，不占用位置 ?
透明：看不見驳庭，但是占用位置
（1）opacity: 0 設(shè)置透明度為0，即看不見被該元素修飾的東西饲常，但是依然占用位置
（2）visility: hideen 隱藏內(nèi)容，但是依然占用位置
（3）background-color:rgba(0,0,0,0) 設(shè)置背景色透明柒竞，只是針對于背景色為透明播聪。

8.使用精靈圖制作效果

方法一：使用本地合并精靈圖，代碼和預(yù)覽

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .icon{
       width:250px;
      height:220px;      
      position:relative;
      background:url(https://i.loli.net/2017/11/23/5a16ef20f2d9d.png) -230px
  }
  .icon:hover{
      background:url(https://i.loli.net/2017/11/23/5a16ef20f2d9d.png) 
  }
  </style>
</head>
<body>
<div class="icon"></div>
</body>
</html>

方法二：在iconfont上使用線上鏈接實(shí)現(xiàn) 离陶，預(yù)覽鏈接

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style>
@font-face {
  font-family: 'iconfont';  /* project id 485490 */
  src: url('//at.alicdn.com/t/font_485490_p073rf19odyujtt9.eot');
  src: url('//at.alicdn.com/t/font_485490_p073rf19odyujtt9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_485490_p073rf19odyujtt9.woff') format('woff'),
  url('//at.alicdn.com/t/font_485490_p073rf19odyujtt9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_485490_p073rf19odyujtt9.svg#iconfont') format('svg');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:160px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    color:#1296DB;
}
.iconfont:hover{
    color:#D81E06;
}

</style>
</head>
<body>
<i class="iconfont">&#xe600;</i>
</body>
</html>

初始效果

鼠標(biāo)懸浮效果

CSS常見樣式（二）

1. text-align: center的作用是什么，作用在什么元素上若厚？能讓什么元素水平居中

2. IE 盒模型和W3C盒模型有什么區(qū)別?

3. *{ box-sizing: border-box;}的作用是什么？

4. line-height: 2和line-height: 200%有什么區(qū)別?

5. inline-block有什么特性同蜻？如何去除縫隙？高度不一樣的inline-block元素如何頂端對齊?

6. CSS sprite 是什么?

7. 讓一個(gè)元素"看不見"有幾種方式囤官？有什么區(qū)別?

8.使用精靈圖制作效果

1. `text-align: center`的作用是什么，作用在什么元素上若厚？能讓什么元素水平居中

3. `*{ box-sizing: border-box;}`的作用是什么？

4. `line-height: 2`和`line-height: 200%`有什么區(qū)別?