2019-08-06 CSS 尺寸单位

作者: __唐一__ | 来源:发表于2019-08-06 16:46 被阅读0次

2019-08-06 CSS 尺寸单位
CSS 尺寸单位大全
wxss和css的区别
CSS中的尺寸单位
CSS中的尺寸单位
CSS常见的尺寸单位
小程序之WXSS
Web基础之CSS（二）
微信小程序尺寸单位rpx以及样式相关介绍
CSS3 布局排版

绝对单位

px：像素大小

即Pixel，1080P屏幕代表宽度有1920个像素，高度有1080个像素，如下绿色区域代表屏幕，红色区域代表一张宽高分别为960px和540px的图片，最终效果是图片占据屏幕的四分之一，因为宽度和高度都是它的一半。

image.png

pt：磅

pt即Points，印刷行业的常用单位，是一个标准单位，1pt = 1/72英寸，前端比较少用。

pc：派卡

十二点活字（印刷中使用时），相当于我国新四号铅字的尺寸。。。撤不下去了，没玩过印刷。。。

in：英寸

in即Inches。我还未查阅到在英寸在css中的计算规则，因为笔记本一般是15英寸1080P的，台式机一般是22英寸1080P的，像素总量一样，面积不一样，像素大小肯定不一样了，同分辨率下不同尺寸应该有相同英寸计算结果。

猜想：同分辨率不同尺寸下有不同的DPI（dots per inch），即每英寸的点数量，以上两种设备中笔记本电脑的DPI会较高，在宽高比16：9的比例中，对角线和宽度的比是25：16 = 5：4。

15英寸笔记本宽度15英寸 * 5 / 4 = 18.75英寸，1920像素 / 18.75英寸 = 102.4像素/英寸

22英寸显示器宽度=22 * 5 / 4 = 27.5英寸，1920像素 / 27.5英寸 = 69.8像素/英寸。

所以CSS中1in的计算结果在同分辨率不同尺寸的显示器中计算结果不同，但是显示长度相同，

肉眼看到的是1英寸，在15英寸设备上占用102个像素，22英寸设备上占用69个像素。

cm：厘米

耳熟能详，不细介绍，Centermeters缩写。

mm：毫米

耳熟能详，不细介绍，Millimeter缩写。

q：1/4毫米

如标题，Quarter millimeter。

相对单位

%：百分比

在不清楚CSS计算原理的情况下瞎摸经常都能实现效果，但既然是百分比，就一定有参考的，我们要清除这个参考是什么。

width & height

宽度和高度使用%时，宽高都是参考包含块的宽高，以下结构如果给item包一层span是不影响的，span不是块，特殊情况：container没有定义高度，item不是absolute定位，则等同于auto。

html元素的包含块是视口viewport，html百分比高度总是有效，想在body使用百分比，需要html预设高度或让body绝对定位

<div 
   class="container" 
   style="width: 500px; height: 500px; background-color: chartreuse;">
   <div class="item" 
    style="width: 50%; height: 50%; background-color: lightsalmon;">
   </div>
</div>

margin & padding

统一参照包含块宽度。在块布局的排版中，水平方向的内外边距一定要参照包含块的宽度，其次考虑垂直方向的时候，如果不一致就会很难用，很难计算得到相同的边距值，所以统一以宽度作为参考有较好的可用性。

border-radius

参照自身尺寸。主要还是解释border-radius挺麻烦的

border-radius： A B C D / E F G H;

ABCD为水平半径，参考宽度，EFGH为垂直半径，参考高度。。。吧啦吧啦，我实在扯不下去，东西太多了，看这个把玩一下，再看这个详解

设置50%对于正方形来说可以变成圆

image.png

但是长方形就不行...

image.png

.item {
  background-color: yellowgreen;
  width: 300px;
  height: 100px;
  border-radius: 50%;
}
/* 上下两者等同，50%会分别作用到水平半径和垂直半径中 */
.item {
  background-color: yellowgreen;
  width: 300px;
  height: 100px;
  border-radius: 150px / 50px;
}

下图，水平左上角100%宽度，垂直左上角50%高度。

image.png

background-position

参考的是空白尺寸。初始值是0% 0%，空白尺寸 = 元素尺寸 - 图片尺寸，空白尺寸也分水平和垂直。

如下：容器500px，背景图300px，都是正方形。

image.png

坑点1：元素比图片小时计算出负值，此时会逆向放置。

坑点2：如果仅指定一个值（水平），垂直值将是50%，如果你知道，当我没说。。。

font-size

参考父元素的font-size，父元素的font-size为20px时，如果子元素不设置font-size，将继承20px，如果设置了font-size是50%，得到的效果是font-size:10px;

line-height

参考自身的font-size，

vertical-align

参考自身的line-height。

left、right、top、bottom

水平参照宽度，垂直参照高度。

transform的translate

参考边界框的尺寸，水平参考边界框宽度，垂直参考边界框高度。标准盒模型（content-box）是边界是border。

补充：translate3d对应3个维度，第三个值不可以使用百分比。

image.png

附加

百分比的继承：百分比不会被继承，百分比值最终还是通过参考值转换成具体值，如果此属性属于继承属性，计算值会被继承。

em：元素字体倍数

相对单位。即element，和当前元素的font-size有关，和父元素有关仅仅是因为font-size是一个继承属性，当前元素没有设置font-size时会继承父元素的字体大小。

.container {
  background: lightseagreen;
  width: 20em;
  height: 20em;
}

.item {
  background-color: yellowgreen;
  font-size: 1.5em;
  width: 10em;
  height: 10em;
}

<div class="container">
  <div class="item"></div>
</div>

container没有设置font-size，继承得到16px，宽高20 * 16px = 320px。

item设置了font-size，计算得16px * 1.5 = 24px；宽高 24px * 10 =240px。

image.png

rem：根元素字体倍数

相对单位。即root element，只和html元素的font-size有关，由于至于一个html元素的影响因素，是用于适配分辨率的良好手段，配合媒体查询动态设置html元素的font-size让页面布局基本保持一致。

html {
  font-size: 20px;
}

.container {
  background: lightseagreen;
  width: 20rem;
  height: 20rem;
}

.item {
  background-color: yellowgreen;
  width: 14rem;
  height: 14rem;
}

<div class="container">
  <div class="item"></div>
</div>

container宽高 20px * 20 = 400px，item宽高 20px * 14 = 280px。

image.png

vw & vh：视口宽度与高度

相对单位。参考视口的宽高vw即viewport width，vh即viewport height，浏览器中网页内容的可视区域即视口，如图红框部分。

应用场景：固定定位的横幅banner广告、侧边栏高度充满屏幕。

image.png

.container {
  background: lightseagreen;
  width: 100vw;
}


.item {
  background-color: yellowgreen;
  width: 50vw;
  height: 50vh;
}

<div class="container">
  <div class="item"></div>
</div>

container宽度充满视口宽度，高度被item撑开。

item宽度是半个视口宽度，高度是半个视口高度。

image.png

vmax & vmin：视口的最大值和最小值

相对单位。vmax即viewport maximum，vmin即viewport minimum。

应用场景：将元素置为不可见时可以将其定位到视口外。

.container {
  background: lightseagreen;
  width: 100vmin;
  height: 100vmin;
}

.item {
  background-color: yellowgreen;
  width: 25vmax;
  height: 25vmax;
}

<div class="container">
  <div class="item"></div>
</div>

图中红框为视口。