CSS控制继承中的height能变为可继承吗


Posted in HTML / CSS onJune 10, 2022

一、前言

我们知道,CSS 属性有可继承和不可继承之分,例如 height 和 width 就 是CSS 中典型的不可继承属性,color 和 font-size 是典型的可继承属性。CSS 可继承属性意味着后代元素的样式会继承祖先元素样式,例如一个父元素的 color 是 red,那么如果它的子孙元素自己没有设置 color 值,就会取自父元素的 color 值。同样的条件,CSS 属性由 color 改为 height,由于默认是不可继承属性,其子孙元素不会继承父元素的 height 值。

这就是 CSS 中的继承与非继承属性的区别,区别在于某一元素的某类样式值,会不会被其子孙元素继承,也就是其子孙元素的样式值会不会取自父元素。

css 中有三个概念对于理解 CSS 是如何工作的十分重要,他们分别是“层叠”、“优先级”和“继承”。

Mozilla 上关于 CSS 继承概念的解释: 在 CSS 中,每个 CSS 属性定义的概述都指出了这个属性是默认继承的("Inherited: Yes") 还是默认不继承的("Inherited: no")。这决定了当你没有为元素的属性指定值时该如何计算值。

二、控制继承

CSS 为控制继承提供了四个特殊的通用属性值。每个css属性都接收这些值。 这意味着,就像 css 盒子模型可以通过改变 box-sizing 的值 (border-box 和 content-box)来改变。 css 属性的继承情况也是可以控制的,例如通过设置值 inherit、initial、unset 和 revert 来控制。

  • inherit:设置该属性会使子元素属性和父元素相同。实际上,就是 "开启继承"。
  • initial:设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的,那么会设置为 inherit。
  • unset:将属性重置为自然值,也就是如果属性是自然继承那么就是 inherit,否则和 initial一样。
  • revert:新的属性,目前仅被很少浏览器支持。

1.开启继承

height 在 CSS 原生上不可继承属性,子元素不会继承父元素的 height, 但是这种现状是可以改变的,当子孙元素的 height 设置 为 inherit, 该子孙元素就会的 height 值就会取其父元素的 height 值,就像是子元素继承了父元素的高度。

如果你希望子元素的高度一直保持和父元素一直,那么设置子元素的 height 为 inherit,最合适不过了。

inherit:设置该属性会使子元素属性和父元素相同。实际上,就是 "开启继承"。这个值可以被几乎 CSS 所有属性 使用,也就是 width 等其他属性也可以开启继承。

下面是一个给子元素的 height 开启继承的示例:

<div>
    <p>这是一个普通的段落</p>

</div>
div{
    height: 200px;
    color: red;
    border: 1px solid red;
    font-size: 25px;

}
p{
    border: 1px solid #1e87f0;
    height: inherit; /*开启继承后,自动继承了父元素的高度*/
    margin: 0;

}

CSS控制继承中的height能变为可继承吗

CSS控制继承中的height能变为可继承吗

2.重设几乎所有属性值

all 结合 unset,重置几乎所有样式,这也可以看成是一种对原始继承的控制改变, all 属性,将这种改变的有效范围放大了,因为 unset 几乎可以重置所有属性的值。 这里的重置通常是指将属性重置为自然值,也就是如果属性是自然继承那么就是 inherit,否则和 initial一样。

CSS 的 shorthand 属性 all 可以用于同时将这些继承值中的一个,应用于(几乎)所有属性。 它的值可以是其中任意一个(inherit, initial, unset, or revert)。 这是一种撤销对样式所做更改的简便方法,以便回到之前已知的起点。

例如像下面这样:例子中有两个 div,第一个 div 应用了样式选择器 div 的样式, 第二个通过 类选择器 unset-all 设置 all 为 unset,重置了几乎所有样式。 例如 color、background-color 和 border 都被重置为浏览器默认样式了,原本两个段落的样式应该是一致的。

<div>
    <p>这是一段文字</p>
</div>
<div class="unset-all">
    <p>这是另一段文字,它将被充值样式</p>
</div>
div {
    color: red;
    background-color: red;
    border: 2px solid green;
}
.unset-all {
    all: unset;

}

下面是一张测试样式重置的效果图:

CSS控制继承中的height能变为可继承吗

三、拓展:常见继承属性与非继承属性

1.常见可继承属性

  • ul
  • li
  • dl
  • dd
  • dt
  • color
  • font-size
  • font-family

2.常见不可继承属性

  • width
  • border
  • margin
  • height
  • padding

四、总结

所以,通过将子元素的 height 值设置 inherit,可以继承父元素的高度,这会使得子元素的高度始终保持一致,这有时会很便利。 当然 width 等大多数属性都可以这样开启继承。

到此这篇关于CSS控制继承中的height能变为可继承吗的文章就介绍到这了,更多相关CSS继承 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
Sep 02 HTML / CSS
浅谈CSS3特性查询(Feature Query: @supports)功能简介
Jul 31 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 HTML / CSS
CSS3实现时间轴特效
Nov 02 HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
Mar 05 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
HTML5 声明兼容IE的写法
May 16 HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
Jan 09 HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
Jun 20 HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 HTML / CSS
HTML5的postMessage的使用手册
Dec 19 HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 HTML / CSS
css样式important规则的正确使用方式
Jun 10 #HTML / CSS
分享几个实用的CSS代码块
Jun 10 #HTML / CSS
html中两种获取标签内的值的方法
Jun 10 #HTML / CSS
html5+实现plus.io进行拍照和图片等获取
Jun 01 #HTML / CSS
基于CSS制作创意端午节专属加载特效
聊聊CSS粘性定位sticky案例解析
Jun 01 #HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 #HTML / CSS
You might like
一个取得文件扩展名的函数
2006/10/09 PHP
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
用PHP调用Oracle存储过程的方法
2008/09/12 PHP
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
php写的带缓存数据功能的mysqli类
2012/09/06 PHP
详解PHP中的Traits
2015/07/29 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
jQuery实现切换字体大小的方法
2015/03/10 Javascript
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
微信小程序实现的canvas合成图片功能示例
2019/05/03 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
python实现读取并显示图片的两种方法
2017/01/13 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
Python中的探索性数据分析(功能式)
2017/12/22 Python
Python3中详解fabfile的编写
2018/06/24 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
python用opencv批量截取图像指定区域的方法
2019/01/24 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
DC Shoes澳大利亚官方网上商店:购买DC鞋子
2019/10/25 全球购物
电子商务专业推荐信范文
2013/12/02 职场文书
趣味比赛活动方案
2014/02/15 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python
python中 .npy文件的读写操作实例
2022/04/14 Python