首页 > 代码库 > 前端学习 -- 长度单位
前端学习 -- 长度单位
长度单位
像素 px
- 像素是我们在网页中使用的最多的一个单位,
一个像素就相当于我们屏幕中的一个小点,我们的屏幕实际上就是由这些像素点构成的但是这些像素点,是不能直接看见。
- 不同显示器一个像素的大小也不相同,显示效果越好越清晰,像素就越小,反之像素越大。
百分比 %
- 也可以将单位设置为一个百分比的形式,这样浏览器将会根据其父元素的样式来计算该值
- 使用百分比的好处是,当父元素的属性值发生变化时,子元素也会按照比例发生改变
- 在我们创建一个自适应的页面时,经常使用百分比作为单位
em
- em和百分比类似,它是相对于当前元素的字体大小来计算的
- 1em = 1font-size
- 使用em时,当字体大小发生改变时,em也会随之改变
- 当设置字体相关的样式时,经常会使用em
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .classA { width: 300px; height: 300px; background-color: blue; } .classB { width: 50%; height: 50%; background-color: red; } .classC { font-size: 50px; width: 2em; height: 50%; background-color: yellow; } </style> </head> <body> <div class="classA"> <div class="classB"></div> <div class="classC"></div> </div> </body> </html>
效果:
前端学习 -- 长度单位
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。