博客列表 >盒模型与媒体查询与属性em,rem用法

盒模型与媒体查询与属性em,rem用法

新手1314
新手1314原创
2022年03月23日 10:13:52462浏览

1.盒模型

1.盒模型常用属性:

代码:

  1. 1.盒模型由四层组成:
  2. 外边距:margin 边框:border 内边距:padding 盒子宽高:widthheight
  3. 2.box-sizing: border-box;直接锁定所需长宽,不用再去计算内边距和边框大小。

实现:

2.媒体查询

代码:

  1. html:
  2. <button class="bt da">btn1</button>
  3. <button class="bt zhong">btn2</button>
  4. <button class="bt xiao">btn3</button>
  5. css:
  6. .bt.da {
  7. font-size: 12px;
  8. }
  9. .bt.zhong {
  10. font-size: 12px;
  11. }
  12. .bt.xiao {
  13. font-size: 12px;
  14. }
  15. @media (max-width: 374px) {
  16. html {
  17. font-size: 20px;
  18. }
  19. }
  20. @media (min-width: 376px) and (max-width: 400px) {
  21. html {
  22. font-size: 30px;
  23. }
  24. }

实现:


3.em与rem用法

  1. em:获取父元素的大小
  2. rem:获取html元素的大小

em实现:

rem实现:

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议