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