Blogger Information
Blog 6
fans 0
comment 0
visits 5956
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS 基础知识 2
王硕的博客
Original
558 people have browsed it

CSS 基础知识 2

属性值简写

  • padding 和 marigin 是看不到的,border 可以设置样式和颜色
  • padding、margin 的缩写

案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>属性值简写</title>
  7. <style>
  8. h2 {
  9. background-color: grey;
  10. }
  11. .box {
  12. width: 200px;
  13. height: 200px;
  14. background-color: greenyellow;
  15. /* 值:上 右 下 左,顺时针 */
  16. /* padding和marigin是看不到的,border可以设置样式和颜色 */
  17. padding: 10px 20px 20px 30px;
  18. border: black solid 5px;
  19. margin: 20px 20px 20px 20px;
  20. }
  21. .box {
  22. /* 第二个值代表左右 */
  23. padding: 10px 20px 30px;
  24. padding: 10px 30px;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29. <h2>php.cn</h2>
  30. <div class="box"></div>
  31. </body>
  32. </html>

em 介绍

  • 1em 等于浏览器默认 font-size 例如 16px
  • em 在嵌套标签中,如果是父子关系,会受到影响,成倍递增或减少

案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>em介绍</title>
  7. <style>
  8. /* 1em等于浏览器默认font-size 例如16px */
  9. ul {
  10. font-size: 0.9em;
  11. }
  12. p {
  13. font-size: 0.8em;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <!-- 1、ul和li属于有父子关系,所以会成倍缩放 -->
  19. <ul>
  20. <li>item1</li>
  21. <ul>
  22. <li>item2</li>
  23. </ul>
  24. </ul>
  25. <!-- 2、非父标签,不会缩小 -->
  26. <p>itme3 <p>item4</p> </p>
  27. </body>
  28. </html>

rem 设置

  • rem(reset em),意思重置 em
  • 重置 em 后,后续使用 rem 来表示大小
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>rem设置</title>
  7. <style>
  8. /* rem 我理解的字面意思是reset em */
  9. html {
  10. /*
  11. 1.默认1em=16px
  12. 2.当前重置了html的根元素em实际值10px:16*0.625=10px
  13. */
  14. font-size: 0.625em;
  15. }
  16. /*
  17. 使用:root,可以应用与html,xhtml,意思就是根元素
  18. */
  19. :root {
  20. font-size: 0.625em;
  21. }
  22. p {
  23. /* 1.8rem = 重置后的1em*1.8=1.8*10px=18px */
  24. font-size: 1.8rem;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29. <p>你好rem</p>
  30. </body>
  31. </html>
Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:现在就应该忘掉px, 尽可能只用相对单位
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