Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > em的原理与实现
Blogger Information
Blog 16
fans 0
comment 1
visits 17016
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的原理与实现
半生
Original
1238 people have browsed it

em的原理

  • em：是当前浏览器默认的字号大小，也是根元素root的字号大小。
  • 所以em=16px
  • 用em做一个盒子演示

  • 样式代码如下：
    <style>
    .box {

    1.       /* 这里运用ie盒子 */
    2.       box-sizing: border-box;
    3.       background-color: green;
    4.       /* 背景裁切 到内容区*/
    5.       /* background-clip: content-box; */
    6.       border: 2px solid;
    7.   }
    9.   .box {
    10.       /*当前盒子默认字号 em=16px */
    11.       width: 15em;
    12.       height: 15em;
    13.       padding: 2em;
    14.       /* 边框设置圆角属性 */
    15.       border-radius: 1em;
    16.   }

</style>

  • 效果图
  • 因为字号大小（font-size）具有继承性，所以当我们自定义了字号大小时，此时em就不再继承于浏览器或root（根）元素的字号大小，而会直接继承我们自定义的字号大小（font-size）。

  • 示例代码
    `<style>
    .box {

    1.       /* 因为字号具有继承性 */
    2.       /* 当这里设置了字体大小：font-size=20px时，
    3.       此时em=20px， */
    4.       font-size: 20px;
    5.       width: 15em;
    6.       height: 15em;
    7.       padding: 2em;
    8.       /* 边框圆角设置 */
    9.       border-radius: 1em;
    10.   }

    </style>`

  • 效果图

总结

  • em：始终与当前元素字号绑定，只要改变当前这个字号就可以动态的改变依赖于它的所有属性，例如，padding等
  • font-size:这是一个可继承的属性，所以可以在子元素中直接继承它

小案例

  • 用em制作一个简单的页面布局图

  • 代码如下

    `<style>

    1.   /* 添加点基本样式 */
    2.   .header {
    3.       color: white;
    4.       padding: 1em 2em;
    5.       margin: 2em;
    6.       background-color: green;
    7.       /* 设置边框圆角 */
    8.       border-radius: 1em;
    9.       /* 去掉边框 */
    10.       border: none;
    11.       /* 去掉轮廓 */
    12.       outline: none;
    13.   }
    15.   .main {
    16.       color: white;
    17.       padding: 5em 10em;
    18.       margin: 2em;
    19.       background-color: green;
    20.       /* 去掉边框 */
    21.       border: none;
    22.       /* 去掉轮廓 */
    23.       outline: none;
    24.   }
    26.   .footer {
    27.       color: white;
    28.       padding: 1em 2em;
    29.       margin: 2em;
    30.       background-color: green;
    31.       /* 设置边框圆角 */
    32.       border-radius: 1em;
    33.       /* 去掉边框 */
    34.       border: none;
    35.       /* 去掉轮廓 */
    36.       outline: none;
    37.   }
    39.   /* 添加悬停效果 */
    40.   .body:hover {
    41.       /* 透明度 */
    42.       opacity: 0.5;
    43.       /* 光标样式 */
    44.       cursor: pointer;
    45.       transition: 0.5s;
    46.       /* 阴影效果 */
    47.       box-shadow: 0 0 3px yellow;
    48.   }
    50.   /* 只要改变当前元素的字号，就可以动态的改变所有依赖于这个字号的其他属性了 */
    51.   /* 例如：width,height,border-radius */
    53.   .small {
    54.       font-size: 15px;
    55.   }
    57.   .medium {
    58.       font-size: 20px;
    59.   }
    61.   .large {
    62.       font-size: 25px;
    63.   }

    </style>
    </head>
    <body>
    <div class="header medium">页眉</div>
    <div class="main large">主体</div>
    <div class="footer small">页脚</div>
    </body>
    </html>

  • 效果图

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：咱们在em上花了不少时间, 其实是值得的
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