CSS 小结笔记之em

番茄西红柿发布于2019-04-23 13:20 / 807人阅读

摘要：很多人会疑惑为什么有了之后还要使用，而且使用起来相对于来讲比较麻烦。如下图接下来，按住键并连续按减号键，对页面不断进行缩小。造成这种现象的主要原因是是相对大小，使用时对页面进放大或缩小不会造成太大的影响。

1、为什么使用em

em也是css中的一种单位，和px类似。很多人会疑惑为什么有了px之后还要使用em，而且em使用起来相对于px来讲比较麻烦。

em主要是应用于弹性布局，下面给出一个小栗子说明em的强大之处

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        .top {
            height: 80px;
            background-color: black;
        }
        
        .main {
            width: 960px;
            background-color: #ccc;
            margin: 0 auto;
            overflow: hidden;
        }
        
        .left {
            width: 30%;
            height: 100%;
            background-color: aqua;
            border: 1px solid red;
            float: left;
            font-size: 16px;
            line-height: 18px;
        }
        
        .right {
            width: 60%;
            height: 100%;
            font-size: 1em;
            line-height: 1.125em;
            background-color: deeppink;
            border: 1px solid red;
            float: right;
        }
    style>
head>

<body>
    <div class="top">div>
    <div class="main">
        <div class="left">
            <ul>
                <li>em测试用例，没有em的情况li>
                <li>em测试用例，没有em的情况li>
                <li>em测试用例，没有em的情况li>
                <li>em测试用例，没有em的情况li>
                <li>em测试用例，没有em的情况li>
                <li>em测试用例，没有em的情况li>
                <li>em测试用例，没有em的情况li>
                <li>em测试用例，没有em的情况li>
                <li>em测试用例，没有em的情况li>
                <li>em测试用例，没有em的情况li>
                <li>em测试用例，没有em的情况li>
                <li>em测试用例，没有em的情况li>
                <li>em测试用例，没有em的情况li>
                <li>em测试用例，没有em的情况li>
                <li>em测试用例，没有em的情况li>
                <li>em测试用例，没有em的情况li>
                <li>em测试用例，没有em的情况li>
                <li>em测试用例，没有em的情况li>
                <li>em测试用例，没有em的情况li>
                <li>em测试用例，没有em的情况li>
            ul>
        div>
        <div class="right">
            <ul>
                <li>em测试用例有em的强大之处li>
                <li>em测试用例有em的强大之处li>
                <li>em测试用例有em的强大之处li>
                <li>em测试用例有em的强大之处li>
                <li>em测试用例有em的强大之处li>
                <li>em测试用例有em的强大之处li>
                <li>em测试用例有em的强大之处li>
                <li>em测试用例有em的强大之处li>
                <li>em测试用例有em的强大之处li>
                <li>em测试用例有em的强大之处li>
                <li>em测试用例有em的强大之处li>
                <li>em测试用例有em的强大之处li>
                <li>em测试用例有em的强大之处li>
                <li>em测试用例有em的强大之处li>
                <li>em测试用例有em的强大之处li>
                <li>em测试用例有em的强大之处li>
                <li>em测试用例有em的强大之处li>
                <li>em测试用例有em的强大之处li>
                <li>em测试用例有em的强大之处li>
                <li>em测试用例有em的强大之处li>
            ul>
        div>
    div>
body>

html>

View Code

这里模仿了一个网页的大致布局，给出使用em和px的区别。

在正常情况下，em和px看起来没什么区别。如下图

接下来，按住ctrl键并连续按 ‘-’（减号）键，对页面不断进行缩小。缩小到25%时会出现很明显的差别（这里使用的是chrome浏览器，其他浏览器如果没有这种状况，可以在浏览器中手动去改动字体大小，在增大字体的情况下可以看出类似的情况发生）具体如下图

　可以看到使用px的左边已经完全崩溃了，看不出来具体的文字了。而右边使用em的仍然可以清楚的看到文字。造成这种现象的主要原因是em是相对大小，使用em时对页面进放大或缩小不会造成太大的影响。

　既然是相对大小，那么就会有参考大小，em的参考大小是当前元素的字体大小。这时又会引发一个问题，既然是当前元素的字体大小作为参考，那么当前字体以em为单位时又是以什么作为参考呢？这时是以其父级元素的字体大小作为参考。

　因此当整个页面都是使用em作为字体大小的情况下，页面中的1em就是浏览器默认的字体大小为16px;

2、em的具体使用：

　1、设置body{font-size：1em}

　　在设置好body的字体大小的情况下，由于body字体是继承浏览器默认是16px，那么这时只要网页上全是用em，那么1em=16px；

　2、开始计算元素具体需要的大小

　　（1）如果元素的字体大小是继承于上层即16px，那么在元素内部1em=16px；因此计算方法如下

　　　　　　需要的em值=当前元素的px值/父元素的字体大小值px（一般是16px）

　　　　　　例如：1px=1/16=0.0625em，18px=18/16=1.125em

　　（2）如果元素的字体大小是自己设置的

　　　　　　当前元素的字体大小的em值=当前元素字体大小px/父元素字体大小px

　　　　　　当前元素需要的其他em值=当前元素的px值/元素自身的字体大小px

　　　　　下面通过一个例子进行具体的解释　

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        body {
            font-size: 1em;
        }
        
        .son1 {
            font-size: 2em;
            height: 5em;
            width: 5em;
            border: 0.0625em solid red;
            background-color: aqua;
            margin: 0 auto;
        }
        
        .son2 {
            font-size: 32px;
            height: 160px;
            width: 160px;
            border: 2px solid red;
            background-color: aqua;
            margin: 100px auto;
        }
    style>
head>

<body>
    <div class="fa">
        <div class="son1">aaa son1div>
        <div class="son2">aaa son2div>
    div>
body>

html>

　　打开浏览器中显示的.son1盒子的盒子模型，以及网页结果图具体入下

　　可以发现.son1 和.son2 一模一样。

　　.son1 的字体大小为 2em 对应的px为 2*16=32px；（反过来可以验证公式 当前元素的字体大小的em值（2）=当前元素字体大小px（32）/父元素字体大小px（16））

　　高度宽度为5em 对应px为 5*32=160px；（反过来可以验证公式当前元素需要的其他em值（5）=当前元素的px值（160）/元素自身的字体大小px（32））

注意：在ie5/6中还需要添html { font-size：100%} 以保证弹性布局（但是目前ie5/6基本没有，而且这条是根据文章《The Incredible Em & Elastic Layouts with CSS》得知的,本人并没有试出来具体问题在哪。。先记下，以后遇到类似情况使用）

3、rem的使用

　　rem使用方法和em类似，不过rem是相对于根元素的大小（即html的字体大小），而不是自身的大小。2中的栗子中的.son1 的相关带em的属性全改为rem 代码如下

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        .son1 {
            font-size: 2rem;
            height: 5rem;
            width: 5rem;
            border: 0.0625rem solid red;
            background-color: aqua;
            margin: 0 auto;
        }
        
        .son2 {
            font-size: 32px;
            height: 160px;
            width: 160px;
            border: 2px solid red;
            background-color: aqua;
            margin: 100px auto;
        }
    style>
head>

<body>
    <div class="fa">
        <div class="son1">aaa son1div>
        <div class="son2">aaa son2div>
    div>
body>

html>

View Code

结果图为：

因为.son1 中的单位全改为rem，参考对象为html字体的大小即为16px，所以.son1字体大小为2*16=32px ，宽度和高度为5*16=80px，边框为1px

GPU云服务器云服务器设计小结对象小结个人小结小结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1737.html

sass笔记-3|Sass基础语法之样式复用和保持简洁

摘要：区别在于，类是在中运用的，混合器是在样式表中使用的。基本用法选择器继承，用去继承一个选择器定义的所有样式。继承背后的基本实现思路背后最基本的想法是，如果继承了，那么样式表中的任何一处选择器都会用这一选择器组进行替换和打开。上一篇详述了Sass如何嵌套、导入和注释这3个基本方式来保持条理性和可读性，这一篇更进一步地阐述sass保持样式复用和简洁的方式——混合器和选择器继承——这两种方式...

SmallBoyO 2019-08-30 13:12 评论0 收藏0
<em>CSSem> 小结笔记之三种样式表

摘要：内部样式表内部样式表一般写在头部，在标签内用标签括起来。外部样式表外部样式表是单独将样式写到一个文件中，并在头部引用。使用外部样式表时要注意如果出现多重样式时样式覆盖带来的问题。CSS 引入共有三种方式：内部样式表，内联样式（行内样式）表，外部样式表，当然也可以使用多重样式内联样式内联样式表内联样式直接把样式卸载html代码行内，一般仅仅在此样式仅仅只在当前元素上应用时使用，其他...

李文鹏 2019-04-23 13:30 评论0 收藏0
<em>CSSem> 小结笔记之滑动门技术

摘要：所谓的滑动门技术，就是指盒子背景能够自动拉伸以适应不同长度的文本。大多数应用于导航栏之中，如微信导航栏具体实现方法如下首先每一块文本内容是由标签与标签组成标签只指定高度，而不指定宽度。所谓的滑动门技术，就是指盒子背景能够自动拉伸以适应不同长度的文本。即当文字增多时，背景看起来也会变长。大多数应用于导航栏之中，如微信导航栏: 具体实现方法如下： 1、首先每一块文本内容是由a标签与span标签...

lykops 2019-04-23 13:22 评论0 收藏0
【学习笔记】<em>CSSem>深入理解之line-height

摘要：内联盒子的高度由决定，限制包含盒子的高度，两者一致，即把内联盒子安放在包含盒子内，排除其他外界干扰。这时候由内联盒子模型可知，行间距是等分的，中间部分是，达到看似居中的效果。可以得到结论和设置一致，并非是完全垂直，除非为。张鑫旭的CSS深入理解之line-height学习笔记 line-height的定义行高：两行文字基线之间的距离为何是基线：基线是定义所有字线的根本不同字体...

Stardustsky 2019-08-30 15:54 评论0 收藏0
<em>CSSem> 小结笔记之图标字体（IconFont）

摘要：本篇主要介绍一种非常好用的图标大法图标字体。图标字体可以非常便捷的去解决以上问题，使用起来也非常简单。并且改变图标大小只需要改变字体大小就可以了。　　本篇主要介绍一种非常好用的图标大法——图标字体（IconFont）。　　什么是图标字体？顾名思义，它是一种字体，只不过这个字体显示的并不是具体的文字之类的，而是各种图标。　　网站上经常会用到各种图标，之前网页上使用图...

番茄西红柿 2019-04-23 13:20 评论0 收藏0