1.长度
1.1相对长度单位
相对长度单位指的是这个单位没有一个固定的值，它的值收到其它元素属性(例如浏览器窗口的大小、父级元素的大小)的影响，在响应式布局方面相对长度单位非常适用。下表中列举了CSS中支持的相对长度单位：
| 单位 | 描述 | 示例 |
|---|---|---|
| em | 相对于自身font-size(字体大小)属性的值，如果自身没有设置，则继承父元素font-size属性的值，1em等同于font-size属性值，例如font-size的值为16px，那么1em就等于16px，2em就等于32px | p(line-height: 2em;) |
| rem | 相对于根元素<html>的font-size属性的大小，比如根元素的font-size是100px，那么12rem就相当于120px | p(font-size: 1.2rem) |
| ex | 相对于所用字体中小写英文字母x的高度，若无法确定x的高度则使用0.5em计算 | p(font-size: 1ex) |
| ch | 相对于所用字体中数字0的高度，若无法确定0的高度则使用0.5em计算 | p(font-size: 3ch) |
| vw | 相对于浏览器窗口的宽度，1vw=窗口宽度的1% | p(font-size: 5vw) |
| vh | 相对于浏览器窗口的高度，1vw=窗口高度的1% | p(font-size: 5vh) |
| vmin | vw与vh中较小的值 | p(font-size: 5vmin) |
| vmax | vw与vh中较大的值 | p(font-size: 5vmax) |
| % | 相对于父元素宽度或字体大小的百分比 | div(width: 55%) |
常用em、rem和%。
1.2 绝对长度
绝对长度单位表示一个真实的物理尺寸，它的大小是固定的，不会因为其它元素尺寸的变化而变化。下表中列举了CSS中支持的绝对长度单位:
| 单位 | 描述 | 示例 |
|---|---|---|
| cm | 厘米 | p(font-size:0.5cm) |
| mm | 毫米 | p(font-size:5mm) |
| in | 英寸(1in=96px) | p(font-size:1in) |
| px | 像素(1px=1/96in) | p(font-size:16px) |
| pt | point，是一种专用的印刷单位“磅”，也可以称为“点”(1pt=1/72in) | p(font-size:16pt) |
| pc | pica,中文可称为“派卡”，印刷行业用于描述字体大小的单位，相当于我国新四号铅字的尺寸(1pc=12pt) | p(font-size:5pc) |
绝对长度单位除了px，其它的不怎么用，了解即可
2.width
通过width属性可以设置元素内容区的宽度，属性的可选项值如下：
固定数值：px
相对数值：%
一般情况下width属性需要与height属性配合使用来同时定义元素的高度和宽度，因为某些元素没有默认的宽度和高度，若不定义宽度和高度而且元素中又没有内容时，这个元素的宽度或高度就会被设置为0px，从外表看起来就像被压缩成一条线。
3.height
默认情况下，浏览器会将某些元素的宽度设置为100%，例如<div>、<p>，而元素的高则是根据元素中的内容来确定的，所有有些情况下您不必为元素设置固定的宽度或高度。
3.1max-width和max-height
最大高度与最大宽度
width: 200px;
max-width: 100px;
实际长度就是100px。没有超过时，你原本多少就是多少，不能超过我设置单位最大宽度
高度同理
3.2min-width和min-height
最小宽度与最小高度
网友评论