CSS 单位 | 百分比单位相对谁就算

海胆Sur

已于 2023-06-27 13:38:53 修改

阅读量230

点赞数

分类专栏： # CSS 文章标签： css css3 单位

于 2021-06-09 16:51:10 首次发布

本文链接：https://blog.csdn.net/I_fole_you/article/details/117747732

版权

CSS 专栏收录该内容

37 篇文章 2 订阅

订阅专栏

MDN CSS 值与单位

绝对长度单位

单位		名称	描述
cm		厘米
mm		毫米
Q			`1 Q = 1/4 mm`
in		英寸	`1 in = 2.54 cm`
px	pixel	像素	`1 px = 1/96 in` 低 dpi* (每英寸的像素数) 的设备，1px 是显示器的一个设备像素*
pt	point	点	`1 pt = 1/72 in`
pc		派卡	`1 pc = 12 pt = 1/6 in`

扩展知识:

160dpi 是中密度（mdpi），240dpi是高密度（hdpi)，320dpi是超高密度（xhdpi）
dpi 有时也写作 ppi
dp (density- independent pixel) 密度无关像素是为了设计图能适配不同像素密度的屏幕
px= dp * (dpi/160) // 160 定义 dp 为 160dpi 时的一个像素大小 公式中 dpi 是实际目标机的dpi
可根据上公式计算自定义机型 dp
移动端适应方案
sp scale-independent pixel 独立比例像素
sp 主要用作字体的单位在不同像素密度的屏幕上能进行同比例的扩大缩小

相对长度单位

单位	描述
em	相对于元素的字体大小（font-size）（2em 表示当前字体大小的 2 倍）一般浏览器字体大小默认为16px，则 2em == 32px；
ex	依赖于英文字母小 x 的高度(极少使用)
ch	相对于字符 ‘0’ 的宽度
rem	root em 相对于根元素`<html>`的字体大小（font-size）
vw	相对于视口*宽度的 1vw=视窗宽度的1%
vh	相对于视口*高度的 1vh=视窗高度的1%
vmin	相对于视口*较小尺寸的 1％ vh/vw
vmax	相对于视口*较大尺寸的 1％ vh/vw
%	相对于特定基准的百分比多数时候为父元素对应属性值

百分比单位的相对问题

百分比的计算值通常是以元素的包含块为对象进行计算
包含块判定

元素的包含块完全受其 position 属性值的影响：

static 或 relative：
最近的块级（display属性值为block，inline-block或list-item）祖先元素的 content-box 区域；
或者最近的建立BFC的祖先元素，比如：table容器，flex容器，grid容器或块级容器等。
absolute：
最近的非static（fixed, absolute, relative, or sticky）祖先元素的 padding-box区域。
fixed：
可视窗口 viewport 本身（属于continuous media类型时）
或页面区域 page area（属于paged media类型时）
即初始包含块；
当属性值为fixed或absolute时，其包含块还有可能是最近的
含有transform或perspective值不为none的祖先元素的padding-box区域。

注：html元素的包含块叫做
初始包含块（initial containing block），它具有可视窗口（用于连续媒体）或页面区域（用于分页媒体）的尺寸。

样式属性	相对于
宽度（width、max-width、min-width）边距（margin、padding） grid-template-columns、grid-auto-columns、column-gap	相对包含块 content-box 宽度
高度（height、max-height、min-height） grid-template-rows、grid-auto-rows、row-gap	相对包含块的 content-box 高度
font-size	相对包含块的 font-size
left、right	相对包含块的 border-box 宽度
bottom、top	相对包含块的 border-box 高度
–
`background-size` `broder-radius`、`border-image-width`、 `transform-origin`、`translate()`	自身宽高
line-height	自身 font-size
vertical-align	自身行高