css 子块级元素会继承父块级元素的宽高吗

Posted 2023-05-09

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。

参考技术A 　　1.块级元素和行内元素
　　CSS把处在正常文档流中的不同html元素区分为块级元素（block element）和行内元素（inline element）。一般来说，所谓块级元素就是指当它们显示在浏览器中时，会在自身前后各插入一个空行，而使自身在页面中占据一个相对独立的块状区域的元素。因此，HTML文档中连续的块级元素的典型显示方式就是“堆叠”。块级元素的例子有h1到h6、div、p等。而行内元素则是指以自身所包含的内容决定在页面中占据空间的大小，并且可以与其他行内元素共处一行的元素。行内元素的典型显示方式就是“连接”。行内元素的例子有a、img、span、input等。对于行内元素，又可以进一步分为可替换行内元素和不可替换行内元素，两者的区别在于元素中所包含的内容是否直接显示在页面中。不可替换的行内元素，如a元素中的链接文本会直接显示在网页中；而可替换的行内元素，如img，当它在网页中显示时会被其src属性指向的图像替代。本文讨论的是块级元素，有关行内元素的更多内容请参考其他资料。
　　
　　2．块级元素的宽度
　　块级元素的宽度是指块级元素内容区、左右内边距、左右边框和左右外边距的宽度之和。而块级元素内容区的宽度由该元素的width属性来表示（或设置）。

　　图1简单的盒模型示意图
　　有一个简单的规则，就是块级元素的宽度总是等于其父元素内容区的宽度。如果一个div元素的父元素是body，那么这个div元素的宽度就等于body的宽度，也就是浏览器中窗口的宽度。一个处在正常文档流中的块级元素，其宽度是由七个部分共同决定的。可以称为块级元素的水平“七属性”，它们分别是：
　　margin-left
　　border-left
　　padding-left
　　width
　　padding-right
　　border-right
　　margin-right
　　如下图盒子模型所示：

　　
　　我们可以把它想像成现实中上方开口的盒子，然后从正上往下俯视，边框相当于盒子的厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震而在盒子内填充的泡沫，边界呢相当于在这个盒子周围要留出一定的空间，方便取出。是不是这样就很容易理解盒模型了。
　　所以整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式中width所定义的宽度仅仅是内容部分的宽度，这是许多朋友容易搞混的地方。
　　因为width是内容部分的宽度，所以要增加外边距的时候要注意改小内容宽度的大小，否则内容部分将会出线，同志们可以简单试一下。
　　自动水平属性如何决定块级元素的宽度
　　在块级元素的水平七属性中，只有三个属性可以使用auto（自动）值，如图3所示。
　　图3 可以取auto值的水平属性
　　也就是说，只有margin-left、width和margin-right这三个属性可以使用auto值。这正是本文要讨论的核心问题，即在上述三个属性分别取不同的auto值和长度值，形成不同组合的情况下，相应块级元素盒子中各部分的宽度是如何确定的？
　　在掌握了各种组合的可能性和相应结果的基础上，我们就可以在遇到意外的情况时，对到底是CSS样式的问题，还是CSS解析引擎的问题作出正确的判断。并根据判断来决定是修改CSS样式、向浏览器提供商报告bug，还是采取过滤或hack手段来解决问题。
　　现在举例子说明，假设有如下简单的html代码：
　　<div>
<p> </p>
</div>

　　而相应有8种可能的CSS规则：

　　1. p margin-left:auto;width:auto;margin-right:auto;
　　2. p margin-left:50px;width:auto;margin-right:auto;
　　3. p margin-left:auto;width:auto;margin-right:50px;
　　4. p margin-left:50px;width:auto;margin-right:50px;
　　5. p margin-left:auto;width:200px;margin-right:auto;
　　6. p margin-left:50px;width:200px;margin-right:auto;
　　7. p margin-left:auto;width:200px;margin-right:50px;
　　8. p margin-left:50px;width:200px;margin-right:50px;
　　

　　将这8种可能的CSS规则应用到上面的标记以后，会得到如图3所示的结果（图中为父元素div添加了边框，而为了表示内容区的宽度，也为p元素添加了背景）。
　　（注意浅粉色背景的位置和大小）
　　图4 自动宽度的8种可能性
　　下面，我们就来逐一分析这8种情况：
　　第一种情况：
　　规则是 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。
　　4.小结
　　通过对以上8种可能情况的逐一分析，我们可以得出如下结论：
　　在width属性的值设置成auto的情况下，块级元素内容区的宽度取决于左右外边距是否明确设置了值。如果左右外边距值都是auto，则左右外边距的值都会被重置为默认的值0；如果左右外边距中只有一个值是auto，则该值被重置为0，另一个值有效；如果左右外边距都设置了明确的值，两个值都将有效，此时元素内容区的宽度就是父元素的宽度减去左右外边距后的值。需要说明的是，左右外边距的默认值是0，这意味着如果没有在CSS规则中声明margin-left或者margin-right，它们就会使用默认值0。
　　在width属性的值设置为大于0的值的情况下，块级元素内容区的宽度就是由width属性设置的值。此时，左右外边距的值如果都是auto，则会使块级元素在其父元素中居中；如果左右外边距中只有一个值是auto，则明确设置的值有效，auto值会自动适应剩余的宽度；如果左右外边距都设置了明确的值，那么在从左往右阅读的语言中，会把右外边距的值重置为auto。
　　（注：本文所说“设置明确的值”，是指设置了大于0的值）
　　以下是今天（2012年1月17日）在Chrome中做的一个测试的截图。参考技术B 不会，这个其实很好弄清楚的，自己做个实验就行了，你把你所知道的或者最常用的样式通过嵌套的方式在父级全都设置，这样就能知道哪些会继承哪些不会

HTML和CSS总结

HTML和CSS总结：

1.首先元素分为块级和内联　

(1).内联元素的宽高取决于内容，并且不能设置宽高(内联代表横向)

常见的内联的元素:span;i(em);b(strong);语义是着重强调，给第三方软件识别;(em和i在外观上都是斜体区别是em主要是做为语义标签使用，它是强调的语义)

(2).块级元素的宽高默认等于它的父元素，块级元素可以任意设置宽高(块级代表纵向排版)

常见的块级的元素:div；P

(3).每一个元素都是一个盒子；盒模型用边框围起来，分为内边距(也叫填充边距，于元素边框的内容的距离)；外边距(元素和它的外部的边框)；边框。

css｛Cascading Style Sheet的缩写译作层叠样式表单，是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言｝class 属性规定元素的类名；class 属性大多数时候用于指向样式表中的类。

html文档仅有有一个根节点，根节点就代表文档本身。

2.表格

table由tr组成，tr由td组成;

tr(行);td(单元格)(tr,td的align属性就是控制内容在单元格的对齐方式，默认向左对齐)

3.表单

表单用于搜集不同类型的用户输入，如；用户注册；里面包含：文本框、密码框、单选按钮、复选按钮、重置按钮、提交按钮、图片按钮、下拉列表；form元素：input(表单控件;type属性的text会呈现一个文本框)(actrion属性指名表单提交给服务器数据的集合);mrthod(get是指地址显示不隐藏；post是指地址隐藏)；maxlength属性用来控制用户输入的最大长度；size属性用来控制文本框的尺寸；name(所有表单元素都有一个名字，如果没有名字服务器无法识别到表单)