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

最新推荐文章于 2022-06-22 08:57:33 发布

孤枫_J

最新推荐文章于 2022-06-22 08:57:33 发布

阅读量3k

点赞数 7

分类专栏： HTML+CSS 文章标签： width height

本文链接：https://blog.csdn.net/qq_35809245/article/details/53638214

版权

HTML+CSS 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

一宽度的继承性，首先，行内元素不能继承宽度，行内元素叶不能设置宽高，行内元素只能由内容撑开，如果给行内非替换元素设置了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 即使块级元素设置了宽度，它仍然是占据该整行空间的，（标准的占着茅坑不拉屎型的），不允许其他元素在它所占据的整行上（如果非要说像什么设置浮动定位了可以占据它的茅坑，那你当我没说）