一 寬度的繼承性，首先，行內元素不能繼承寬度，行內元素葉不能設置寬高，行內元素只能由內容撐開，如果給行內非替換元素設置了width height 那麼 ，瀏覽器會忽略。
二 我們來看看塊級元素，浮動元素，定位元素，inline-block block元素對於寬度的可否”繼承“。
首先來看W3C上的定義：width height可以用來定義內容區的寬高，在內容區的外面可以增加內邊距padding 邊框 border 外邊距 margin。
三 代碼實操：
<body>
<div >
<span class="box">
我是一段卡哇伊的文字。
</span>
</div>
</body>
第一種情況 行內元素 不能設置寬高，當然也不會”繼承“寬高，只能由內容撐開
<style>
div {
background-color: #5E62E7;
width: 500px;
height: 200px;
}
.box{
background:black;
color:white;
height:50px;
font-size: 15px;
}
</style>
第二種情況: 塊級元素會”繼承”寬度;可以設置寬高,如果設置了寬度則會層疊掉父元素的寬度。給塊級元素設置的寬度可以大於父元素的寬度，也可以小於父元素的寬度
.box{
display: block;
background:black;
color:white;
height:50px;
font-size: 15px;
}
第三種情況：行內塊元素不會“繼承“父元素的寬度，寬度可以設置或者由內容撐開。float:left right position:absolute fixed display :inline-block 可以將元素轉化爲行內塊元素。
.box{
/*position: absolute;*/
/*position: fixed;*/
/*display: inline-block;*/
float: left;
background:black;
color:white;
height:50px;
font-size: 15px;
}
第四種情況：position：relative static ，不會改變元素在標準流中的狀態，原來是行內元素就是行內元素，原來是塊級元素，就是塊級元素，原來是行內塊元素，那麼依然是行內塊元素（有點囉嗦了哈）position ：absolute fixed 纔可以使元素轉化爲行內塊元素，無論該元素原來是什麼元素
1 行內元素
.box{
/*position: relative;*/
position: static;
background:black;
color:white;
height:50px;
font-size: 15px;
}
2 行內塊元素;注意是display：inline-bock 使span轉化爲了行內塊元素。
.box{
display:inline-block;
position: relative;
/*position: static;*/
background:black;
color:white;
height:50px;
font-size: 15px;
}
3 塊級元素
.box{
display:inline-block;
position: relative;
/*position: static;*/
background:black;
color:white;
height:50px;
font-size: 15px;
}
四 總結：對於所謂的寬度繼承性：
其實歸根到底還是盒模型，
1 行內元素不能設置寬高，
2 行內塊元素可以設置寬高，並不單獨佔據一整行，也不”繼承”寬度
3 塊級元素本來就是要佔據一整行顯示，如果父元素設置了寬度，那麼子元素在沒有設置寬度的前提下默認和父元素同寬。
4 即使塊級元素設置了寬度，它仍然是佔據該整行空間的，（標準的佔着茅坑不拉屎型的），不允許其他元素在它所佔據的整行上（如果非要說像什麼設置浮動 定位了可以佔據它 的茅坑，那你當我沒說）
