search

博客列表 >盒模型简写和em/rem应用场景演示

盒模型简写和em/rem应用场景演示

东东
东东原创
2020年10月14日 22:03:54760浏览

盒模型简写知识点

盒模型分为三个值

  1. padding内边距

  2. border外边距

  3. margin外边框

  • 简写边距的方式为：顺时针方向，上右下左，一个数字表示四周相同；只有两个数值是表示：第一个表示上下，第二个表示左右；三个数值时，第二个表示左右。

示列

  1.     <!-- 第一种情况：四边数值都不相同时，以顺时针方向计算：上右下左 -->
  2.     padding: 20px 50px 30px 40px;
  3.     <!-- 第二种情况：一个数字表示四周相同； -->
  4.     border: 5px;
  5.     <!-- 第三种情况：只有两个数值是表示：第一个表示上下，第二个表示左右； -->
  6.     margin: 10px 15px ;
  7.     <!-- 第四种情况：只有三个数值时，第一个为上，第二个表示左右；第三个为下 -->
  8.     padding: 20px 50px 30px
  • padding border margin style简写：padding/margin属于透明的，设置后没有颜色，但border可以进行设置style

示列

  1. <style>
  2.     .box {
  3.     width: 300px;height: 300px;
  4.         background-image: url(https://img.php.cn/upload/course/000/000/003/5a530c9c6c775990.jpg);
  5.         background-repeat: no-repeat;
  6.         padding: 5px 10px 20px;
  7.         border: deeppink 2px solid;
  8.          /* border-top-style/color/width简写  */
  9.          /* 以下说明padding/margin属于透明的，设置后没有颜色，但border可以进行设置style  */
  10.         border-top: dotted teal 5px;
  11.         border-left:solid white 10px;
  12.         border-right: double blue 3px;
  13.         border-bottom: seagreen ridge 5px;
  14.         margin: 5px 6px 7px 8px;
  15.         background-position: 30px 10px;
  16.         }
  17. <style>
  • 圆角

示列

  1. <style>
  2.         .box1 {
  3.             width: 150px;height: 40px;
  4.             font-size: 2em;
  5.             padding: 2px 20px;
  6.             background-color: springgreen;
  7.             border-radius: 1em;            
  8.         }
  9.         .box2 {
  10.             width: 150px;height: 40px;
  11.             font-size: 2em;
  12.             padding: 10px 15px;
  13.             background-color: rgb(112, 189, 112);
  14.             border-radius: 1em; 
  15.         }
  16. <style>

em/rem应用场景演示

  • em应用

    • 用em作为字号继承当前原素的属性，em可以根据当前元素的字号自适应。

    示列

    1. <style>
    2. .box1 {
    3.           width: 150px;height: 40px;
    4.           padding:1em;
    5.           background-color: springgreen;
    6.           border-radius: 1em;            
    7.       }
    8.       .box2 {
    9.           width: 200px;height: 40px;
    10.           padding: 1em;
    11.           background-color: rgb(112, 189, 112);
    12.           border-radius: 1em;            
    13.       }
    14.       /* em可以根据当前元素的字号自适应 */
    15.       .big {
    16.           font-size: 5em;
    17.       }
    18.       .small{
    19.           font-size: 3em;
    20.       }
    21. </style>
    • rem是根元素字体大小。用：root代替html元素，作为父级元素。用rem做为整数，再设置字号。
    1. <style>
    2.       <!-- 用：root引用代替html元素 -->
    3.       :root {
    4.           <!-- 把整体的字号设置成为整数，1em=16px;0.625em=10px  -->
    5.           font-size: 0.625em;
    6.           <!-- 因此得出1rem=10px -->
    7.           background-color: darkorange;
    8.       }
    9.        div:first-of-type{
    10.           font-size: 2rem;
    11.       }
    12.       div:last-of-type{
    13.           font-size: 1.5rem;
    14.       }
    15.        </style>
    16. </head>
    17. <body>
    18.   <h3>中华人民共和国成立71周年</h3>
    19.   <div class="box"></div>
    20.   <div class="box1 big">我是谁</div><br>
    21.   <div class="box2 small">我爱我的祖国</div>
    22. </body>

    整体实战

  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.     <h2 class="titlebox" style="padding: 0px 15px; background-color: deeppink;font-size: 2em;width: 200px;">在我的家乡</h2>
  8.     <style>
  9.         /* 用：root引用代替html元素 */
  10.         :root {
  11.             /* 把整体的字号设置成为整数，1em=16px;0.625em=10px */
  12.             font-size: 0.625em;
  13.             background-color: darkorange;
  14.         }
  15.         h3 {
  16.             font-size: 2.5em;
  17.             background-color: darkturquoise;
  18.             width:500px; height: 50px;
  19.             /* 简写边距的方式为：顺时针方向，上右下左，一个数字表示四周相同；只有两个数值是表示：第一个表示上下，第二个表示左右；三个数值时，第二个表示左右。 */
  20.             padding: 20px 50px;
  21.         }
  22.         .box {
  23.             width: 300px;height: 300px;
  24.             background-image: url(https://img.php.cn/upload/course/000/000/003/5a530c9c6c775990.jpg);
  25.             background-repeat: no-repeat;
  26.             padding: 5px 10px 20px;
  27.             /* border: deeppink 2px solid; */
  28.             /* border-top-style/color/width简写 */
  29.             /* 以下说明padding/margin属于透明的，设置后没有颜色，但border可以进行设置style */
  30.             border-top: dotted teal 5px;
  31.             border-left:solid white 10px;
  32.             border-right: double blue 3px;
  33.             border-bottom: seagreen ridge 5px;
  34.             margin: 5px 6px 7px 8px;
  35.             /* x,y轴，水平30px, 垂直10px */
  36.             background-position: 30px 10px;
  37.         }
  38.         .box1 {
  39.             width: 150px;height: 40px;
  40.             /* font-size: 2em; */
  41.             padding:1em;
  42.             background-color: springgreen;
  43.             border-radius: 1em;            
  44.         }
  45.         .box2 {
  46.             width: 200px;height: 40px;
  47.             /* font-size: 2em; */
  48.             padding: 1em;
  49.             background-color: rgb(112, 189, 112);
  50.             border-radius: 1em;            
  51.         }
  52.         .big {
  53.             font-size: 5em;
  54.         }
  55.         .small{
  56.             font-size: 3em;
  57.         }
  58.         /* rem是根元素字体大小 */
  59.         div:first-of-type{
  60.             font-size: 2rem;
  61.         }
  62.         div:last-of-type{
  63.             font-size: 1.5rem;
  64.         }
  66.     </style>
  67. </head>
  68. <body>
  69.     <h3>中华人民共和国成立71周年</h3>
  70.     <div class="box"></div>
  71.     <div class="box1 big">我是谁</div><br>
  72.     <div class="box2 small">我爱我的祖国</div>
  73. </body>
  74. </html>

实战图样

上一条：如何制作海报H5，人人秀来教你，生成你自己的海报下一条：【注】微信H5支付 - Referer丢失问题
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多