Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 盒模型常用属性、媒体查询、em，rem区别
Blogger Information
Blog 30
fans 0
comment 0
visits 13836
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
盒模型常用属性、媒体查询、em，rem区别
天宁
Original
423 people have browsed it

盒模型常用属性

  1. <style>
  2. .box {
  3.     background-color: cadetblue;
  4.     width: 200px;
  5.     height: 200px;
  6.     /* padding的四值, 上向下左,顺时针方向; */
  7.     padding: 5px;
  8.     /* 剪切成内容方框 */
  9.     background-clip: content-box;
  10.     /* 告诉浏览器设置的边框和内边距的值是包含在width和height内 */
  11.     box-sizing: border-box;
  12.     /* border还可以根据需要对不同方向的边框进行设置 */
  13.     /* border-right-width: 5px;
  14.     border-right-style: dotted;
  15.     border-right-color: blue; */
  16.     /* 也可以简写成 */
  17.     /* border-right: 5px dotted blue; */
  18.     /* 如果四个方向设置都是一样的可简写称 */
  19.     border: 5px dotted blue;
  20. }
  21. </style>
  22. <body>
  23.     <div class="box"></div>
  24. </body>

媒体查询

媒体:显示/输出信息的介质/载体,屏幕,打印机

查询:根据当前媒体宽度的变化来选择不同的页面或显示效果

  1. <style>
  2. p {
  3.     font-size: 30px;
  4.     color: blue;
  5.     font-weight: bolder;
  6. }
  7. /* 设定最大宽度值是：400px,一旦小于400px p标签字体变成15px 字体颜色变成红色*/
  8. @media (max-width: 400px) {
  9.     p {
  10.         font-size: 15px;
  11.         color: red;
  12.     }
  13. }
  15. </style>
  16. <body>
  17.     <p>你好</p>
  18. </body>

em和rem的区别

em总是随着自身或父元素的字号发生变化,在布局时会显得非常的混乱

rem在根元素中设置的字号,在其它地方引用是使用rem,并且这个值是不变的

  1. <style>
  2. html {
  3.     font-size: 10px;
  4. }
  5. .content {
  6.     font-size: 1.5em;
  7. }
  8. /* em随着父元素的1.5em而改变 所以这里的2em是 2个1.5em也就是30px */
  9. p {
  10.     font-size: 2em;
  11. }
  12. /* rem只根据根元素变化,所以这里的2rem是 20px */
  13. p {
  14.     font-size: 2rem;
  15. }
  16. </style>
  18. <body>
  19.     <div class="content">
  20.         <p>hello</p>
  21.     </div>
  22. </body>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post