跟随黑马学前端-7，CSS的元素显示模式

第七天：CSS的元素显示模式

I am the best.

学习目标

  • 了解什么是元素的显示模式

  • 元素显示模式的分类

  • 元素显示模式的转换

什么是元素显示模式

作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们呢的特点可以更好的布局我们的网页

元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己独占一行，比如<span>一行可以多个

HTML一般分为块元素和行内元素两种类型

块元素

常见的块元素有:

<h1>-<h6>、<p>、<div>、<ul>、<li>等，其中<div>是最经典的块元素

块元素的特点：

  1. 独占一行

  2. 高度、宽度、外边框以及行内距都可以控制

  3. 宽度默认是容器（父级宽度）的100%

  4. 是一个容器及盒子，里面可以放行内或者块级元素

注意：

  • 文字类的元素不能使用块级元素

  • <p>标签主要用于存放文字，因此<p>中不能放块级元素，特别是不能放<div>

  • 同理，<h1>-<h6>等是文字类块级标签，里面也不能放其他块级元素

行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>是最经典的行内元素，有的地方也将行内元素称为内嵌元素

行内元素的特点：

  1. 相邻行内元素再一行上，一行可以显示多个

  2. 高、宽直接设置是无效的

  3. 默认宽度就是它本身内容的宽度

  4. 行内元素只能容纳文本或其他行内元素

注意：

  • 链接里面不能再放链接了

  • 特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式更加安全

行内块元素

在行内元素中有几个特殊的标签，<img/>、<input/>、<td>，他们同时具有块级元素和行内元素的特点

行内块元素的特点：

  1. 和相邻汉元素（行内块）在一行上，但是他们呢之间会有空白缝隙，一行可以显示多个（行内元素特点）

  2. 默认宽度就是它本身内容的宽度（行内元素特点）

  3. 高度，行高，外边距以及内边距都可以控制（块级元素特点）

元素显示模式的总结
元素模式 元素排列 设置样式 默认宽度 包含
块级元素 一次只能放一个块级元素 可以设置宽度高度 容器的100% 容器可以包含任意标签
行内元素 遗憾可以放多个行内元素 不可以直接设置宽度高度 它本身内容的宽度 容纳文本或其他行内元素
行内块元素 一行放多个块级元素 可以设置宽度和高度 它本身内容的宽度
元素显示模式的转换

特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另一种模式的特性，比如想要增加链接<a>的触发范围

  • 转换为块元素：display:block;

  • 转换为行内元素：display:inline;

  • 转换为行内块：display:inline-block;

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
<!DOCTYPE html>
<html lang="en">
<head>
    <title>元素显示模式转换</title>
    <style>
        a{
            width: 150px;
            height: 50px;
            background-color: pink;
            /* 把行内元素 a 转换为 块级元素 */
            display: block;
        }
        div{
            width: 300px;
            height: 100px;
            background-color: peru;
            /* 将块状元素 div 转换为 行内元素 */
            display: inline;
        }
        span{
            width: 300px;
            height: 30px;
            background-color: skyblue;
            display: inline-block;
        }
    </style>
</head>
<body>
    <a href="#">不知道写点啥</a>
    <a href="#">不知道写点啥</a>
    <div>我是块级元素</div>
    <div>我是块级元素</div>
    <span>行内元素转换为行内块元素</span>
    <span>行内元素转换为行内块元素</span>
</body>
</html>
案例：简洁版小米侧边栏
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米侧边栏案例</title>

    <style>
        a{
            display: block;
            width: 230px;
            height: 40px;
            background-color: #55585a;
            font-size: 14px;
            color: #FFF;
            text-decoration: none;
            text-indent: 2em;
        }
        a:hover{
            background-color: #ff6700;
        }
    </style>
</head>
<body>
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 电脑</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
</body>
</html>
单行文字垂直居中

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
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米侧边栏案例</title>

    <style>
        a{
            display: block;
            width: 230px;
            height: 40px;
            background-color: #55585a;
            font-size: 14px;
            color: #FFF;
            text-decoration: none;
            text-indent: 2em;
            line-height: 40px;                  /*【看我看我】*/
        }
        a:hover{
            background-color: #ff6700;
        }
    </style>
</head>
<body>
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 电脑</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
</body>
</html>

简单理解：行高的上空隙和下空隙把文字挤到中间，是如果行高小于高度，文字会偏上，如果行高大于盒子，文字偏下

CSS的背景

通过CSS背景属性，可以给页面元素添加背景样式

背景样式可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等

背景颜色

background-color属性定义了元素的背景颜色

1
background-color: 颜色值;

一般情况下，颜色默认值是transparent（透明）

背景图片

background-image属性控制了元素的背景图片，实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置（精灵图也是一种运用场景）

1
background-image:none|url(url)
参数值 作用
none 无背景图（默认）
url 使用绝对或相对位置指定背景图片

如：

1
background-image: url(images/logo.png);
背景平铺（设置了背景图片的情况下，背景图片都是平铺铺满的）

如果需要在HTML页面上对背景图片进行平铺，可以使用background-repeat属性

1
background-repeat: repeat | no-repeat | repeat-x | repeat-y
参数 说明
repeat 背景图片在纵向和横向上平铺
no-repeat 背景图片不平铺
repeat-x 背景图片在横向上平铺
repeat-y 背景图片在横向上平铺

页面元素既可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色

背景图片的位置

利用background-position属性可以改变图片在背景中的位置

1
background-position: x y;

参数代表的意义：x坐标和y坐标，可以使用方位名词或者精确单位

参数值 说明
length 百分数|由浮点数字和单位标识符组成的长度值
position top|center|bottom|left|center|right 方位名词

  1. 参数是方位名词

    • 如果指定的两个值都是方位名词，则两个值的顺序不重要，比如left top和top left效果是一样的

    • 如果只指定了一个方位名词，另一个省略，那么第二个就是默认居中对齐的

      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
      <!DOCTYPE html>
      <html lang="en">

      <head>
          <title>背景颜色</title>
          <style>
              h3{
                  width: 118px;
                  height: 40px;
                  background-color: pink;
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 40px;
                  background-image: url(images/icon.png);
                  background-repeat: no-repeat;
                  background-position: left center;
                  text-indent: 1.5em;
              }
          </style>
      </head>

      <body>
          <h3>成长守护平台</h3>
      </body>

      </html>

  2. 参数是精确单位

    • 如果参数值是精确坐标，那么第一个肯定是x，第二个肯定是y
    • 如果只指定一个数值，那么该数值一定是x的，另一个默认垂直居中

  3. 参数是混合单位

    • 如果指定的两个值是精确单位和方位名词混合使用，那么第一个是x坐标，第二个是y坐标
背景图像固定（背景附着）

background-attachment后期可以制作视差滚动的效果

1
background-attachment：scroll | fixed
参数 作用
scroll（默认） 背景图片是随对象内容滚动的
fixed 背景图像固定

fixed样式参照请见QQ官网

背景复合写法

为了简化背景属性的代码，我们可以将这些属性写在一个属性background中，从而节约代码量

当使用简写属性时，没有特定的书写顺序，一般习惯约定的顺序为：

1
background：背景颜色 背景图片地址 背景平铺 背景图片滚动 背景图片位置;

比如：

1
background: black url(images/bg.jpg") no-repeat fixed ;
背景色半透明

CSS3为我们提供了背景颜色半透明的效果

1
background: rgba(0,0,0,0.3);

  • 最后一个参数是alpha透明度的缩写，取值范围从0-1

  • 最后一个参数，比如0.3，我们可以简写成.3

  • 注意：背景半透明指的是盒子背景半透明，盒子内的内容不受影响