<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* * 长度单位 * 像素 px * - 像素是我们在网页中使用的最多的一个单位， * 一个像素就相当于我们屏幕中的一个小点， * 我们的屏幕实际上就是由这些像素点构成的 * 但是这些像素点，是不能直接看见。 * - 不同显示器一个像素的大小也不相同， * 显示效果越好越清晰，像素就越小，反之像素越大。 * * 百分比 % * - 也可以将单位设置为一个百分比的形式， * 这样浏览器将会根据其父元素的样式来计算该值 * - 使用百分比的好处是，当父元素的属性值发生变化时， * 子元素也会按照比例发生改变 * - 在我们创建一个自适应的页面时，经常使用百分比作为单位 * * em * - em和百分比类似，它是相对于当前元素的字体大小来计算的 * - 1em = 1font-size * - 使用em时，当字体大小发生改变时，em也会随之改变 * - 当设置字体相关的样式时，经常会使用em * */ .box{ width: 300px; height: 300px; background-color: red; } .box1{ font-size: 20px; width: 2em; height: 50%; background-color: yellow; } </style> </head> <body> <div class="box"> <div class="box1"></div> </div> </body> </html>