常见的CSS技巧(三)

一、辨识px,em,rem

  1. px:1px在浏览器中即为1个像素

  2. em:相对单位长度
    1.相对参照物为父元素的font-size;

    2.具有继承的特点;

    3.当所有的元素都没有设置font-size时,浏览器会有一个默认的em设置:1em = 16px。(这里的16px为chrome浏览器默认的字体大小)

  3. rem:相对单位长度
    1.相对参照物为根元素html

    2.参照物相对固定,如果html没有设置font-size,则浏览器会有一个默认的rem设置:1rem = 16px。

  4. 在chrome浏览器下,一般设置html元素的font-size为62.5%,即10px。在之后的样式代码书写中,如果需要用到em或者rem这样的相对单位长度设置,这样的安排会使后续的代码显得更为简单。

  5. 这里有一个小知识点需要注意一下,中文版的chrome浏览器有一个最小字号限制,即在中文版的chrome浏览器下,默认显示的最小字号为12px;而在英文版的chrome下,这个限制为10px

二、diplay:none与visibility:hidden之间的区别

  通常情况下,我们有两种隐藏元素的方式,一种为display:none,另一种为visibility:hidden。虽然这两种方法的效果相同,但二者本质上还是有一定的区别的。以下面的代码为例(测试环境为chrome浏览器,51版):

html代码:

1
2
3
4
5
<div class="test">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
</div>

css代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.test {
width: 200px;
height: 200px;
margin: 20px auto;
border: 2px solid #ccc;
}
.item1 {
width: 100px;
height: 30px;
margin: 5px auto;
border: 2px solid #ffcc00;
background-color: #ffcc00;
}
.item2 {
width: 100px;
height: 30px;
margin: 5px auto;
border: 2px solid #ffee00;
background-color: #ffee00;
visibility: hidden;
}
.item3 {
width: 100px;
height: 80px;
margin: 5px auto;
border: 2px solid #ff00cc;
background-color: #ff00cc;
display: none;
}

效果如下:

  接下来,我们去掉.item3display:none样式以及.item2visibility: hidden样式之后,各元素在页面中的展示为:

  此时,我们再将.item2visibility: hidden样式添加至元素中,我们惊奇地发现:.item2元素不见了:

  紧接着,我们按下F12查看究竟出了什么问题,将鼠标至于.item2元素上,我们可以看到,本应出现在页面中属于.item2元素的内容没有了,但是.item2元素在页面中所占据的位置还保留着:

CSS3-2visibility-cursor

  我们带着疑问继续下面的实验。为了方便做对比,我们使.item2元素显示,并设置.item3display属性为none,“以防万一”,我们这次直接打开开发者工具并选中.item3,效果如下:

CSS3-3display

  从上图中可以看出,设置了display:none样式的.item3元素已经彻底从页面中消失了!

  通过上面的这个例子,我们可以得出以下结论:

  当我们为一个元素设置 display:none样式时,网页在渲染的过程中,不会将该元素加入到DOM树结构中,该元素在页面中彻底的消失了;而当我们设置display属性不为none时,该元素会重新被渲染到页面中,并且出现在该元素在原本DOM结构中的位置。

  当我们为一个元素设置 visibility: hidden样式时,网页在渲染的过程中会按照正常的DOM节点对该元素进行渲染,而该元素除了应有的位置结构会被保留在文档中外,其他一切样式都会被页面所“隐藏”,看起来就像是真的hidden了一样。