什么更愉悦地选取em —— 别讲你懂CSS相对单位上

字号收缩问题

当你使用em声明多层嵌套的元素字号时,会产生意想不到的效果。要弄清楚每个元素的实际值,首先你需要知道它继承的父元素的字号大小,如果父元素的字号也是用em声明的,那么你需要知道它的父元素的字号大小,在dom树往上查,以此类推。

当你使用em声明列表的字号大小,列表嵌套了好几层,效果就更明显了。大多数web开发者会发现在他们的职业生涯里面,图2.5的列表嵌套形式有点眼熟。文字在逐步缩小!正是因为em带来的这一类烦人的问题,开发者才对em避而远之。

[ 图 2.5 嵌套列表中的字号缩小现象 ]

上海时时乐走势图官网 1

当你多层嵌套列表,而每一层声明的字号大小以em为单位,字号收缩现象就会发生。在代码片段2.7和2.8的例子里,无序列表的字号是0.8em。这个选择器对页面上所有的ul有效,所以当一个列表从另外一个列表继承到字号大小的时候,em就产生复合效果。

[ 代码片段 2.7 在列表上使用em ]

CSS

body { font-size: 16px; } ul { font-size: .8em; }

1
2
3
4
5
6
7
body {
  font-size: 16px;
}
 
ul {
  font-size: .8em;
}

[ 代码片段 2.8 多层嵌套的列表 ]

<ul> <li>Top level <ul> 1 <li>Second level 1 <ul> 2 <li>Third level 2 <ul> 3 <li>Fourth level 3 <ul> <li>Fifth level</li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<ul>
  <li>Top level
    <ul>                                    1
      <li>Second level                      1
        <ul>                                2
          <li>Third level                   2
            <ul>                            3
              <li>Fourth level              3
                <ul>
                  <li>Fifth level</li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
  • 1 这个列表嵌套在第一个列表里,继承了它的字号大小
  • 2 然后这个列表又嵌套在另一个列表里,继承了第二个列表的字号大小
  • 3 ……以此类推

每一个列表的字号大小是0.8乘以父元素的字号大小。这代表第一个列表的字号大小是12.8px,嵌套的子列表字号大小是10.24px(12.8px * 0.8),第三层列表的是8.192px,如此类推。同样地,如果你给字号大小的赋值大于1em,相反,文字的字号会一层层变大。我们想要的效果是像图2.6一样,在顶层声明字号的大小,但下面嵌套层级的列表字号保持不变。

[ 图 2.6 字号正常的多层嵌套列表 ]

上海时时乐走势图官网 2

其中一种实现的方式可以看看代码片段2.9。第一个列表的字号大小还是0.8 em(见示例2.7),第二个选择器对嵌套在无序列表的无序列表有效 —— 也就是除了第一个无序列表以外的所有无序列表。现在嵌套的列表设定了跟父元素一致的字号大小,正如图2.6一样。

[ 代码片段 2.9 字号收缩现象的纠正 ]

JavaScript

ul { font-size: .8em; } ul ul { 1 font-size: 1em; 1 }

1
2
3
4
5
6
7
ul {
  font-size: .8em;
}
 
ul ul {                1
  font-size: 1em;      1
}
  • 1 嵌套在列表里面的列表,应该把字号大小设定为跟父元素一样

这可以解决问题,但不是最优方案。因为你设置了一个字号值,马上用另一个选择器重写了这个规则。如果你可以使用针对嵌套的列表声明一个特定的选择器,避免互相覆盖,会是一个更好的方案。

到现在我们清楚了,如果你不是一个比较小心的人,你应该远离em。使用em作为paddingmargin和元素缩放效果的单位挺好的,但当em遇上font-size时,事情可以变得很复杂。感谢上天,我们有个更好的选择 —— rem。

1 赞 收藏 评论

上海时时乐走势图官网 3

    2、如果top和bottom值相同、left和 right的值相同,如下面代码:margin:10px 20px 10px 20px;
可缩写为:margin:10px 20px;


当我们在一个元素内用em同时声明font-size和其他属性

你已经使用过em声明font-size了(基于一个继承的字号大小值)。以及,你也曾经使用em声明其他属性,如paddingborder-radius(基于当前元素的字号大小值)。当你针对同一个元素使用em声明font-size和其他属性的时候,em会变得很神奇。此时浏览器必须先计算font-size,然后基于这个值再去计算其他值。这些属性声明的时候使用的是相同的em值,但很可能它们会有不同的计算值。

在之前的例子里,我们计算到字号大小是19.2px(继承的16px乘以1.2em)。图2.4是相同的slogan元素,但有额外的1.2em padding以及为了让padding大小更加明显的灰色背景。可以看出,paddingfont-size稍微大一些,尽管它俩声明的时候em值是一样的。

[ 图2.4 一个font-size为1.2em以及padding为1.2em的元素 ]

上海时时乐走势图官网 4

现在的情况是,这个段落从body继承了16px的字号大小,通过计算得到值为19.2px的字号计算值。这意味着,19.2px是1em在当前域的基础值,而这个值会被用作计算padding的值。对应的CSS代码在下面,更新你的样式表并查看你的测试页面吧。

[ 代码片段 2.6 在font-size和padding上使用em ]

CSS

body { font-size: 16px; } .slogan { font-size: 1.2em; 1 padding: 1.2em; 2 background-color: #ccc; }

1
2
3
4
5
6
7
8
9
body {
  font-size: 16px;
}
 
.slogan {
  font-size: 1.2em;             1
  padding: 1.2em;               2
  background-color: #ccc;
}
  • 1 赋值为 19.2 px
  • 2 赋值为 23.04 px

在这个例子里,padding的声明值为1.2em,乘以19.2px(当前元素的字号大小),计算出23.04px。我们可以看到,尽管font-sizepadding声明时em值是一样的,但它们的计算值是不一样的。

        
css代码:
        <style>
.container{
text-align:center;
}
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
.container li{
margin-right:8px;
display:inline;
}
</style>


如何更愉快地使用em —— 别说你懂CSS相对单位

2018/09/03 · CSS · em

原文出处: Keith J.Grant   译文出处:Yuying Wu   

前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》,其中的第二章《Working with relative units》,书中对relative units的讲解和举例可以说相当全面,看完之后发现自己并不太懂CSS相对单位,也希望分享给大家,所以有了这个译文系列。(若有勘误或翻译建议,欢迎 Github PR ^_^)

《别说你懂CSS相对单位》系列译文:

  • 如何更愉快地使用em [本文]
  • 如何更愉快地使用rem
  • 视口相关单位的应用
  • 无单位数字和行高
  • CSS自定义属性

本文对应的章节目录:

  • 2.1 相对单位值的魔力
    • 2.1.1 完美像素设计(pixel-perfect design)的挣扎
    • 2.1.2 完美像素网页的终结
    • 像素(pixel)、点(point)和pc(pica)
  • 2.2 em和rem
    • 2.2.1 对font-size使用em
      • 当我们在一个元素内用em同时声明font-size和其他属性
      • 字号收缩问题

CSS提供了很多种方式去定义一个值。大家最熟悉的可能也是最容易使用的就是像素(pixel),这被称做“绝对单位”。也就是说,5px在不同的场景下是一样的值。而其他的单位,如em和rem,不是绝对的而是相对的。相对单位的值会根据外部影响因素的变化而变化。例如,2em的值取决于你在哪个元素使用它(有时甚至是哪个属性)。很自然,相对单位使用起来会比较困难。

开发人员,甚至有经验的CSS开发人员,往往不喜欢跟相对单位打交道,其中包括臭名昭著的em。em的值可以被改变的方式似乎难以预测,没有px那么清晰。在本章中,我将揭开相对单位的神秘面纱。首先,我会解释它们为CSS带来的独特价值,然后我会帮助你更好地理解它们。我会解释它们的工作原理,也会告诉你怎么征服它们那看似不可预测的特性。你可以让相对单位为你所用,正确地运行,它们将让你的代码变得更加简单、灵活和容易使用。

 

2.1.1 完美像素设计(pixel-perfect design)的挣扎

在web环境下,用户可以将浏览器窗口设置为任意大小,且CSS需要去适应它。另外,用户可以在一个页面打开后,再调整它的大小,CSS也需要去适应这些新的约束条件。这说明了在你创建页面时样式还没有被调用,而是当页面在屏幕上渲染时,浏览器才会去计算样式的规则。

这给CSS增加了一层抽象的概念。我们不应该根据理想的情境来设计元素,而是应该声明一些样式规则,可以让该元素在任何场景下都能跑通。对于现在的互联网,你的页面可能要在一个4英寸的手机屏幕上展示,也可能在一个30英寸的大屏幕上。

长久以来,设计师大量使用“完美像素”设计,缓解了这个问题带来的复杂性。他们会创建一个有着严格定义的容器,通常是一个大约800px宽的居中的纵向列。然后在这些限制下他们再进行设计,这跟他们的前辈在原生应用程序或印刷出版物中做的设计或多或少有点类似。

第十二章 单位和值

2.1 相对单位值的魔力

CSS是通过迟绑定(late-binding)的方式把样式渲染到web页面上的:内容和它的样式会在各自的渲染完成之后再合并到一起。比起其他类型的图形设计,这给设计过程添加了它们没有的复杂程度,同时也赋予CSS更强大的能力 —— 一个样式表可供成百上千个页面使用。此外,用户可以直接改变页面的最终呈现方式。举个例子,用户可以更改默认字号大小或者调整浏览器窗口的大小。

在早期的计算机应用程序开发以及传统出版行业中,开发人员或出版商清楚知道所在的媒介存在哪些限制。对于一个特定的应用程序,窗口可能是400px宽,300px高,或者一个版面可能是4英寸宽,6½英寸高。因此,当开发人员布局应用程序的按钮和文本时,他们很清楚这些元素可以做成什么尺寸,以及在屏幕上还有多少空间可以留给他们用来处理其他元素。然而在网页上,情况却不是这样的。

第十一章 CSS代码缩写,占用更少的带宽

2.1.2 完美像素网页的终结

随着技术的进步和制造商推出更高分辨率的显示器,像素完美的设计方式慢慢开始崩溃。在21世纪初期,把页面设计成1024px宽还是800px宽,哪个是更保险的展示策略?开发者针对这个问题讨论得很多。然后,我们又针对能否改成1280px宽有类似的讨论。是时候做个决定了。把我们网站的内容宽度做得宽一点(相对于落伍的小电脑屏幕),还是做得窄一点(相对于新出的大屏幕),哪个选择更好呢?

当智能手机出现的时候,开发人员终于要(被迫)要停止假装每个人都可以在他们的网站上获得相同的体验了。不管我们喜不喜欢,我们都得放弃已知的多栏定宽(px)布局,并开始考虑响应式设计。我们再也不能逃避CSS所带来的抽象概念(abstraction),相反,我们要去拥抱这项特性。

响应式 —— 在CSS中,这指的针对不同大小的浏览器窗口,用不同的方式响应更新页面的样式。我们要对不同尺寸的手机、平板电脑或桌面显示器多花心思了。我们将在第8章中详细介绍响应式设计,但在本章中,我会先给大家介绍一些重要的基础概念。

增加的抽象概念意味着额外的复杂性。如果我设定一个宽度为800px的元素,那么它在一个更小的窗口中会怎么显示呢?如果一个横向菜单不能全部在一行展示完,它又会怎么展示?在编写CSS时,你需要能够同时考虑具体情况以及普适性的问题。如果针对一个特定的问题,你有多种方式可以解决,那么你应该选那个在多种不同场景下更通用的解决方案。

在抽象概念这个问题上,相对单位是CSS提供的工具之一。与其把字号大小设置为14px,你可以把它设置为与窗口大小成比例缩放。或者,你可以设置页面上所有元素是依赖基础字号大小的变化而变化的,然后用一行代码就可以达到调整整个页面的目的。接下来,我们来看看CSS提供了哪些方式来实现以上的效果。

像素(pixel)、点(point)和pc(pica)

CSS支持一些绝对长度单位,其中最常见也最基本的是像素(px)。较不常见的绝对单位有毫米(mm,millimeter)、厘米(cm,centimeter)、英寸(in.,inch)、点(pt,point,印刷术语,长度为1/72 inch)以及pc(pica,印刷术语,长度为12 points)。如果你想了解其中的计算方式,以上的长度单位都可以直接转换成另一个单位:1 inch = 25.4 mm = 2.54 cm = 6 pc = 72 pt = 96 px。因此,16px与12pt(16/96×72)是等价的。设计师通常更熟悉点(point)的使用,而开发人员更习惯于像素,因此在和设计师沟通时,你可能需要在两者之间做一些计算工作。

像素这个名字有点误导性 —— 1 CSS像素并不严格等同于显示器的1像素,在高分辨率显示器(如“Retina显示屏”)上尤其明显。尽管根据浏览器、操作系统和硬件的不同,CSS的测量值可能会有细微的差别,但96px总是会大致等于屏幕上的物理1英寸。(尽管有可能会因某些设备或用户设置而异。)

  长度值
长度单位总结一下,目前比较常用到px(像素)、em、% 百分比,要注意其实这三种单位都是相对单位。
    1、像素
      像素为什么是相对单位呢?因为像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)。实际情况是浏览器会使用显示器的实际像素值有关,在目前大多数的设计者都倾向于使用像素(px)作为单位。
    2、em
      就是本元素给定字体的 font-size 值,如果元素的 font-size 为 14px ,那么 1em = 14px; 
如果 font-size 为 18px,那么 1em = 18px。如下代码:
      p{font-size:12px;text-indent:2em;}
上面代码就是可以实现段落首行缩进 24px(也就是两个字体大小的距离)。
    下面注意一个特殊情况:
      但当给 font-size 设置单位为 em 时,此时计算的标准以 p 的父元素的 font-size 为基础。 
如下代码:
      html:
      <p>以这个<span>例子</span>为例。</p>
css:
      p{font-size:14px}
span{font-size:0.8em;}
结果 span 中的字体“例子”字体大小就为 11.2px(14 * 0.8 = 11.2px)。
    3、百分比
      p{font-size:12px;line-height:130%}
设置行高(行间距)为字体的130%(12 * 1.3 = 15.6px)。  

2.2 em和rem

em是最常见的相对长度单位,这是排版中使用的一种度量方式,基准值是当前元素的字号大小。 在CSS中,1em表示当前元素的字号大小,实际值取决于在哪个元素上应用。图2.1展示了一个padding为1em的div

[ 图 2.1:padding为1em的元素(添加虚线是为了让padding更明显)]

上海时时乐走势图官网 5

模板代码片段如下。这套样式规则定义字号为16px,也就是元素本身1em代表的值,然后再使用em来声明元素的padding。 把这段代码添加到一个新的样式表里,在<div class ="padded">下随手写些文字,然后到浏览器看看效果吧。

CSS

.padded { font-size: 16px; padding: 1em; 1 }

1
2
3
4
.padded {
  font-size: 16px;
  padding: 1em;          1
}

 

  • 1 把各个方向的padding的值设置为字号大小

padding赋值为1em,乘以字号,得到一个值为16px的padding渲染值。重点来了,使用相对单位声明的值会由浏览器转化为一个绝对值,我们称之为计算值。

在这个例子里,将padding改为2em会生成一个32px的计算值。如果同一个元素的另一个选择器,用一个不一样的字号值去覆盖它,这会改变em在这个域下的基准值,那么padding的计算值也会相应变化。

在设置padding、height、width或border-radius等属性时,使用em可能会很方便,因为如果它们继承了不同的字号大小,或者用户更改了字体设置,这些属性会均匀地缩放。

图2.2展示了两个不同大小的盒子。盒子内的font-sizepaddingborder-radius各不相同。

[ 图 2.2:有相对大小的padding和border-radius的元素 ]

上海时时乐走势图官网 6

你可以通过用em声明paddingborder-radius来给这些盒子声明样式规则。首先给每个元素设定paddingborder-radius为1em,然后给每个盒子指定不同的字号,那么其他属性会跟着字号缩放。

在你的HTML代码里,创建如下的两个盒子,类名分别是box-smallbox-large,代表两个字号修饰符。

[ 代码片段 2.2:在不同元素上使用em(HTML)]

<span class="box box-small">Small</span> <span class="box box-large">Large</span>

1
2
<span class="box box-small">Small</span>
<span class="box box-large">Large</span>

现在,添加下面的样式到你的样式表。这里使用了em声明了一个盒子。还定义了小字号和大字号的修饰符,指定不同的字号大小。

[ 代码片段 2.3:在不同元素上使用em(CSS)]

CSS

.box { padding: 1em; border-radius: 1em; background-color: lightgray; } .box-small { font-size: 12px; 1 } .box-large { font-size: 18px; 1 }

1
2
3
4
5
6
7
8
9
10
11
12
13
.box {
  padding: 1em;
  border-radius: 1em;
  background-color: lightgray;
}
 
.box-small {
  font-size: 12px;              1
}
 
.box-large {
  font-size: 18px;              1
}
  • 1 不同的字号大小,这会改变元素的em实际值的大小。

这是em一个强大的功能。你可以定义一个元素的字号大小,然后使用一句简单的声明,就可以通过改变字号大小从而控制整个元素大小缩放。你后面将会创建另外一个这样的例子,不过首先,我们来讨论一下em和字号大小。

    这种方法相比第一种方法的优势是不用增加无语义标签,简化了标签的嵌套深度,但也存在着一些问题:它将块状元素的 display 类型改为 inline,变成了行内元素,所以少了一些功能,比如设定长度值。
    (三)
方法三:通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:-50% 来实现水平居中。
      代码如下:
      <body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>


2.2.1 对font-size使用em

font-size使用em作为单位时,它的表现会有点不一样。我之前说过,em是以当前元素的字号大小作为基准值的。但是,如果你把一个元素的字号设为1.2em的时候,这是什么意思呢?一个元素的字号大小是不能等于它自己的1.2倍的。相反,在font-size上的em会先从继承到的字号大小衍生出来。

举个简单的例子,见图2.3。以下展示了一些不同字号大小的文字。在代码片段2.4,你会用到em来实现。

[ 图 2.3 以em为单位的两种不同的字号大小 ]

上海时时乐走势图官网 7

在你的页面添加以下代码片段。第一行文字,在<body>标签里面,它会按body的字号大小渲染。第二部分,口号(slogan),继承父元素的字号大小。

[ 代码片段 2.4 相对font-size的模板 ]

<body> We love coffee <p class="slogan">We love coffee</p> 1 </body>

1
2
3
4
<body>
  We love coffee
  <p class="slogan">We love coffee</p>          1
</body>
  • 1 slogan从继承了字号大小。

代码片段中,CSS代码片段声明了body的字号大小。为了更加清晰,在这里我用了px来声明。下一步,你可以用em来放大slogan的字号大小。

[ 代码片段 2.5:在font-size上使用em ]

Vim

body { font-size: 16px; } .slogan { 1 font-size: 1.2em; 1 } 1

1
2
3
4
5
6
7
body {
  font-size: 16px;
}
 
.slogan {                  1
  font-size: 1.2em;        1
}                          1
  • 1 计算:这个元素继承到字号,乘以1.2

slogan声明的字号大小是1.2em,为了计算转换成像素值,你需要引用继承的字号16px,16 * 1.2 = 19.2,所以计算字号值是19.2px。

提示

如果你已经知道以px为单位的基础字号大小,但希望把它改用em声明,下面有个简单的计算公式:目标em值 = 目标像素值 / 父元素(被继承元素)像素值。举个例子,如果你想要一个10px的字号大小,父元素的字号是12px,10 / 12 = 0.8333em。如果你想要16px的字号大小,父元素字号是12px,那么 16 / 12 = 1.3333em。我们会在这章里多次用到这个计算公式。

有一点对你很有帮助,对于大多数浏览器,默认字号大小是16px。技术上,关键字medium会被计算转换为16px。

      
css代码:
      table td{height:500px;background:#ccc}
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。
    方法二 
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell,激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式。
      html代码:
      <div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>


  字体缩写
:网页中的字体css样式代码也有他自己的缩写方式,下面是给网页设置字体的代码:
    body{
font-style:italic;
font-variant:small-caps; 
font-weight:bold; 
font-size:12px; 
line-height:1.5em; 
font-family:"宋体",sans-serif;
}
这么多行的代码其实可以缩写为一句:
    body{
font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
}
注意:
      1、使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。
      2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
    一般情况下因为对于中文网站,英文还是比较少的,所以下面缩写代码比较常用:
      body{
font:12px/1.5em "宋体",sans-serif;
}
只是有字号、行间距、中文字体、英文字体设置。  

  定宽块状元素:
    满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。

      
css代码
      <style>
.container a{
position:absolute;
width:200px;
background:#ccc;
}
</style>

    例子2:p{color: #336699;}
可以缩写为:p{color: #369;}

第十三章 CSS样式设置小技巧

    3、十六进制颜色  这种颜色设置方法是现在比较普遍使用的方法,其原理其实也是 RGB 设置,但是其每一项的值由 0-255 变成了十六进制 00-ff。
       p{color:#00ffff;}

    css代码:
    <style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>

  颜色值缩写
:关于颜色的css样式也是可以缩写的,当你设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半。
    例子1:p{color:#000000;}
可以缩写为:p{color: #000;}


  垂直居中-父元素高度确定的多行文本
父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种:
    方法一:使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。
    说到竖直居中,css 中有一个用于竖直居中的属性 vertical-align,但这个样式只有在父元素为 td 或 th 时,才会生效。所以又要插入 table 标签了。下面看一下例子:
      html代码:
      <body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>

    3、如果left和right的值相同,如下面代码:margin:10px 20px 30px 20px;
可缩写为:margin:10px 20px 30px;
注意:padding、border的缩写方法和margin是一致的。

  盒模型代码简写
:还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左。具体应用在margin和padding的例子如下:
    margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/
通常有下面三种缩写方法:
    1、如果top、right、bottom、left的值相同,如下面代码:margin:10px 10px 10px 10px;
可缩写为:margin:10px;


  颜色值
在网页中的颜色设置是非常重要,有字体颜色(color)、背景颜色(background-color)、边框颜色(border)等,设置颜色的方法也有很多种:
    1、英文命令颜色  p{color:red;}


  水平居中总结-不定宽块状元素方法:

 

      2、RGB颜色  这个与 photoshop 中的 RGB 颜色是一致的,由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。
       p{color:rgb(133,45,200);}
每一项的值可以是 0~255 之间的整数,也可以是 0%~100% 的百分数。如:p{color:rgb(20%,33%,25%);}


  水平居中设置-行内元素
我们在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的。如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。
  水平居中设置-定宽块状元素
 当被设置元素为块状元素时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素。

      这种方法可以保留块状元素仍以 display:block 的形式显示,优点不添加无语议表标签,不增加嵌套深度,但它的缺点是设置了 position:relative,带来了一定的副作用。
    这三种方法使用得都非常广泛,各有优缺点,具体选用哪种方法,可以视具体情况而定。

      css代码:
      <style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>
这种方法的好处是不用添加多余的无意义的标签,但缺点也很明显,它的兼容性不是很好,不兼容 IE6、7。

      css代码:
      <style>
.container{
float:left;
position:relative;
left:50%
}
      .container ul{
list-style:none;
margin:0;
padding:0;

position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>


  垂直居中-父元素高度确定的单行文本
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。如下代码:
    <div class="container">
hi,imooc!
</div>


  隐性改变display类型
有一个有趣的现象就是当为元素(不论之前是什么类型元素,display:none 除外)设置以下 2 个句之一:
    position : absolute
float : left 或 float:right
元素会自动变为以 display:inline-block 的方式显示,当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。
    如下面的代码,小伙伴们都知道 a 标签是行内元素,所以设置它的 width 是 没有效果的,但是设置为position:absolute 以后,就可以了。
      <div class="container">
<a href="#" title="">进入课程请单击这里</a>
</div>

    (一)
在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度来限制它的弹性。
      不定宽度的块状元素有三种方法居中(这三种方法目前使用的都比多):
        加入 table 标签
设置 display;inline 方法
设置 position:relative 和 left:50%;
这一小节我们来讲一下第一种方法:
        第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
        第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。
    (二)
第二种方法:改变块级元素的 display 为 inline 类型,然后使用 text-align:center 来实现居中效果。如下例子:
        html代码:
        <body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>

本文由上海时时乐走势图发布于web前端,转载请注明出处:什么更愉悦地选取em —— 别讲你懂CSS相对单位上

css

您可能还会对下面的文章感兴趣: