元素繼承（塊狀元素內的border）

今天想要實現繪製乙個三角形，具體**如下

<

div 
class
="outer"
><
div 
class
="inner"
>
div>
div>

.outer.inner

2、如果inner的css樣式加上width:0;height:0; 效果：

3、如果inner的css樣式加上width:100%; 效果：

如此看來，設定寬度了以後inner元素所佔的空間就是content+border。網上搜了一下：

不可繼承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。

所有元素可繼承：visibility和cursor。

內聯元素可繼承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。

塊狀元素可繼承：text-indent和text-align。

列表元素可繼承：list-style、list-style-type、list-style-position、list-style-image。

**元素可繼承：border-collapse。

今天又發現了乙個類似的現象，先上**

<

li id
="a"
><
button
>
button
>
li>
<
li id
="b"
>
li>
<
li id
="c"
><
div>
div>
li>

*#a button#b#c

對button設定的寬度後，邊框是向內縮的，這是否是li中元素是置換元素的緣故呢？

行內元素又分置換元素和非置換元素；

置換元素是乙個很特殊的元素，包括：

、、、、

這些元素是可以設定寬高，其實這一點與宣告了display：inline-block的元素相似。

【1、line-height就是相當於塊狀元素的height；

2、行內元素與其他元素在同一行中時(1、行內元素在前，塊狀元素在後，2、兩個都是行內元素)，若是後面的元素向左浮動，那麼該元素就會跑到前面去

3、行內元素和其他元素的對齊方式是底部對齊

於是測試了下，發現

1、input標籤中，還有search、submit有發生了同樣的情況，而type屬性為text、password等input標籤是正常的；

2、img的表現是正常的；

3、textarea的預設值與正常現象相同；

4、select也發生了和button同樣的狀況；

5、最後還剩label和object，前者嚴格意義上來說不是置換元素，只是它可以包含置換元素罷了，所以它預設為行內元素；object不知為何，我沒有設定出寬高。。。

看來不是置換元素的問題，button、submit(input)、search(input)、select標籤設定了寬度以後邊框是內斂的，雖然知道了這一種現象，但只是知其然而不知其所以然，網上搜了一下也沒有相關的解釋，看來只能用「特例」一詞來解釋這「內邊框」了。

2017-05-04

另外table元素也出現了同樣的情況 ，並且還要特殊一些，如圖：

，**如下

trthtd

button、submit(input)、search(input)、select、table，這幾個元素，仔細一看，很容易發現這些元素都是已經存在特定的樣式了,仔細地檢查了一番，發現前面4個標籤是因為

box-sizing屬性導致的；box-sizing有三個值：inherit，content-box，border-box;   border-box就是元素總體大小不變，border向內，content-box就是常規的border向外；

這個屬性的相容性還是很好的，所有瀏覽器都支援，以後想調整邊框，元素大小又要固定，不妨考慮一下box-sizing；

至於table，則是因為display:table-row的緣故，至於具體是什麼原因，若是讀者興趣的可以去研究一下（現在table本身用的就很少了）。

行內元素 塊狀元素 內聯塊狀元素

行內元素 div,h1 h6,p,pre,ul,ol,li,form,table等 常見的行內元素 無法自動換行，無法設定寬高 有 a,img,span，i 斜體 em 強調 sub 下標 sup 上標 label等。常見的內聯塊狀元素 擁有內在尺寸，可設定高寬，不會自動換行 有 button,in...

行內元素 塊狀元素 行內塊狀元素

頁面元素主要分為三類 塊元素 行內元素，行內塊元素。三者可以通過display進行相互轉換 display block 塊元素 display inline 行內元素 display inline block 行內塊元素 1 塊元素 塊狀元素代表性的就是div，其他如p h1 h6 ul ol dl...

HTML行內元素 塊狀元素 行內塊狀元素的區別

html元素可以分成行內元素 塊狀元素和行內塊元素。1 display inline 轉換為行內元素 2 display block 轉換為塊狀元素 3 display inline block 轉換為行內塊狀元素 行內元素的特徵 1 設定寬高無效 2 對margin僅設定左右方向有效，上下無效 p...