译文出处,定义最大的标题

作者: 前端  发布:2019-11-22

2.2 em和rem

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

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

9159.com 1

模板代码片段如下。这套样式规则定义字号为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的元素 ]

9159.com 2

你可以通过用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和字号大小。

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

二、有继承性的属性

2.1 相对单位值的魔力

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

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

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


EM特点
  1. em的值并不是固定的;

  2. em会继承父级元素的字体大小。
    所以我们在写CSS的时候,需要注意两点:

  3. body选择器中声明Font-size=62.5%;

  4. 将你的原来的px数值除以10,然后换上em作为单位;

  5. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

    也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。

当我们在一个元素内用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的元素 ]

9159.com 3

现在的情况是,这个段落从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值是一样的,但它们的计算值是不一样的。

      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%);}



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英寸。(尽管有可能会因某些设备或用户设置而异。)

        
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>


1、字体系列属性
font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。
font-stretch:对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。
font-size-adjust:为某个元素规定一个 aspect 值,这样就可以保持首选字体的 x-height。
2、文本系列属性
text-indent:文本缩进
text-align:文本水平对齐
line-height:行高
word-spacing:增加或减少单词间的空白(即字间隔)
letter-spacing:增加或减少字符间的空白(字符间距)
text-transform:控制文本大小写
direction:规定文本的书写方向
color:文本颜色
3、元素可见性:visibility
4、表格布局属性:caption-side、border-collapse、border-spacing、empty-cells、table-layout
5、列表布局属性:list-style-type、list-style-image、list-style-position、list-style
6、生成内容属性:quotes
7、光标属性:cursor
8、页面样式属性:page、page-break-inside、windows、orphans
9、声音样式属性:speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

如何更愉快地使用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
    • 9159.com,2.2.1 对font-size使用em
      • 当我们在一个元素内用em同时声明font-size和其他属性
      • 字号收缩问题

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

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

  隐性改变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>

1、display:规定元素应该生成的框的类型
2、文本属性:
vertical-align:垂直文本对齐
text-decoration:规定添加到文本的装饰
text-shadow:文本阴影效果
white-space:空白符的处理
unicode-bidi:设置文本的方向
3、盒子模型的属性:width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left
4、背景属性:background、background-color、background-image、background-repeat、background-position、background-attachment
5、定位属性:float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
6、生成内容属性:content、counter-reset、counter-increment
7、轮廓样式属性:outline-style、outline-width、outline-color、outline
8、页面样式属性:size、page-break-before、page-break-after
9、声音样式属性:pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

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

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

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

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

第十二章 单位和值

< a>定义超链接
< b>字体加粗
< span>定义在文档中的行内元素
< img>向网页中插入题图像
< input>输入框
< small>小号字体效果
< br>换行
< big>字体加大加粗
< strong>强调的语气
< select>创建单选或多选菜单
< textarea>定义文本域,多行的文本输入控件

字号收缩问题

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

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

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

9159.com 4

当你多层嵌套列表,而每一层声明的字号大小以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 字号正常的多层嵌套列表 ]

9159.com 5

其中一种实现的方式可以看看代码片段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 赞 收藏 评论

9159.com 6

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


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为单位的两种不同的字号大小 ]

9159.com 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。

 

1.行内元素与块级函数可以相互转换,通过修改display属性值来切换块级元素和行内元素,行内元素display:inline,块级元素display:block。
2.行内元素和其他行内元素都会在一条水平线上排列,都是在同一行的;
 块级元素却总是会在新的一行开始排列,各个块级元素独占一行,垂直向下排列,若想使其水平方向排序,可使用左右浮动(float:left/right)让其水平方向排列。
3.行内元素不可以设置宽高,宽度高度随文本内容的变化而变化,但是可以设置行高(line-height),同时在设置外边距margin上下无效,左右有效,内填充padding上下无效,左右有效;
 块级元素可以设置宽高,并且宽度高度以及外边距,内填充都可随意控制。
4.块级元素可以包含行内元素和块级元素,还可以容纳内联元素和其他元素;
 行内元素不能包含块级元素,只能容纳文本或者其他行内元素。

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

1、字体系列属性
2、除text-indent、text-align之外的文本系列属性

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


  盒模型代码简写
:还记得在讲盒模型时外边距(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;


如何让块级元素水平居中?如何让行内元素水平居中?

CSS设置行内元素的水平居中

div{text-align:center} DIV内的行内元素均会水平居中

CSS设置行内元素的垂直居中

div{height:30px; line-height:30px} DIV内的行内元素均会垂直居中

当然,如果既要水平居中又要垂直居中,那么综合一下

div{text-align:center; height:30px; line-height:30px}

CSS设置块级元素的水平居中

div p{margin:0 auto; width:500px} 块级元素p一定要设置宽度,
才能相当于DIV父容器水平居中

CSS设置块级元素的垂直居中

div{width:500px} DIV父容器设置宽度

div p{margin:0 aut0; height:30px; line-height:30px} 块级元素p也可以加个宽度,以达到相对于DIV父容器的水平居中效果 说明:在以后的实际项目中,块级元素的垂直居中布局方式可能会碰到比这个更复杂。

什么叫行内元素?

常见的span、a、lable、strong、b等html标签都是行内元素

默认情况下,行内元素均无法设置宽度、高度、上下方向margin的外边距等

当然,这不是绝对的,通过CSS可以让任何行内元素变成块级元素!比如:

span{display:block} /span这时设置成了块级元素/

什么叫块级元素?

常见的div、p、li、h1、h2、h3、h4等html标签都是块级元素

当然,这也不是绝对的,通过CSS可以让任何块级元素变成行内元素!比如:

h1{display:inline} h1这时设置成了行内元素

  • ##### 用 CSS 实现一个三角形

9159.com 8

三角.jpg

  • ##### 单行文本溢出加 ...

9159.com 9

单行文本溢出.jpg

  • #### px, em, rem 有什么区别?

  垂直居中-父元素高度确定的多行文本
父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种:
    方法一:使用插入 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>

PX特点
  1. IE无法调整那些使用px作为单位的字体大小;
  2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
  3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

  字体缩写
:网页中的字体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;
}
只是有字号、行间距、中文字体、英文字体设置。  

  • #### 块级元素:

      
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代码
      <style>
.container a{
position:absolute;
width:200px;
background:#ccc;
}
</style>


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

五、块级元素可以继承的属性

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


  • ##### 行内元素与块级元素的区别:

 

首先,CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,分别为块级(block)、行内(inline)。

    这种方法相比第一种方法的优势是不用增加无语义标签,简化了标签的嵌套深度,但也存在着一些问题:它将块状元素的 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>


rem特点

rem是[CSS3]新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是

一个例子:
p {font-size:14px; font-size:.875rem;}

注意:
选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。



  1. IE无法调整那些使用px作为单位的字体大小;

  2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位;

  3. Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核)。

px像素(Pixel)是相对长度单位,像素px是相对于显示器屏幕分辨率而言的。

em是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

字体单位使用em能支持IE6下的字体缩放,在页面中按ctrl+滚轮,字体以px为单位的网站没有反应。

px是绝对单位,不支持IE的缩放。

em是相对单位,网页中的文字能放大和缩小。将行距(line-height),和纵向高度的单位都用em。保证缩放时候的整体性。

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明 Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

em有如下特点:

  1. em的值并不是固定的;

  2. em会继续父级元素的字体大小。

所以我们在写CSS的时候,需要注意:

  1. body选择器中声明Font-size=62.5%;(Font-size=63%;用于ie6兼容)

  2. 将你的原来的px数值除以10,然后换上em作为单位;

  3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继续#content的字体高而变为了1em=12px。

但是12px汉字例外,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点。这个问题 Jorux已经解决,只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有限。不知道有没有 其他的解释。

单位pt的说明

在印刷排版中,point是一个绝对值,它等于1/72英寸,可以用尺子丈量的,物理的英寸。但是在css中pt含义却并非如此。因为我们的显示器 被分割为了一个个的像素,单个像素只能有一种颜色 (为了简化,这里暂不讨论次像素反锯齿技术),要在屏幕上显示,必须先把以 pt 为单位的长度转换为以像素为单位的长度,这个转换的媒介,就是 DPI (事实上,这里的所谓的 DPI,是操作系统和浏览器中使用的术语,即为 PPI, pixels per inch,和扫描仪、打印机、数码相机中的 DPI 是不同的概念)。

例如,无论在哪个操作系统中,Firefox 浏览器默认的 DPI 都是 96,那么实际上 9pt = 9 * 1/72 * 96 = 12px。

所以,虽然“DPI”中的“I”和“1pt 等于 1/72 inch”中的“inch”,都不代表物理上的英寸,但这两个单位互相之间是相等的,也就在相乘中约掉了。

那么,真实的物理长度怎么计算呢?请拿出一把尺子,丈量你的显示器的可见宽度 (我这里是 11.2992 英寸),除以横向分辨率 (我这里是 1024 像素),得到的就是每个像素的物理长度。

现在我们可以回答这样一个问题,网页上 9pt 的字体究竟占用了多宽的空间?答案是:  9 * 1/72 * 96 * 11.2992 / 1024 = 0.1324 英寸 = 0.3363 厘米。

虽然pt是绝对单位,但是那只是针对输出设备而言的,在文字排版工具(word,abobe)中是非常有用的字体单位。不管显示器的分辨率是多少,打印在纸面上的结果是一样的。

但是网页主要为了屏幕显示,而不是为了打印等其他需要的。而px能够精确地表示元素在屏幕中的位置和大小。

当然。在dpi是96的情况下,9pt=12px。



9159.com 10

代码的作用.jpg

字体大小12px 行高1.5*12px 字体(tahoma,arial,'Hiragino Sans GB','5b8b4f53',sans-serif;)
引号是为了在有空格的情况下不会被解析成多个元素
5b8b 4f53 黑体

代码
test1
test2 [rgba1](https://link.jianshu.com?t=http://www.cnblogs.com/Chen-XiaoJun/p/6208758.html) [rgba2](https://link.jianshu.com?t=http://www.cnblogs.com/letitgo/p/3904584.html)
test3
test4
test5

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

四、内联元素可以继承的属性

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


1、text-indent、text-align *

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

三、所有元素可以继承的属性

  长度值
长度单位总结一下,目前比较常用到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)。  

1、元素可见性:visibility
2、光标属性:cursor

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

<div>定义文档中的分区或节
< h1>定义最大的标题
< h2>定义副标题
< h3>定义标题
< h4>定义标题
< h5>定义标题
< h6>定义最小的标题
< ul>定义无序列表
< ol>定义有序列表
< li>定义有序列表或无序列表的列表项目
< dl>定义自定义列表
< dd>定义自定义列表中的条目
< dt>定义自定义列表中的项目
< hr>创建一条水平线
< p>定义段落
< table>定义表格
< td>表格中的标准单元格
< th>定义表头单元格
< thead>标签定义表格的表头
< tr>定义表格中的行

    (一)
在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度来限制它的弹性。
      不定宽度的块状元素有三种方法居中(这三种方法目前使用的都比多):
        加入 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>

一、无继承性的属性

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

  • #### CSS中可以和不可以继承的属性

      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>


  • #### 行内元素:

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

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

本文由9159.com发布于前端,转载请注明出处:   译文出处,定义最大的标题

关键词: