css什么时候可以用百分比(浅谈CSS中的百分比)
css什么时候可以用百分比
浅谈CSS中的百分比本文介绍了浅谈CSS中的百分比,分享给大家,具体如下:
结论:
- 标准流中的元素,看其属性有没有继承性。对于width和margin-left,它是可以继承的,它会参照父元素或者祖先元素(其实是包含块);对于height,它没有继承性,父元素或者祖先元素会自适应其所有子元素的高度和(这点是需要注意的)。
- 绝对定位参照的是离它最近的父元素或祖先元素,如果没有父元素或祖先元素,那么参照的是初始包含块(不同的浏览器可能不一样,因为W3C没有规定浏览器具体如何去实现)。但实际上,大部分浏览器将可视区当作绝对定位的包含块。
- 固定定位参照可视区
width设置成百分比
一般子元素通常将继承父元素计算过的值当作百分比的参照,对于不可继承的属性和根元素,则使用初始值作为参照
比如.box没有设置宽度,但默认继承了body计算过的值,又因为.box是.item的父元素,因此.item又继承了.box计算过的值。当一个块级元素不设置宽度时,则它的宽度默认为全屏,就是因为它继承了包含块的宽度。
height设置成百分比
结论
高度设置成百分比时,高度不像宽度一样会继承父元素或者祖先元素,相反,父元素或者祖先元素会根据子元素的实际高度(高度计算值)来自适应,一般为所有子元素的内容加起来的高度和。而子元素会根据文字行高来设置高度具体值(在子元素高度不设置具体值的情况下)。对于有absolute定位的元素,其高度为百分比时会参照父元素或祖先元素的高度,绝对定位参照的是离它最近的父元素或祖先元素,如果没有父元素或祖先元素,那么参照的是初始包含块(不同的浏览器可能不一样,因为W3C没有规定浏览器具体要如何实现)。但实际上,大部分浏览器将可视区当作绝对定位的包含块。
我们一般喜欢将宽度设置成百分比,但在将高度设置成百分比的时候要注意。
<style> body,li{ margin:0; padding:0; } .box{ width:100px; height:100%; background-color: #58d3e2; } </style> <li class="box">height 100%</li>
html为什么会出现height等于21呢?是不是这21是从祖先元素继承过来的?当我们把body的高度设置成100%结果还是一样。其实这里的高度为行高的高度,也就是说,在高度为0或者不设置高度的情况下,高度是文字的行高,当我们在.box中加上line-height:20px;时,box,body和html的高度都会变成20px;当我们把.box高度设置成具体值时:
<style> body,li{ margin:0; padding:0; } .box{ width:100px; height:100px; background-color: #58d3e2; } </style> <li class="box">height 100%</li>
可以发现,body和html竟然跟.box高度一样为100px.所以可以得出父元素在不设置高度的情况下,是自适应子元素高度的(在不设置高度的情况下,html和body的高度是所有内容加起来的高度),如果父元素设置了高度,则是另外一种情况了:
<style> body,li{ margin:0; padding:0; } .d{ height: 100px; width: 200px; background-color: #9d9d9d; } .box{ width:100px; height:100px; background-color: #58d3e2; } </style> <li class="d"> <li class="box">height</li> </li>
可以发现d,body,html的高度都变成了100px(本来应该是200px),说明父元素或祖先元素时被动自适应子元素高度的,它们的高度值不会继承给自元素。
当有absolute定位时
1.绝对定位没有定位的祖先元素
这时绝对定位参照的是一个视口的高度,注意视口这个概念。
<style> body,li{ margin:0; padding:0; } .box{ position:absolute; width:100px; height:100%;//改变百分比为50% background-color: #58d3e2; } </style> <li class="box">height 100%</li>
改变height分别为100%和50%,可以发现html的高度为0,并没有自适应li的高度,因为li已经彻底脱离标准流了,我们说过,如果绝对定位没有定位的祖先元素,则包含块为初始包含块,这里的初始包含块即为可视区,所以这里的百分比是参照可视区的大小来计算的。所以为50%时占视口的一半。注意这只是一个视口的高度,把滚动条往下拉拉就知道了。
2.绝对定位的元素在另外一个定位元素里面(除static外)
这时百分比参照的是父元素生成的包含块计算出来的值
所以想让定位元素的高度占满整个屏幕,可以:
body{ position:relative; }
margin-left设置成百分比
<style> body,li{ margin:0; padding:0; } .box{ position:absolute; width:100px; height:100px; margin-left: 100%; background-color: #58d3e2; } </style> <li class="box">margin-left</li>
这时出现了滚动条,这是因为将li的margin-left设置成了100%,而百分比是参照其包含块body的宽度,body又是参照的html(某些浏览器将它当作初始包含块)。而html的初始包含块是可视区,所以可视区的宽度再加上元素的100%,自然就超出了屏幕了。
解决方法:
(1)利用calc函数
<style> body,li{ margin:0; padding:0; } .box{ position:absolute; width:100px; height:100px; margin-left: calc(100%-100px); background-color: #58d3e2; } </style> <li class="box">margin-left</li>
(2)让body的宽度减去100px,因为li的百分比是参照其父元素的宽度计算的,因此这里将它的父元素的宽度减小,那么它的margin-left的100%自然就小了
<style> body,li{ margin:0; padding:0; } body{ margin-right;100px; } .box{ position:absolute; width:100px; height:100px; margin-left: 100%; background-color: #58d3e2; } </style> <li class="box">margin-left</li>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
- line-height 百分比与数值的区别
- CSS百分比定义高度的问题
- background-position详细讲解(background-position百分比原理详解)
- sqlserver百分比数据查询时间(SQL Server统计信息更新时采样百分比对数据预估准确性的影响详解)
- css什么时候可以用百分比(浅谈CSS中的百分比)
- python 多进程读取文件(Python实现的多进程拷贝文件并显示百分比功能示例)
- 焕然一新 成都轨道集团官方网站改版上线(成都轨道集团官方网站改版上线)
- 成都轨道交通19号线二期全线电通(成都轨道交通19号线二期全线电通)
- 19号线二期全线电通 轨道交通项目最新进展来了(19号线二期全线电通)
- 涉及3条地铁线路 成都这4座轨道交通站点有新名字了(涉及3条地铁线路)
- 来了 成都轨道交通5条线路刷新 进度条(成都轨道交通5条线路刷新)
- 一部手机两套系统 OPPO Find X3的正确打开方式你知道吗(一部手机两套系统)
热门推荐
- SQL SERVER中查看某个时间段内出错的作业
- docker正常容器启动失败(Docker容器无法停止删除的解决方案)
- 所有聚合函数mysql教程(Mysql 聚合函数嵌套使用操作)
- dede如何联动筛选(dede 标签调用大全 dedecms 隔五行一个分割线等标签调用)
- pycharm 爬虫的数据存在哪了(利用PyCharm Profile分析异步爬虫效率详解)
- js怎么上传压缩图片(如何用JS有效的压缩图片)
- laravel-admin代码执行流程(解决laravel-admin 自己新建页面里 js 需要刷新一次的问题)
- mysql查看数据库cpu使用率(CPU 以及内存从哪些方面影响 MySQL 性能?)
- mysql根据子节点查询父节点(mysql 递归查找菜单节点的所有子节点的方法)
- pythonsocket教程(python3利用Socket实现通信的方法示例)