本文摘自PHP中文网,作者Guanhui,侵删。
CSS中的单位
绝对单位
in-英寸;
cm;
mm;
pt-磅
相对单位
em-与元素字号挂钩;
rem-与根元素字号挂钩;
px-与css像素挂钩
%-另一属性值的百分比
CSS中可以取百分比的属性
定位:top, right, bottom, left
盒模型:width,height, margin,padding
背景:backgroug-position, backgroud-size
文本:text-indent
字体:font-size
百分比是如何计算的
百分比的计算是相对一个基数的,这个基数与当前元素的包含块有关。
基于包含块的宽度来计算的属性:margin, padding, width, max-width,min-width, left, right, text-indent.
基于包含块的高度来计算的属性:top,bottom,height,max-height,min-height
基于当前字体大小来计算的属性:line-height
基于line-height来计算的属性:vertical-align
基于元素本身的宽高:background-position:背景图像的位置,分别设置水平方向和垂直方向上的两个值,如果使用百分比,那么百分比值会同时应用于元素和图像。例如 50% 50% 会把图片的(50%, 50%)这一点与框的(50%, 50%)处对齐,相当于设置了 center center。同理 0% 0% 相当于 left top,100% 100% 相当于 right bottom
基于元素本身的宽度:background-size但此值只能应用在块元素上,所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算
推荐教程:《CSS教程》
以上就是CSS 尺寸的百分比的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者