浅谈CSS中的百分比
我要评论本文介绍了浅谈CSS中的百分比，分享给大家，具体如下：
结论：
- 标准流中的元素，看其属性有没有继承性。对于width和margin-left，它是可以继承的，它会参照父元素或者祖先元素（其实是包含块）；对于height，它没有继承性，父元素或者祖先元素会自适应其所有子元素的高度和（这点是需要注意的）。
- 绝对定位参照的是离它最近的父元素或祖先元素，如果没有父元素或祖先元素，那么参照的是初始包含块（不同的浏览器可能不一样，因为W3C没有规定浏览器具体如何去实现）。但实际上，大部分浏览器将可视区当作绝对定位的包含块。
- 固定定位参照可视区
width设置成百分比
一般子元素通常将继承父元素计算过的值当作百分比的参照，对于不可继承的属性和根元素，则使用初始值作为参照
比如.box没有设置宽度，但默认继承了body计算过的值，又因为.box是.item的父元素，因此.item又继承了.box计算过的值。当一个块级元素不设置宽度时，则它的宽度默认为全屏，就是因为它继承了包含块的宽度。
height设置成百分比
结论
高度设置成百分比时，高度不像宽度一样会继承父元素或者祖先元素，相反，父元素或者祖先元素会根据子元素的实际高度（高度计算值）来自适应，一般为所有子元素的内容加起来的高度和。而子元素会根据文字行高来设置高度具体值（在子元素高度不设置具体值的情况下）。对于有absolute定位的元素，其高度为百分比时会参照父元素或祖先元素的高度，绝对定位参照的是离它最近的父元素或祖先元素，如果没有父元素或祖先元素，那么参照的是初始包含块（不同的浏览器可能不一样，因为W3C没有规定浏览器具体要如何实现）。但实际上，大部分浏览器将可视区当作绝对定位的包含块。
我们一般喜欢将宽度设置成百分比，但在将高度设置成百分比的时候要注意。
<style>
body,div{
margin:0;
padding：0；
}
.box{
width:100px;
height:100%;
background-color: #58d3e2;
}
</style>
<div class="box">height 100%</div>
html为什么会出现height等于21呢？是不是这21是从祖先元素继承过来的？当我们把body的高度设置成100%结果还是一样。其实这里的高度为行高的高度，也就是说，在高度为0或者不设置高度的情况下，高度是文字的行高，当我们在.box中加上line-height:20px;时，box,body和html的高度都会变成20px;当我们把.box高度设置成具体值时：
<style>
body,div{
margin:0;
padding：0；
}
.box{
width:100px;
height:100px;
background-color: #58d3e2;
}
</style>
<div class="box">height 100%</div>
可以发现，body和html竟然跟.box高度一样为100px.所以可以得出父元素在不设置高度的情况下，是自适应子元素高度的（在不设置高度的情况下，html和body的高度是所有内容加起来的高度），如果父元素设置了高度，则是另外一种情况了:
<style>
body,div{
margin:0;
padding:0;
}
.d{
height: 100px;
width: 200px;
background-color: #9d9d9d;
}
.box{
width:100px;
height:100px;
background-color: #58d3e2;
}
</style>
<div class="d">
<div class="box">height</div>
</div>
可以发现d,body,html的高度都变成了100px(本来应该是200px),说明父元素或祖先元素时被动自适应子元素高度的，它们的高度值不会继承给自元素。
当有absolute定位时
1.绝对定位没有定位的祖先元素
这时绝对定位参照的是一个视口的高度，注意视口这个概念。
<style>
body,div{
margin:0;
padding：0；
}
.box{
position：absolute;
width:100px;
height:100%;//改变百分比为50%
background-color: #58d3e2;
}
</style>
<div class="box">height 100%</div>
改变height分别为100%和50%，可以发现html的高度为0，并没有自适应div的高度，因为div已经彻底脱离标准流了，我们说过，如果绝对定位没有定位的祖先元素，则包含块为初始包含块，这里的初始包含块即为可视区，所以这里的百分比是参照可视区的大小来计算的。所以为50%时占视口的一半。注意这只是一个视口的高度，把滚动条往下拉拉就知道了。
2.绝对定位的元素在另外一个定位元素里面（除static外）
这时百分比参照的是父元素生成的包含块计算出来的值
所以想让定位元素的高度占满整个屏幕，可以：
body{
position:relative;
}
margin-left设置成百分比
<style>
body,div{
margin:0;
padding：0；
}
.box{
position:absolute;
width:100px;
height:100px;
margin-left: 100%;
background-color: #58d3e2;
}
</style>
<div class="box">margin-left</div>
这时出现了滚动条，这是因为将div的margin-left设置成了100%，而百分比是参照其包含块body的宽度，body又是参照的html（某些浏览器将它当作初始包含块）。而html的初始包含块是可视区，所以可视区的宽度再加上元素的100%，自然就超出了屏幕了。
解决方法：
（1）利用calc函数
<style>
body,div{
margin:0;
padding：0；
}
.box{
position:absolute;
width:100px;
height:100px;
margin-left: calc(100%-100px);
background-color: #58d3e2;
}
</style>
<div class="box">margin-left</div>
（2）让body的宽度减去100px,因为div的百分比是参照其父元素的宽度计算的，因此这里将它的父元素的宽度减小，那么它的margin-left的100%自然就小了
<style>
body,div{
margin:0;
padding：0；
}
body{
margin-right；100px;
}
.box{
position:absolute;
width:100px;
height:100px;
margin-left: 100%;
background-color: #58d3e2;
}
</style>
<div class="box">margin-left</div>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
css 使用relative设置top为百分比值的方法(仿百度首页)
最近在学习HTML、CSS的过程中，想模仿一下百度首页。发现搜索框这一部分与上下其它元素的空白距离可以随着窗口大小变化，下面小编给大家带来了css 使用relative设置top为百2018-02-27- 百分比值是CSS中设计各种元素尺寸以及页面布局的基础手段,这里就带大家来彻底掌握CSS中的percentage百分比值使用,包括percentage转px的方法等,here we go~2016-06-06
- 这篇文章主要介绍了详解CSS中视窗单位和百分比单位的使用,是CSS入门学习中的基础知识,需要的朋友可以参考下2015-08-12
- 这篇文章主要介绍了CSS3的RGBA中关于整数和百分比值的转换,同时提到了关于浏览器的支持问题,需要的朋友可以参考下2015-08-04
- 这篇文章主要介绍了CSS中的一些百分比相关调试经验分享,CSS中最常用的元素布局定位方法便是利用百分比,需要的朋友可以参考下2015-07-28
- CSS 的属性值中经常会出现百分比，搞清它们的基数是一件很重要的事情，下面通过示例为大家介绍下2014-09-09
- 给div设置height=50%，往往没能看到效果，这是因为百分比的大小是相对其父级元素宽高的大小，如最外层元素设置的百分比是对应屏幕而言的2014-05-15
- 今天就为大家分享一个利用css3制作动态进度条以及附加jQuery百分比数字显示,其效果对比flash来说却毫不逊色，有一个精致的动画进度条，上面还有当前进度的百分比数字显示，2012-12-13
CSS网页设计：百分比进行背景图片定位-CSS教程-网页制作-网页教学网
此文为后来的教程做铺垫，转自这儿。百分数定位很有意思，可以实现非凡的效果。 大部分人应该习惯于使用描述性词语（left、top、center…）或者数值（20px、1em&hell2008-10-31
最新评论