深刻理解CSS高度的区别:100%和高度:继承

深刻理解CSS高度的区别:100%和高度:继承
本文主要介绍了身高与身高的区别:100%。作者在设计页面时对实例进行了比较。
继承确实是一件好事,不仅可以节省代码,而且可以处理后台的流,而且对维护也很有好处。

请注意,如果要继承背景图片,不能像这样缩写,那就太天真了:

CSS代码将内容复制到剪贴板。
背景:# FFF继承左上;

它可以是这样的:

CSS代码将内容复制到剪贴板。
背景图片:继承;

1。相容性的差异
身高:100% IE6 +基;
高度:继承IE8 +基;

2。大多数东西都是一样的。
除了兼容性,在大多数情况下,这两个功能是相同的,很难想出一个不同的理由。

父容器高度:自动,无论高度:100%还是高度:继承,是自动的。
设置为八父容器:100px,无论身高:100%或高度:继承是100px高。

没有区别吗没有理由使用高度:继承吗当然,记住,河上发生的一切都不是偶然的!

三.绝对定位不同
当元素是绝对定位的元素时,父容器的位置值是静态的,哈哈,高度的区别:100%和高度:继承可以清楚地反映出来!
你可以点击这里:身高之间的区别:100%和身高:继承是演示
CSS如下:

CSS代码将内容复制到剪贴板。
{。外
显示:内联块;
高度:200px;宽度:40%;
边境:5px固体# cd0000;
}
{。height-100
位置:绝对;
身高:100%;宽度:200px;
背景颜色:# beceeb;
}
{高度继承
位置:绝对;
高度:宽度:200px继承;
背景颜色:# beceeb;
}

html如下:

xml代码将内容复制到剪贴板。
结果,高度:100%打破了天空,哦,不,它在这个地区的地狱深处:
和高度:继承完全适应没有位置特性的父元素:
我不应该解释为什么我们应该知道绝对位置的原因。

总之,在这里,高度:继承是强大的和有用的。回来,容器的高度变化,容器中的绝对定位元素仍然是高度自适应的。这是一个很大的特点,因为如果网页是非常复杂的,避免使用位置:相对会让你减少一个很多的特性混淆层覆盖的麻烦。

tag:继承高度深刻区别电脑软件

相关内容