css 子块级元素会继承父块级元素的宽高吗？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 子块级元素会继承父块级元素的宽高吗？相关的知识，希望对你有一定的参考价值。
css 子块级元素不会继承父块级元素的宽高。
在width属性的值设置成auto的情况下，块级元素内容区的宽度取决于左右外边距是否明确设置了值。如果左右外边距值都是auto，则左右外边距的值都会被重置为默认的值0；如果左右外边距中只有一个值是auto，则该值被重置为0，另一个值有效；如果左右外边距都设置了明确的值，两个值都将有效，此时元素内容区的宽度就是父元素的宽度减去左右外边距后的值。需要说明的是，左右外边距的默认值是0，这意味着如果没有在CSS规则中声明margin-left或者margin-right，它们就会使用默认值0。
在width属性的值设置为大于0的值的情况下，块级元素内容区的宽度就是由width属性设置的值。此时，左右外边距的值如果都是auto，则会使块级元素在其父元素中居中；如果左右外边距中只有一个值是auto，则明确设置的值有效，auto值会自动适应剩余的宽度；如果左右外边距都设置了明确的值，那么在从左往右阅读的语言中，会把右外边距的值重置为auto。
第一种情况：
规则是 p margin-left:auto;width:auto;margin-right:auto;
即，三个属性全都取auto值。如图3所示，结果是p元素的内容区的宽度和父元素div的宽度相等。根据前面的公式（此例未考虑左右边框和内边距，假设它们全取默认值0）我们知道，此时的margin-left:auto和margin-right:auto等同于margin-left:0和margin-right:0。或者说此时的左右外边距都等于0。
第二种情况：
规则是 p margin-left:50px;width:auto;margin-right:auto;
即，把左外边距明确设置为50像素，width和margin-right的值仍然是auto。如图3所示，结果是p元素的内容区宽度等于div元素的宽度减去50像素。也就是说，此时左外边距是50像素，而margin-right:auto相当于margin-right:0，即右外边距为0。
第三种情况：
规则是 p margin-left:auto;width:auto;margin-right:50px;
与第二种情况类似，只不过是把右外边距而不是左外边距明确设置为50像素。图3所示的结果告诉我们，此时右外边距是50像素，而左外边距为0。
（以上三种情况，值为auto的外边距都被重置为默认值0）
第四种情况：
规则是 p margin-left:50px;width:auto;margin-right:50px;
这次是把左、右外边距都明确地设置为50像素，而只有width属性是auto。如图3所示，结果是p元素内容区的宽度等于div的宽度减去（50+50=）100像素。也就是说，50像素的左、右外边距是有效的。p元素内容区在左右外边距之间以自动适应的宽度值补足了div元素的宽度。
第五种情况：
规则是 p margin-left:auto;width:200px;margin-right:auto;
这次把左、右外边距都设置为auto，而把width明确地设置为200像素。如图3所示，结果是p元素的内容区宽度就是设置的200像素，而且，由于左右外边距同为auto，使得p元素在div元素中水平居中。这种情况也是网页布局中最常用的居中块级元素居的主要手段。
第六种情况：
规则是 p margin-left:50px;width:200px;margin-right:auto;
这次margin-left和width分别明确设置成了50px和200px，只有右外边距的值是auto。从图3中可以看到，结果是p元素的内容区就是设置的200像素，而左外边距也是设置的50像素。但右外边距此时在前两个部分之后以自动适应的宽度值补足了div元素的宽度。
第七种情况：
规则是 p margin-left:auto;width:200px;margin-right:50px;
与第六种情况相似，但这次是左外边距在后两个部分之前以自动适应的宽度值补足了div元素的宽度。
第八种情况：
规则是 p margin-left:50px;width:200px;margin-right:50px;
这是一种典型的情况，即三个属性都明确地设置相应的值。从图3的结果中我们看到，只有左外边距和p元素内容区的宽度是设置的值。右外边距虽然也明确设置了50像素的值，但实际情况就像是使用了auto的第六种情况一样。实际上，在三个属性都明确设置了值，但其中一个值在没有解的情况下－－即在不能满足三者之和等于div元素宽度的情况下－－在从左往右阅读的语言中，会把右外边距重置为自动适应的宽度值，也就是auto。
css 子块级元素会继承父块级元素的宽高。
一般来说，所谓块级元素就是指当它们显示在浏览器中时，会在自身前后各插入一个空行，而使自身在页面中占据一个相对独立的块状区域的元 素。因此，html文档中连续的块级元素的典型显示方式就是“堆叠”。
块级元素会独占一行，默认情况下宽度自动填满其父元素宽度；块级元素可以设置宽高；块级元素可以设置margin，padding。
块元素一般可以包含其他块元素和内联元素，当在网页中使用块元素的时候，块元素默认换行显示。在块元素中，可以正常显示所有定义的盒模型属性。
block（块）元素的特点：
①总是在新行上开始；
②高度，行高以及外边距和内边距都可控制；
③宽度缺省是它的容器的100%，除非设定一个宽度。
④它可以容纳内联元素和其他块元素
一文搞懂行内元素和块级元素的区别
行内元素
不会自动进行换行；元素的宽高不可设置；内边距可以设置、外边距水平方向有效，竖直方向无效；元素宽度在不设置的情况下，随内部元素的内容变化。
常见的行内元素
span , a ,strong ,b ,em , i , big ,small ,label ,img , input , select ,textarea
块级元素
独占一行；元素的宽高、以及内外边距都可设置；元素宽度在不设置的情况下，是它本身父容器的100%。
常见的块级元素
div , h1—h6 , p , ul , ol , dl , table , form
行内元素和块级元素之间的区别
| 是否独占一行 | width、height | padding、margin | 默认宽高 | 常见标签 | |
|---|---|---|---|---|---|
| 块级元素 | 是 | 有效 | 有效 | 撑满父元素 | div p h ul ol dl table form |
| 行内元素 | 否 | 无效 | padding有效； margin水平方向有效，竖直方向无效 | 随内部元素的内容变化 | soan a strong i img input select |
| 行内块元素 | 否 | 有效 | 有效 | 随内部元素的内容变化 |
行内元素和块级元素之间的转化
- 块级元素>>行内元素display:inline
<div> DIV1 </div>
<div> DIV2 </div>
display:inline//转化为行内元素之后，这两个div盒子就会在同一行进行显示
<div style="display:inline"> DIV1 </div>
<div style="display:inline"> DIV2 </div>
- 行内元素>>块级元素
方法一: display:block
<span > SPAN1 </span>
<span > SPAN2 </span>
display:block//转化为块级元素之后，span标签就会变成一个块占一行
<span style= "display:block "> SPAN1 </span>
<span style= "display:block "> SPAN2 </span>
方法二: float
给行内元素加上一个浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red {
background-color: red;
width: 100px;
height: 100px;
}
.blue {
background-color: blue;
width: 100px;
height: 100px;
color: white;
float: left;
}
</style>
</head>
<body>
<div class="red">我是div标签</div>
<span class="blue">我是span标签,加上float:left</span>
</body>
</html>
因为span标签是行内元素，不能设置width和height属性 他的大小是由span标签内部文字大小决定的
加上float之后，就相当于把行内元素转化为块级元素，因此他就具备了宽和高的属性
具体显示结果如上图所示
注意：
display：inline 对应的不显示是display：none
display：block 对应的不显示是hidden
以上是关于css 子块级元素会继承父块级元素的宽高吗？的主要内容，如果未能解决你的问题，请参考以下文章