width”繼承性“以及盒模型深刻理解


一 寬度的繼承性,首先,行內元素不能繼承寬度,行內元素葉不能設置寬高,行內元素只能由內容撐開,如果給行內非替換元素設置了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;
    }

行內元素不會被relative  static改變

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 即使塊級元素設置了寬度,它仍然是占據該整行空間的,(標准的占着茅坑不拉屎型的),不允許其他元素在它所占據的整行上(如果非要說像什么設置浮動 定位了可以占據它 的茅坑,那你當我沒說)


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com