当前位置:  首页  >  前端开发  >  CSS+DIV

CSS尺寸的百分比

CSS中的百分比计算方法CSS支持多种单位形式,如百分比、px、pt、rem等,百分比和px是常用的单位,随着移动端和响应式的流行,rem、vh、vw也开始普及使用。

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 尺寸的百分比的详细内容,更多请关注 第一PHP社区 其它相关文章!

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | PHP问答
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有