前端入门基础之 HTML 与 CSS 之五

发表于 阅读次数： 评论数： 本文字数： 2.7k 阅读时长 ≈ 2 分钟

大纲

版心

在 PC 端，由于分辨率和屏幕较大，网页版心一般是固定宽度且水平居中的。网页版心的宽度设置示例如下:

屏幕分辨率版心宽度
低分辨率 900 ~ 100
高分辨率 1100 ~ 1300

定位

相对定位

  • 相对定位也叫 占位定位，通过偏移量根据当前在标准流自身的位置为参考点移动，在移动的时候，是在 Z 轴的空间移动，此时不会影响周围的元素，但是标准流占用的位置还是存在的。
  • 偏移量有两种，分别是
    • 水平偏移量
      • left： 正值向右，负值向左，优先级较高
      • right： 正值向左，负值向右，优先级较低
    • 垂直偏移量
      • top：正值向下，负值向上，优先级较高
      • bottom：正直向上，负值向下，优先级较低
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
30
31
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>相对定位</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 200px;
        height: 200px;
        margin-top: 10px;
        background: yellowgreen;
      }
      img {
        /* 相对定位 */
        position: relative;
        /* 偏移量 */
        left: 50px;
        top: 50px;
      }
    </style>
  </head>
  <body>
    <div></div>
    <img src="https://www.techgrow.cn/img/head.jpg" />
    <div></div>
  </body>
</html>

上述代码，在浏览器运行的效果如下：

绝对定位

  • 绝对定位是一个完全脱离标准流的状态，默认起始参考点是浏览器的第一屏或者初始包含块
  • 偏移量有两种，分别是
    • 水平偏移量
      • left： 正值向右，负值向左，优先级较高
      • right： 正值向左，负值向右，优先级较低
    • 垂直偏移量
      • top：正值向下，负值向上，优先级较高
      • bottom：正直向上，负值向下，优先级较低
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
30
31
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>绝对定位</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 200px;
        height: 200px;
        margin-top: 10px;
        background: yellowgreen;
      }
      img {
        /* 绝对定位 */
        position: absolute;
        /* 偏移量 */
        left: 50px;
        top: 50px;
      }
    </style>
  </head>
  <body>
    <div></div>
    <img src="https://www.techgrow.cn/img/head.jpg" />
    <div></div>
  </body>
</html>

上述代码，在浏览器运行的效果如下：

定位的层级

  • 层级的属性是 z-index，取值范围是整数，默认层级是 0；当层级是负数时，是低于标准流的元素。
  • 当层级相同时，后写的标签连同子元素，都会压在先写的标签连同子元素的上面，且父元素的层级将决定子元素的层级的高低。
  • 当层级不同时，较大层级的标签连同子元素，都会压在较低层级的标签连同子元素的上面，且父元素的层级将决定子元素的层级的高低。
  • 当不设置 z-index 属性时，后写的标签连同子元素会压在先写的标签连同子元素的上面，但是此时子元素层级的高低，将决定自身是否能压在后写标签的上面。
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>定位的层级</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        margin: 0 auto;
        position: relative;
      }
      .s1 {
        width: 100px;
        height: 30px;
        background: red;
        position: absolute;
        left: 60px;
        top: 11px;
        z-index: 9999;
      }
      .s2 {
        width: 100px;
        height: 30px;
        background: blue;
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: -1;
      }
      .s3 {
        width: 100px;
        height: 30px;
        background: yellow;
        margin: 16px;
      }
    </style>
  </head>
  <body>
    <div class="box">
        <div class="s3"></div>
        <span class="s1"></span>
        <span class="s2"></span>
    </div>
  </body>
</html>

上述代码，在浏览器运行的效果如下：

定位的水平垂直居中

相对定位与绝对定位的水平垂直居中实现方式：

  • 水平居中：设置 left: 50%，即走父元素宽度的一半，margin-left: 负的自身宽度的一半，即往回走
  • 垂直居中：设置 top:50%，即走父元素高度的一半，margin-top: 负的自身高度的一半，即往回走
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
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>定位的水平垂直居中</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 300px;
        height: 200px;
        border: 1px solid #000;
        margin: 0 auto;
        position: relative;
      }
      .s1 {
        width: 100px;
        height: 30px;
        background: red;
        position: absolute;
        /* 父元素宽度的百分比 */
        left: 50%;
        /* 以当前left值作为起始点 */
        margin-left: -50px;
        /* 父元素高度的百分比 */
        top: 50%;
        /* 以当前top值作为起始点 */
        margin-top: -15px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span class="s1"></span>
    </div>
  </body>
</html>

上述代码，在浏览器运行的效果如下：

相对定位与绝对定位结合使用

  • 相对定位与绝对定位结合使用，可以实现自定义绝对定位的起始参考点
    • 绝对定位的起始参考点：绝对定位的起始参考点是设置了定位属性（相对定位或者绝对定位）的父元素（离自身最近的），如果没有设置了相对定位的父元素，那么默认的起始参考点是 body 初始包含块
    • 子绝父相：父子指的是标签关系，绝指的是子元素是绝对定位，相指的父元素是相对定位
    • 当元素设置绝对定位后，设置宽高会起作用

特别注意

子绝父绝同样可以自定义绝对定位的起始参考点，此时父子指的是标签关系，且父子元素都是绝对定位。

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
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>相对定位与绝对定位结合使用</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      .header {
        width: 200px;
        height: 200px;
        margin-top: 10px;
        background: gray;
      }
      .box {
        width: 200px;
        height: 200px;
        margin-top: 10px;
        position: relative;
        background: greenyellow;
      }
      span {
        width: 100px;
        height: 30px;
        background: red;
        position: absolute;
        right: 0px;
        top: 0px;
      }
    </style>
  </head>
  <body>
    <div class="header"></div>
    <div class="box">
      哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
      <span></span>
    </div>
  </body>
</html>

上述代码，在浏览器运行的效果如下：

常用属性

隐藏属性

  • 占位隐藏：visibility: hidden
  • 不占位隐藏：display: none

透明属性

  • 第一种实现方式
    • opacity: 0.5：透明属性，取值范围是 0 ~ 1 之间的小数，内容也会跟着透明，其中 1 表示不透明
  • 第二种实现方式
    • background: rgba(0, 0, 0, 0.5)：通过 CSS3 的背景属性设置透明，内容不会跟着透明，不兼容低版本的 IE 浏览器

渐进增强和优雅降级

背景介绍

渐进增强和优雅降级是在 CSS3 出现之后才火起来的。由于低级浏览器不支持 CSS3，比如 IE6 等，但是 CSS3 的样式又特别优秀不忍放弃，所以在高级浏览器中应用 CSS3 样式，在低级浏览器只保证基本功能。

什么是渐进增强

在网页开发中，渐进增强认为应该专注于内容本身。一开始针对低版本的浏览器构建页面，满足最基本的功能，再针对高级浏览器对显示效果、交互追加各种功能以达到更好的用户体验。换句话说，就是以最低要求，实现最基础功能为基准，向上兼容。以 CSS 为例，以下这种写法就是渐进增强。

1
2
3
4
5
.transition {
  -webkit-border-radius: 30px 10px;
  -moz-border-radius: 30px 10px;
  border-radius: 30px 10px;
}

什么是优雅降级

在网页开发中，优雅降级指的是一开始针对一个高版本的浏览器构建页面，先完善所有的功能。然后针对各个不同的浏览器进行测试和修复 Bug，保证低级浏览器拥有基本的功能就好，低级浏览器被认为 “简陋却无妨 (poor，but passable)”，可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。也就是以高要求，高版本为基准，向下兼容。同样以 CSS 为例，优雅降级的写法如下。

1
2
3
4
5
.transition {
  border-radius: 30px 10px;
  -moz-border-radius: 30px 10px;
  -webkit-border-radius: 30px 10px;
}

二者的区别

如果采用渐进增强的开发流程，先做一个基本功能版，然后针对各个浏览器渐进增加各种功能。相对于优雅降级来说，开发周期长，初期投入资金大。试想一下，不太可能拿一个基本功能版给客户看，多寒酸，搞不好一气之下就不找你做了。但是它也有好处，就是提供了较好的平台稳定性，后期维护起来资金小，长期来说可以降低开发成本。

如果采用优雅降级的开发流程，这样可以在较短时间内开发出一个只适用于一个浏览器的完整功能版，然后就可以拿给 PM 找客户谈了，也可以拿去测试，或者市场试水等。对于功能尚未确定的产品，优雅降级不失为一种节约成本的方法。

从技术角度出发，前缀 CSS3（-webkit-、-moz-、-o-*）和正常 CSS3 在浏览器中的支持情况是这样的：

  • 很久以前：浏览器前缀 CSS3 和正常 CSS3 都不支持
  • 不久之前：浏览器只支持前缀 CSS3，不支持正常 CSS3
  • 现在：浏览器既支持前缀 CSS3，又支持正常 CSS3
  • 未来：浏览器不支持前缀 CSS3，仅支持正常 CSS3

按理来说，上面两种 CSS 写法实现的效果应该是一样的，但是目前浏览器还停留在的第三阶段，也就是现在，既支持前缀 CSS3 写法，又支持正常 CSS3 写法，这样就要出问题了。当属性超过一个参数值的时候，不同属性产生的作用是不一样的！采用优雅降级的写法，如果一个浏览器同时支持前缀 CSS3 写法和正常 CSS3 写法，后面的旧版浏览器样式就覆盖了新版样式，导致会出现一些奇怪的问题，但是用渐进增强的写法就不存在这个问题。这种属性不止 border-radius 一个，所以为了避免这个不必要的错误，建议都采用渐进增强的写法。

如何选择

如果开发时间充裕，开发资金充足，就不存在抉择这个问题了，肯定是渐进增强比较好。但是现实往往很骨感，这个时候就要看你开发产品的受众，受众使用哪种客户端。如果受众年龄覆盖面广，客户端从移动到平板到电脑，比如淘宝这种页面，那没得选，老老实实选渐进增强。如果受众客户端单一，例如一个移动端页面，再渐进增强 PC 端就没那么重要了。虽然两者各有优势，但现实是绝大多数公司采用的都是渐进增强方式，毕竟业务优先，用户体验不会凌驾在业务之上。