ASCII码 ASCII码

盒模型，媒体查询，em,rem用法

发布于：2022-03-23 09:17:52  栏目：技术文档

盒模型

html代码

  1. <div class="box"></div>

css代码

  1. /* border:边框
  2. padding:填充
  3. margin:外边距 */
  4. .box {
  5.   width: 200px;
  6.   height: 200px;
  7.   border: 10px solid red;
  8.   padding: 20px;
  9.   margin: 20px;
  10.   background-color: cadetblue;
  12.   /* 实现盒子固定宽和高，不受border，padding的值影响 */
  13.   box-sizing: border-box;
  14. }

效果图

媒体查询

html代码

  1. <div class="btn">提交按钮</div>

css代码

  1. /* 
  2. 设置根元素大小，这里相当于设置了1rem = 10px 
  3. 后面元素设置的尺寸大小，都是相对于这个基准尺寸来计算
  4. */
  5. html {
  6.   font-size: 10px;
  7. }
  8. .btn {
  9.   width: 20rem;
  10.   height: 4rem;
  11.   background: #ccc;
  12.   font-size: 1.6rem;
  13.   color: #333;
  14.   text-align: center;
  15.   line-height: 4rem;
  16. }
  18. /* 媒介查询，判断当前屏幕可视尺寸，调用对应的css代码 */
  19. @media (max-width: 320px) {
  20.   html {
  21.     font-size: 12px;
  22.   }
  23. }
  24. @media (min-width: 321px) and (max-width: 500px) {
  25.   html {
  26.     font-size: 14px;
  27.   }
  28. }
  29. @medi (min-width:501px) {
  30.   html {
  31.     font-sizt: 16px;
  32.   }
  33. }

em,rem用法

html代码

  1. <div class="test"><span>em,rem用法</span></div>

css代码

  1. /* 设置根元素字号 1rem = 10px */
  2. html {
  3.   font-size: 10px;
  4. }
  5. .test {
  6.   font-size: 24px;
  7. }
  8. .test span {
  9.   /* em会被父元素重新定义，1em = 24px */
  10.   /* 这里相当于是48px了 */
  11.   font-size: 2em;
  12. }
  14. .test span {
  15.   /* rem不受父元素影响，只相当于根元素设置的值改变  */
  16.   font-size: 2rem;
  17. }
  19. /* em和rem的区别
  20. em:会随着父元素的变化而变化，可变性太大，不好控制；
  21. rem:只相对于根元素html的值而变化，容易控制； */
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行