CSS中的百分比

LeoHsiun 发布于2019-08-29 15:38 / 2967人阅读

摘要：我们一般喜欢将宽度设置成百分比，但在将高度设置成百分比的时候要注意。解决方法利用函数让的宽度减去因为的百分比是参照其父元素的宽度计算的，因此这里将它的父元素的宽度减小，那么它的的自然就小了

结论：

标准流中的元素，看其属性有没有继承性。对于width和margin-left，它是可以继承的，它会参照父元素或者祖先元素（其实是包含块）；对于height，它没有继承性，父元素或者祖先元素会自适应其所有子元素的高度和（这点是需要注意的）。

绝对定位参照的是离它最近的父元素或祖先元素，如果没有父元素或祖先元素，那么参照的是初始包含块（不同的浏览器可能不一样，因为W3C没有规定浏览器具体如何去实现）。但实际上，大部分浏览器将可视区当作绝对定位的包含块。

固定定位参照可视区

width设置成百分比

一般子元素通常将继承父元素计算过的值当作百分比的参照，对于不可继承的属性和根元素，则使用初始值作为参照

比如.box没有设置宽度，但默认继承了body计算过的值，又因为.box是.item的父元素，因此.item又继承了.box计算过的值。当一个块级元素不设置宽度时，则它的宽度默认为全屏，就是因为它继承了包含块的宽度。

height设置成百分比

结论

高度设置成百分比时，高度不像宽度一样会继承父元素或者祖先元素，相反，父元素或者祖先元素会根据子元素的实际高度（高度计算值）来自适应，一般为所有子元素的内容加起来的高度和。而子元素会根据文字行高来设置高度具体值（在子元素高度不设置具体值的情况下）。对于有absolute定位的元素，其高度为百分比时会参照父元素或祖先元素的高度，绝对定位参照的是离它最近的父元素或祖先元素，如果没有父元素或祖先元素，那么参照的是初始包含块（不同的浏览器可能不一样，因为W3C没有规定浏览器具体要如何实现）。但实际上，大部分浏览器将可视区当作绝对定位的包含块。

我们一般喜欢将宽度设置成百分比，但在将高度设置成百分比的时候要注意。

 
height 100%

html为什么会出现height等于21呢？是不是这21是从祖先元素继承过来的？当我们把body的高度设置成100%结果还是一样。其实这里的高度为行高的高度，也就是说，在高度为0或者不设置高度的情况下，高度是文字的行高，当我们在.box中加上line-height:20px;时，box,body和html的高度都会变成20px;当我们把.box高度设置成具体值时：

 
height 100%

可以发现，body和html竟然跟.box高度一样为100px.所以可以得出父元素在不设置高度的情况下，是自适应子元素高度的（在不设置高度的情况下，html和body的高度是所有内容加起来的高度），如果父元素设置了高度，则是另外一种情况了:

 

height

可以发现d,body,html的高度都变成了100px(本来应该是200px),说明父元素或祖先元素时被动自适应子元素高度的，它们的高度值不会继承给自元素。

当有absolute定位时

1.绝对定位没有定位的祖先元素

这时绝对定位参照的是一个视口的高度，注意视口这个概念。

 
height 100%

改变height分别为100%和50%，可以发现html的高度为0，并没有自适应div的高度，因为div已经彻底脱离标准流了，我们说过，如果绝对定位没有定位的祖先元素，则包含块为初始包含块，这里的初始包含块即为可视区，所以这里的百分比是参照可视区的大小来计算的。所以为50%时占视口的一半。注意这只是一个视口的高度，把滚动条往下拉拉就知道了。

2.绝对定位的元素在另外一个定位元素里面（除static外）

这时百分比参照的是父元素生成的包含块计算出来的值

所以想让定位元素的高度占满整个屏幕，可以：

body{
  position:relative;
}

margin-left设置成百分比

  
margin-left

这时出现了滚动条，这是因为将div的margin-left设置成了100%，而百分比是参照其包含块body的宽度，body又是参照的html（某些浏览器将它当作初始包含块）。而html的初始包含块是可视区，所以可视区的宽度再加上元素的100%，自然就超出了屏幕了。

解决方法：

（1）利用calc函数


margin-left

（2）让body的宽度减去100px,因为div的百分比是参照其父元素的宽度计算的，因此这里将它的父元素的宽度减小，那么它的margin-left的100%自然就小了


margin-left

超融合服务器 idc机房托管 js中的乘百分之百百分比百分比布局 html百分比

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113445.html

响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）

摘要：我的博客原文地址原文地址如果文章对您有帮助，您的是对我最好的鼓励简要介绍前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询百分比和等。在端，通常认为中所表示的真实长度是固定的。我的博客原文地址：原文地址如果文章对您有帮助，您的star是对我最好的鼓励～简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百...

PAMPANG 2019-08-05 14:21 评论0 收藏0
深入学习CSS属性中的百分比

摘要：同理相当于，相当于基于元素本身的宽度但此值只能应用在块元素上，所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算面试题：css中的单位都有哪些？可以取百分数的单位有哪些？这些百分比是如何计算的？ css中的单位绝对单位 in-英寸；cm；mm；pt-磅；pc-pica 相对单位 em-与元素字号挂钩；ex-与元素字体的x高度挂钩；rem-与根元素字号挂钩；px...

icattlecoder 2019-08-29 13:04 评论0 收藏0
CSS属性中经常出现的百分比

摘要：绝对单位英寸磅相对单位与元素字号挂钩与元素字体的高度挂钩与根元素字号挂钩与像素挂钩另一属性值的百分比。定义基于父元素宽度的百分比的缩进。参考权威教程节样式可以使用百分比的属性总结浅析属性之中经常出现的百分比起源：一道面试题（猫眼电影）问题：css中的单位都有哪些？可以取百分数的单位有哪些？其中margin-top取百分数时是相对于谁来计算的？回答：（1）css中的单位：CSS规...

mylxsw 2019-08-29 11:11 评论0 收藏0
CSS通用数据类型

摘要：相反的，通用数据类型并不和任何特定的属性相关联。本文，我将整体讲述一下所有的通用数据类型。这样以来就能够避免和字符串数据类型混淆。距离距离数据类型表示距离的单位，有两种长度单位。渐变函数使用数据类型来定义。 CSS中属性的值有着许多种格式。为了让用户代理（即浏览器）能够识别一个值是否有效，则需要确认该值是否符合该类值支持的格式的其中一种。这些属性值所支持的格式叫做数据类型，在规范中用的...

Elle 2019-08-02 16:15 评论0 收藏0
CSS通用数据类型

摘要：相反的，通用数据类型并不和任何特定的属性相关联。本文，我将整体讲述一下所有的通用数据类型。这样以来就能够避免和字符串数据类型混淆。距离距离数据类型表示距离的单位，有两种长度单位。渐变函数使用数据类型来定义。 CSS中属性的值有着许多种格式。为了让用户代理（即浏览器）能够识别一个值是否有效，则需要确认该值是否符合该类值支持的格式的其中一种。这些属性值所支持的格式叫做数据类型，在规范中用的...

Markxu 2019-08-29 18:46 评论0 收藏0
详述css中的百分比值

摘要：很多属性的取值都可以是百分比值。这就是百分比值的意义。可用百分比值的常见属性宽和高在使用百分比值时，其参照都是元素的包含块，详情。百分比值的继承请注意，当百分比值用于可继承属性时，只有结合参照值计算后的绝对值会被继承，而不是百分比值本身。很多css属性的取值都可以是百分比值。虽然形式上来说，百分比值都是数字后跟%的形式（注意数字和%之间不可以有空格），但在不同的使用场合下，其意义会有...

flyer_dev 2019-08-28 17:57 评论0 收藏0