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

MDN CSS 值与单位

绝对长度单位

单位名称描述
cm厘米
mm毫米
Q1 Q = 1/4 mm
in英寸1 in = 2.54 cm
pxpixel像素1 px = 1/96 in
低 dpi (每英寸的像素数) 的设备，1px 是显示器的一个设备像素
ptpoint点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’ 的宽度
remroot em 相对于根元素<html>的字体大小（font-size）
vw相对于视口*宽度的 1vw=视窗宽度的1%
vh相对于视口*高度的 1vh=视窗高度的1%
vmin相对于视口*较小尺寸的 1％ vh/vw
vmax相对于视口*较大尺寸的 1％ vh/vw
%相对于特定基准的百分比 多数时候为父元素对应属性值

百分比单位的相对问题

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

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

  1. static 或 relative：
    最近的块级（display属性值为block，inline-block或list-item）祖先元素的 content-box 区域；
    或者最近的建立BFC的祖先元素，比如：table容器，flex容器，grid容器或块级容器等。
  2. absolute：
    最近的非static（fixed, absolute, relative, or sticky）祖先元素的 padding-box区域。
  3. fixed：
    可视窗口 viewport 本身（属于continuous media类型时）
    或页面区域 page area（属于paged media类型时）
    即初始包含块；
  4. 当属性值为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自身行高

百分比生效需要对应参照的值被设置，否则会无效
当元素为定位元素时，百分比参照为 离该元素最近的，且已开启定位的父级或祖先级块元素

posted @   海胆Sur  阅读(25)  评论(0)  编辑  收藏  举报  
相关博文：
·  CSS position定位
·  创建一个宽度自适应确定比例的div —— aspect-ratio
·  CSS 单位解析
·  CSS 常用单位
·  第五篇 css - 单位值
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· winform 绘制太阳，地球，月球 运作规律
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示
AI IDE Trae