width可以继承吗(div css 子DIV 可以继承父元素哪些属性)

:暂无数据 2026-04-02 07:00:01 0
上一篇文章我们介绍了width可以继承吗的基础,今天我们将深入其核心环节——div css 子DIV 可以继承父元素哪些属性,看看它如何承前启后。

本文目录

div css 子DIV 可以继承父元素哪些属性

里面的DIV不会继承width 这个属性;
如果外面的DIV 有设置 color 或者 font-size 里面的DIV就会继承父DIV属性!
总之 DIV 的继承关系 你用的多了以后 就自然会了解的!

width 这个属性不会有很多继承,
非要说有继承关系的话 那就是 在设置 里面的DIV的 百分比的时候 会继承父DIV的属性, 直接给DIV设宽度 就没继承!

CSS中属性可以继承及不可继承详解

一、不能继承的属性

① 盒子模型所有属性:margin、padding、border、width、height。

② 轮廓及背景属性:outline、background。

③ 定位、显示、浮动属性:display、position、top、left、right、bottom、max-*(如max-height等)、overflow、clear、float、content、z-index。

④ 其他:vertical-align、text-decoration、text-shadow、white-space。

注意:内联元素不能继承:text-indent和text-align,但是块级元素可以。

二、元素可继承属性

① 所有元素可继承:visibility、cursor。
② 列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。

③ 字体属性:line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、font-size-adjust。

④ 文本属性:text-transform、direction,除了(text-decoration、text-shadow 内联元素不能继承 ) 块级 可继承。

⑤ 表格布局属性:caption-side、border-collapse、border-spacing、empty-cells、table-layout。

⑥ 其它属性:letter-spacing、word-spacing。
如果还有您知道的,希望可以留言补充。

如果喜欢,不要吝啬你的爱心“”哦!

CSS有哪些属性是可以继承的

您好,

  1. 不可继承的:display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。

  2. 所有元素可继承:visibility和cursor。

  3. 内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。

  4. 块状元素可继承:text-indent和text-align。

  5. 列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。

  6. 表格元素可继承:border-collapse。

  • 可继承就是父节点设置了这个属性后,子节点就可以继承他的属性

CSS里 width:inherit 什么意思

inherit是继承的意思,也就是使用和上一级父元素同样的width。其他的规则也是如此,inherit就表示继承父元素的值。

css中哪些属性不可以从父元素继承

还是我来告诉你吧!以下的都是可以被继承的,除了这些之外,其他的都不可被继承:文本相关属性:font-family,font-size,font-style,font-variant,font-weight,font,letter-spacing,line-height,text-align,text-indent,text-transform,word-spacing列表相关属性:list-style-image,list-style-position,list-style-type,list-style还有一个属性比较重要,color属性。

php数据控制css中的width大小

width属性的使用方法进行总结。

width属性的使用
1. 解析width:100%;与width:auto;的区别
如果是p的width:100%,则说明p的width会得到980px就已经充满p区域,然后自己又有padding,所以会超出p。而当width:auto时它是总体宽度(包括width,margin,padding,border)等于父级宽度(width,不包含父级的margin,padding,border),所以如果padding已经左右占去10px的空间,那么width给的值就是960px。但无论是width:100%还是auto,其计算的参照都是父级内容区width值,而非总宽度值.
2. CSS调节图片的大小,要知道width、height
如何用css调整图片的大小,使用width和height这两个属性,这两个属性分别是用来设置元素的宽度和高度的。在CSS初学阶段,全部都是使用像素作单位。
3. css
宽度
width
宽度都是直接设置标签对象宽度,并且注意“等号”后跟具体数字宽度值(或百分比),具体宽度值不用跟长度单位,默认以像素(px)为单位,在TABLE表格标签或图片img标签内设置宽度时候其值不跟html单位,默认以像素为单位。
4. CSS2.1SPEC:视觉格式化模型之width属性详解(上)
width属性有几种不同的取值方式,有几下几种:
(1)宽度值:也就是用CSS长度值来明确地规定一个盒子的宽度,取值单位可以用CSS中支持的长度单位,比如px,em等。
(2)百分比:百分比是根据
包含块的宽度来计算的。但是如果包含块的宽度需要根据包含的内容来决定,那么最终的布局是未定义的,也就是标准中没有明确规定如何计算宽度值。另外,如果盒子是绝对定位的,那么它的百分比长度在计算时是根据包含块的
padding
edge的宽度来计算的。
(3)auto:根据CSS标准中规定的宽度计算方法来计算,具体的算法下文中将详细介绍
(4)inherit:事实上width属性是不可继承的,很奇怪为什么会有inherit这个选项,实际情况中width属性一般也很少用到inherit值
5. CSS2.1SPEC:视觉格式化模型之width属性详解(下)
"shrink-to-fit"算法的计算过程:
计算preferred-width:在
除非包含的内容有明确的换行符(比如有《br/》标签时),否则就不换行的情况下,容纳其包含的内容所需要的宽度。
计算preferred-min-width:在
能换行时(英文碰到空格或标点符号,出现了块级元素,当然也包含出现了《br/》标签时)就换行的情况下,容纳所包含的内容需要的宽度。
计算available-width:即利用2.2.3节中的公式:
available-width
=width
of
containing
block
-
’margin-left’
-
’border-left-width’
-
’padding-left’
-
’padding-right’
-
’border-right-width’
-
’margin-right,这里也包括所有滚动出去的宽度。
最终的width则为:min(preferred-width,
max(preferred-min-width,
available-width))。最终的公式可以总结为:最终的宽度以available-width为基准,同时保证不能大于preferred-width以及不能小于preferred-min-width

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。

关于width可以继承吗div css 子DIV 可以继承父元素哪些属性的探讨就到这里。如果你觉得有收获,欢迎点赞支持;如果想深入了解width可以继承吗的其他方面,记得关注我们哦!
本文编辑:admin

更多文章:


currency converter xe(苹果为什么没有下载xe会出现xecurrency这个软件)

currency converter xe(苹果为什么没有下载xe会出现xecurrency这个软件)

读懂本文,您将不仅了解currency converter xe是什么,更能洞悉苹果为什么没有下载xe会出现xecurrency这个软件背后的逻辑,从而举一反三。

2026年4月2日 08:20

pytorch怎么学(初学者如何学习python如何快速从Python小白到初级Python工程师)

pytorch怎么学(初学者如何学习python如何快速从Python小白到初级Python工程师)

您是否正在为搞不清pytorch怎么学和初学者如何学习python如何快速从Python小白到初级Python工程师的关系而烦恼?恭喜,这篇干货就是您的“及时雨”。

2026年4月2日 08:00

博途c***tant是什么意思(c***tant是什么意思 常数的定义及应用场景)

博途c***tant是什么意思(c***tant是什么意思 常数的定义及应用场景)

有没有这种经历:明明想搞懂博途c***tant是什么意思,却被c***tant是什么意思 常数的定义及应用场景卡住了脖子?今天这篇文章,就是专治这种“卡脖子”问题的。

2026年4月2日 07:40

swap的作用(Swap交换空间的作用是什么)

swap的作用(Swap交换空间的作用是什么)

大家好,如果您对swap的作用还心存疑问,别着急,今天这篇文章就将围绕Swap交换空间的作用是什么为您展开详细解说。

2026年4月2日 07:20

width可以继承吗(div css 子DIV 可以继承父元素哪些属性)

width可以继承吗(div css 子DIV 可以继承父元素哪些属性)

上一篇文章我们介绍了width可以继承吗的基础,今天我们将深入其核心环节——div css 子DIV 可以继承父元素哪些属性,看看它如何承前启后。

2026年4月2日 07:00

二次函数根的表达式(知道二次函数的两个根怎么求原函数方法)

二次函数根的表达式(知道二次函数的两个根怎么求原函数方法)

关于二次函数根的表达式,您需要知道的几个关键点,尤其是知道二次函数的两个根怎么求原函数方法的深入解析,我们都将在这篇文章中涵盖。

2026年4月2日 06:40

xml数据库编辑器(电脑上找不到xml editor打开方式)

xml数据库编辑器(电脑上找不到xml editor打开方式)

从一个常见的误区说起:很多人学xml数据库编辑器,却忽略了电脑上找不到xml editor打开方式。结果事倍功半。希望你不会再犯这个错误。

2026年4月2日 06:20

clown是什么意思(clown是什么意思啊)

clown是什么意思(clown是什么意思啊)

clown是什么意思和clown是什么意思啊,看似独立,实则血脉相连。它们是如何相互影响的?本文将为你层层剖析。

2026年4月2日 06:00

用bootstrap做的网站(Bootstrap简介)

用bootstrap做的网站(Bootstrap简介)

本文旨在为您说清楚两件事:一是用bootstrap做的网站到底是什么,二是如何理解Bootstrap简介。内容不长,但都是干货,希望能对您有所帮助。

2026年4月2日 05:40

暴雪与网易合作(网易回应暴雪声明终止合作, 如何评价近年来网易与暴雪的合作)

暴雪与网易合作(网易回应暴雪声明终止合作, 如何评价近年来网易与暴雪的合作)

想知道那些精通暴雪与网易合作的人,是如何看待网易回应暴雪声明终止合作, 如何评价近年来网易与暴雪的合作的吗?本篇将为你揭秘他们的思考路径。

2026年4月2日 05:20

最近更新

currency converter xe(苹果为什么没有下载xe会出现xecurrency这个软件)
2026-04-02 08:20:01 浏览:0
clown是什么意思(clown是什么意思啊)
2026-04-02 06:00:02 浏览:0
用bootstrap做的网站(Bootstrap简介)
2026-04-02 05:40:01 浏览:0
热门文章

标签列表