1.数字与单位之间不能出现空格。
2.如果长度值为 0，则可以省略单位。
3.对于一些 CSS 属性，长度可以是负数。
有两种类型的长度单位：相对和绝对。
相对长度单位：em / rem / vh / vw
html,body{margin:0; padding:0; font-size:14px; } /*em 继承父元素的字体大小，来变大或变小，多层嵌套字体变化*/ .em, .em > .em-son, .em > .em-son > .em-grandson {font-size: 1.2em;} /*rem 继承根节点元素的字体大小，来变大或变小，多层嵌套字体不变化*/ .rem, .rem > .rem-son, .rem > .rem-son > .rem-grandson {font-size: 1.2rem;} /*rem 也可作为固定长度单位设置宽高等*/ .rem-box { 10rem; height: 10rem; line-height:5rem; text-align: center; color: #fff; background: #d60b3b; } /*vh,vw 屏幕可见区域的高度，宽度的1%*/ .vhvw-box { 50vw; height: 100vh; line-height:25vh; text-align: center; color: #fff; background: #d60b3b; } <body> <h1>em 继承父元素的字体大小，来变大或变小，多层嵌套字体变化</h1> <div class="em"> 字体大小 1.2 * 14（父元素body） = 16px <div class="em-son"> 字体大小 1.2 * 16(父元素em) = 20px <div class="em-grandson"> 字体大小 1.2 * 20(父元素em-son) = 24px </div> </div> </div> <br> <h1>rem 继承根节点元素的字体大小，来变大或变小，多层嵌套字体不变化</h1> <div class="rem"> 字体大小 1.2 * 14（根节点html） = 16px <div class="rem-son"> 字体大小 1.2 * 14（根节点html） = 16px <div class="rem-grandson"> 字体大小 1.2 * 14（根节点html） = 16px </div> </div> </div> <br> <h1>rem 也可作为固定长度单位设置宽高等</h1> <div class="rem-box"> 宽：14 * 10 = 140px<br> 高：14 * 10 = 140px </div> <br> <h1>vh,vw 屏幕可见区域的高度，宽度的1%</h1> <div class="vhvw-box"> 宽：屏幕宽度的50%<br> 高：屏幕高度的50% </div> </body>