笑一個...HaHa.....

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

• 塊級元素

• （內(nèi)聯(lián)）行內(nèi)元素

• 區(qū)別描述：
• 塊元素（寬）占滿整行翩肌，行內(nèi)元素只占內(nèi)容所在的寬度蹲诀。
• 塊級元素可以設置有寬高，行內(nèi)元素無法設置寬高三热。
• 塊級元素可以設置內(nèi)邊距鼓择，行內(nèi)元素設置橫向內(nèi)邊距有效，縱向內(nèi)邊距則無效 就漾。
• 快級元素可以設置內(nèi)/外邊距 行內(nèi)元素設置縱向外邊距無效呐能，可以設置橫向外邊距。
• 塊級元素可以包含行內(nèi)元素和塊級元素，行內(nèi)元素只能包含行內(nèi)元素和文本摆出。

CSS 繼承朗徊， 能&不能繼承的屬性

span 繼承了 p 的樣式

有繼承性的屬性：
<pre>

1. 文本系列屬性：
   <pre>```
   color：
   direction：
   text-align：
   line-height：
   text-indent：
   text-transform：
   word-spacing：
   letter-spacing：

2. 字體系列屬性：
<pre>```
font：<!-- 組合字體 -->
font-family：<!-- 規(guī)定元素的字體系列 -->
font-weight：<!-- 設置字體的粗細 -->
font-size：<!-- 設置字體的尺寸 -->
font-style：<!-- 定義字體的風格 -->
font-stretch：<!-- 對當前的 font-family 進行伸縮變形。所有主流瀏覽器都不支持偎漫。 -->
font-variant：<!-- 設置小型大寫字母的字體顯示文本爷恳，這意味著所有的小寫字母均會被轉(zhuǎn)換為大寫，但是所有使用小型大寫字體的字母與其余文本相比象踊，其字體尺寸更小温亲。 -->
font-size-adjust：<!-- 為某個元素規(guī)定一個 aspect 值，這樣就可以保持首選字體的 x-height杯矩。 -->```</pre>
3. 其他屬性：
<pre>```
塊級元素可以繼承的屬性：text-indent栈虚、text-align
元素可見性：visibility<!-- 所有元素可以繼承的屬性 -->
光標屬性：cursor<!-- 所有元素可以繼承的屬性 -->
元素可見性：visibility
表格布局屬性：caption-side担平、border-collapse炬太、border-spacing、empty-cells考阱、table-layout
列表布局屬性：list-style-type泌射、list-style-image粘姜、list-style-position、list-style
生成內(nèi)容屬性：quotes
光標屬性：cursor
頁面樣式屬性：page熔酷、page-break-inside相艇、windows、orphans
聲音樣式屬性：speak纯陨、speak-punctuation坛芽、speak-numeral、speak-header翼抠、speech-rate咙轩、volume、voice-family阴颖、pitch活喊、pitch-range、stress量愧、richness钾菊、、azimuth偎肃、elevation
```</pre>
</pre>

Ps:內(nèi)聯(lián)元素可以繼承的屬性:
1煞烫、字體系列屬性
2、除text-indent累颂、text-align之外的文本系列屬性```

無繼承性的屬性：
<pre>
文本屬性：
<pre>```
vertical-align
text-decoration
text-shadow
white-space
unicode-bidi

其他屬性：
<pre>```
生成內(nèi)容屬性：content | counter-reset | counter-increment
頁面樣式屬性：size | page-break-before | page-break-after
輪廓樣式屬性：outline-style | outline-width | outline-color滞详、outline
聲音樣式屬性：pause-before | pause-after | pause | cue-before | cue-after | cue | play-during
背景屬性：background | background-color | background-image | background-repeat | background-position | background-attachment
定位屬性：float | clear | position | top | right | bottom | left | min-width | min-height | max-width | max-height | overflow | clip | z-index
``` </pre>
盒子模型的屬性：<pre>```
display | width | height | margin | margin-top | margin-right | margin-bottom | 
margin-left | border | border-style | border-top-style | border-right-style | 
border-bottom-style | border-left-style | border-width | border-top-width | 
border-right-right | border-bottom-width | border-left-width | border-color | 
border-top-color | border-right-color | border-bottom-color | border-left-color | 
border-top | border-right | border-bottom | border-left | padding | padding-top |
 padding-right | padding-bottom | padding-left
```</pre></pre>

---

> ### 如何讓塊級元素水平居中凛俱？如何讓行內(nèi)元素水平居中?




![一步兩步~](http://upload-images.jianshu.io/upload_images/4007920-6d08fa3c94eca6a5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)




---

> ### 用 CSS 實現(xiàn)一個三角形


![舉一反三即可](http://upload-images.jianshu.io/upload_images/4007920-df565203af96f414.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

---


> ### 單行文本溢出加 ...如何實現(xiàn)?


![這三段要在一起，并且要在P段落里才能奏效](http://upload-images.jianshu.io/upload_images/4007920-164998ef758b6965.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


---



> ### px, em, rem 有什么區(qū)別


- 作用都是設置寬高的長度和字體的大小
 - px：固定值料饥。
 - em：父容器寬高長度或字體大小的倍數(shù)
 - rem：根節(jié)點body設置的字體的倍數(shù)


---



> ### 下面代碼的作用?為何加引號? \5b8b\4f53代表啥?
```body{
  font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}```

- 設置字體大小12px 字體行高1.5 字體：tahoma—至—sans-serif; 
- 瀏覽器將從左到右依次尋找字體蒲犬，如果計算機上有該字體就應用字體，sans-serif保證了瀏覽器最后選擇的顯示字體（一般都有）岸啡。
- 另外加引號是因為字體中間有空格原叮。
- \5b8b\4f53表示宋體

![image.png](http://upload-images.jianshu.io/upload_images/4007920-87480243478069d7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


---

**參考**：[傳送門](http://www.cnblogs.com/thislbq/p/5882105.html)