全面总结css中属性值继承知识

本文主要介绍了css中属性值继承,介绍了属性的可以继承和不可继承,同时分析了继承的局限性以及是否可以取消等等,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

继承:html元素可以从父元素那里继承一部分css属性,即使当前元素没有定义该属性。

1.css可以和不可以继承的属性

不可继承的: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。
所有元素可继承:visibility和cursor。
内联元素可继承: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。
终端块状元素可继承:text-indent和text-align。
列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承:border-collapse。 
 

2.值的继承

立即学习“前端免费学习笔记(深入)”;

  继承也是基于文档树的,文档树中元素的某些属性可以被其子元素继承,每一个CSS属性都定义了它能否被继承。要设定文档的某些缺省样式属性,可以在文档树的根上设定该属性,如果这个属性可以继承,则其后代元素将继承这个属性,例如color、font-size等属性。

3.“inherit(继承)”值

  每一个属性可以指定值为“inherit”,即:对于给定的元素,该属性和它父元素相对属性的计算值取一样的值。继承值通常只用作后备值,它可以通过显式地指定“inherit”而得到加强,例如:

         p { font-size: inherit; }

4.继承的局限性

继承虽然减少了重复定义的麻烦,但是,有些属性是不能继承的,例如border(边框)、margin(边距)、padding(补白)和背景等。
这样设定是有道理的,例如,为一个

设定了边框,如果此属性也继承的话,那么在这个

内所有的元素都会有边框,这无疑会产生一个让人眼花缭乱的结果。同样的,影响元素位置的属性,例如margin(边距)和padding(补白),也不会被继承。

  同时,浏览器的缺省样式也在影响着继承的结果。例如:

      body { font-size: 12px; }

      

2级标题的文字不是12px。

      // H2中文字将是标题2样式的文字而非12px大小的文字。

  这是因为浏览器的缺省样式设定了

的CSS规则。

同时,有些老版本的浏览器可能对继承支持的不太好,例如某些浏览器当遇到

的时候,就会丢失所有的继承的属性

5.能否取消

css属性一旦继承了不能被取消,只能重新定义样式。

6.案例

父元素position:relative 子元素:position:absolute 父元素宽度固定,子元素会继承父元素的宽度(对于二级导航很重要,当隐藏的那个导航栏宽度不固定,或者宽度大于父元素时,此时一般只能重新设置子元素的宽度)

相关推荐:

css中属性值继承介绍

css中属性值继承介绍

css中属性值继承介绍

以上就是全面总结css中属性值继承知识的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2901407.html

(0)
上一篇 2025年3月11日 00:10:29
下一篇 2025年3月10日 19:07:26

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 不同分辨率下的电脑css绝对定位如何正常显示?

    本文主要介绍了css绝对定位如何在不同分辨率下的电脑正常显示定位位置,本文首先解释了常见的电脑分辨率,为了页面在不同的分辨率下正常显示,要给页面一个安全宽度,再去使用绝对定位,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一…

    2025年3月11日
    200
  • 全面对比CSS3与动画有关的属性transition、animation、transform

    transition、animation、transform有时候分不清楚,本文主要介绍css3与动画有关的属性transition、animation、transform对比,通过浏览器兼容性,用法和对比更深刻的展示了彼此之间的异同,具体…

    编程技术 2025年3月11日
    200
  • 什么是css双飞翼布局和圣杯布局

    本文主要介绍了浅谈css双飞翼布局和圣杯布局,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 双飞翼布局和圣杯布局都是实现两边固定中间自适应的三栏布局的方式,最近在整理三栏布局实现方式的笔记,…

    2025年3月11日 编程技术
    200
  • 实例讲解css进行中打点效果的实现

    本文主要介绍了css进行中打点效果,附上代码让大家更简单易懂得看明白样式设置,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。 代码如下: nbsp;html>进行中…dot { displa…

    编程技术 2025年3月11日
    200
  • 用css 实现js实现的效果

    本文主要介绍了如何使用css3代码更好实现js中效果,clac counters  tooltip等功能使得代码更为简洁明了,非常有趣,需要的朋友可以参考下,希望能帮助到大家。 1. 纯CSS Tooltip  许多网站还是在使用JavaS…

    2025年3月11日
    200
  • 最简洁的CSS学习笔记

    css是一种用来表现html(标准通用标记语言的一个应用)或xml(标准通用标记语言的一个子集)等文件样式的计算机语言。css不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。css 能够对网页中元素位置的排版进行…

    编程技术 2025年3月11日
    200
  • 纯css实现缩略图悬停效果实例教程

    我们平时在实现悬停效果的时候基本会用到javascript,本文主要给大家介绍了利用纯css实现缩略图悬停效果的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用css具有一定的参考学习价值,需希望能帮助到大家。 前言 前端本身很…

    2025年3月11日
    200
  • CSS3实现逐渐发光的方格边框实例

    本文主要介绍一个使用伪元素来实现边框逐渐发光的代码,主要用到scale和opacity这两个属性。下面来看看详细的介绍: HTML代码:    代码如下 =”light”> 立即学习“前端免费学习笔记(深入)”…

    编程技术 2025年3月11日
    200
  • 详解CSS 给表单必选项添加星号

    表单加星号意思是必填项了,这种功能我们其实见得也是非常的多了本文我们就一起来看一篇关于CSS 给表单必选项添加星号的例子,希望能帮助到大家。 ec(2); 登录后复制 在制作网页表单的时候,如果一个选项是必填的,通常会给选项添加一个星号,比…

    编程技术 2025年3月11日
    200
  • 关于css浮动元素的居中

    本文我们主要和大家介绍关于css浮动元素的居中,居中对于大家来说指的是页面了,此时我们通常使用提50%来实现了,下面来看一个css浮动元素的居中的例子,希望能帮助找到大家。 ec(2); 登录后复制  关于浮动元素的居中,其实不太常用,但为…

    编程技术 2025年3月11日
    200

发表回复

登录后才能评论