Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS入门学习之盒模型、媒体查询、常用变量知识小结
Blogger Information
Blog 12
fans 0
comment 0
visits 6069
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
CSS入门学习之盒模型、媒体查询、常用变量知识小结
天空
Original
294 people have browsed it

盒模型常用属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>盒模型的常用属性</title>
  8. </head>
  9. <body>
  10.     <div class="box"></div>
  11.     <style>
  12.         .box {
  13.             width: 200px;
  14.             height: 200px;
  15.             background-color: violet;
  16.             border: 10px solid black;
  17.             padding: 20px;
  18.             background-clip: content-box;
  19.             box-sizing: border-box;
  20.         }
  21.     </style>
  22. </body>
  23. </html>

四值语法、三值语法、双值语法、单值语法

  1. .box {
  2.             /* 四值语法：完整语法，上右下左，顺时针方向 */
  3.             /* padding: 5px 10px 15px 20px; */
  4.             /* 左右相同 */
  5.             padding: 5px 20px 15px 20px;
  6.             /* 等效三值语法 */
  7.             padding: 5px 20px 15px;
  8.             padding: 15px 20px 15px 20px;
  9.             /* 等效于 */
  10.             /* 双值语法，左右相同，上下相同，但并不是同一个值 */
  11.             padding: 15px 20px;
  12.             /* 三值与双值的记忆方法：第二个位置表示左右 */
  13.             /* 单值语法：四个方向都相同 */
  14.             padding: 20px;
  15.         }

边框属性的特点

  1. .box {
  2.             /* 边框与padding,margin类似，但又有显著的不同，边框是可见的 */
  3.             /* 可以设置宽度、样式，颜色 */
  4.             /* border-right-width: 10px;
  5.             border-right-style: solid;
  6.             border-right-color: red; */
  7.             /* border-right: 10px solid blue;
  8.             border-left: 10px solid blue;
  9.             border-top: 10px solid blue;
  10.             border-bottom: 10px solid blue; */
  11.             border: 10px dashed blue;
  12.         }

margin属性

  1.  .box {
  2.             margin:20px;
  3.         }
  4.         .box:last-of-type {
  5.             background-color: red;
  6.             margin-top: 50px;
  7.             /* margin会在垂直方向出现折叠，谁大用谁 */
  8.         }

页面元素知识小结

  • 页面中所有元素，都是一个矩形块
  • 矩形块在一个二维平面中，只有垂直，水平两种排列方式
  • div:块元素

媒体查询

知识小结

  • 媒体：显示/输出信息的介质/载体 ，屏幕，打印机，扫描仪
  • 为什么要查询：因为媒体之间有差异，比如：PC和手机屏幕有差异
  • 查询：根据当前媒体宽度的变化，来选择不同的页面或显示效果

实例：移动优先

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>媒体查询</title>
  8. </head>
  9. <body>
  10.     <button class="btn" small>btn1</button>
  11.     <button class="btn" middle>btn2</button>
  12.     <button class="btn" large>btn3</button>
  13. </body>
  14. <style>
  15.     html {
  16.         font-size: 10px;
  17.     }
  18.     /* 最大374px时生效，小于374px才有效果 */
  19.     @media (max-width:374px) {
  20.        html {
  21.            font-size: 12px;
  22.        } 
  24.     }
  25.     /* 374px-414px之间生效 */
  26.     @media (min-width:375px) and (max-width:413px) {
  27.         html {
  28.             font-size: 14px;
  29.         }
  30.     }
  31.     /* 414px以上生效 */
  32.     @media (min-width:414) {
  33.         html {
  34.             font-size: 16px;
  35.         }
  36.     }
  37. </style>
  38. </html>

em,rem用法与区别

知识小结

  • px:像素（是个绝对单位，是个矩形） 1in=96px
  • em,rem:相对单位
  • em:元素的字号大小

  • rem:根元素的字号大小

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>常用单位</title>
    8. </head>
    9. <body>
    11.   <div>
    12.       <span>Hello</span>
    13.   </div>
    14.   <style>
    15.       html {
    16.           font-size: 10px;
    17.           /* 在根元素中设置的字号，在其它地方引用是使用rem，并且这个值是不变的 */
    18.           /* 1rem=10px */
    19.       }
    20.       div {
    21.           /* font-size: 32px; */
    22.           /* 1em=16px */
    23.           /* 32px=2em */
    24.           font-size: 3rem;
    25.       }
    26.       div span {
    27.           /* 参照父元素进行计算，2em=60px */
    28.           /* 2em=2*16=32px */
    29.           /* 但是 em在父元素中被重新定义了，1em=30px */
    30.           /* 所以在这里 2em=60px */
    31.           font-size: 2em;
    32.           font-size: 20px;
    33.           font-size: 2rem;
    34.       }
    35.   </style>
    36. </body>
    37. </html>
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