CSS基础

本文最后更新于：1 年前

CSS基础

CSS 全称 cascading style sheets: 层叠样式表，是一种用来表现HTML的文件样式的计算机语言。
作用：静态地修饰网页，并且可以配合各种脚本语言动态地对网页各元素进行格式化。

前端三层技术

HTML CSS Javascript
结构层 样式层 行为层
从语义的角度搭建网页结构 从美观的角度描述页面样式 从交互的角度描述页面行为

不同位置分类

CSS的代码更具书写位置分为四种书写方式，内联式、内嵌式、外联式、导入式
实际应用时，小型案例对接使用内嵌式，减少文件数。大型项目推荐使用外联式

内联式样式表

内联式，也被习惯叫做行内式。
书写位置：在 HTML 标签之上的 style 属性中书写 css 样式。

1
2
<div style="width: 100px; height: 100px; background-color: gold">123</div>
<div style="width: 100px; height: 100px; background-color: gold">3</div>

内联式缺点

  • 内联式必须写在标签上，没有完全脱离 HTML 标签。
  • css样式代码让标签结构繁重，不利于HTML结构的解读。
  • 一个内联式的 css 代码，只能给一个标签使用，如果多个标签有相同的样式，同样的 css 代码需要书写多次，增加代码量。

因此，实际工作中不会使用内联式（行内式）编写 css 代码。

内嵌式样式表

内嵌式书写位置：在 HTML文件中，<head>标签内部有一个<style>标签。 <style> 标签书写在<title> 标签后面，所有 css 代码书写在 <style> 标签内部
<style> 标签有一个标签属性叫做 type 属性值是”text/css”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>Document</title>
  <style>
    /*书写CSS*/
    div {
      width: 100px;
      height: 100px;
      background-color: gold;
    }
  </style>
</head>

内嵌式优点

  • 实现了结构和样式的初步分离，css 只负责样式，HTML负责结构。

  • 多个标签可以利用同一段代码设置相同的样式，节省代码量。

    内嵌式缺点

  • 结构和样式并没有完全分离，代码依旧书写在 HTML 文件的<style>标签内部。

  • CSS样式只能给一个HTML文件使用，不能够被多个 HTML 文件同时利用。

  • 在HTML中如果css代码太多，会造成文件头重脚轻

    外联式样式表

    外联式 CSS，也可以叫做外链式 CSS、外部 CSS。
    书写位置：在一个单独的扩展名为 .css 的文件中。
    书写语法：内部代码与内嵌式样式表中<style>标签内部的代码一样。需要通过选择器去选中标签，添加对应的样式。
    注意：在 .css 文件中书写时，不需要再加 <style> 标签

    外联式引用

    外联式样式表必须引入到HTML文件中，才能正常进行加载。
    引入方式：在HTML中的标签内部使用标签进行引入。

    1
    2
    <link rel="stylesheet" href="01.css" type="text/css" />
    <link rel="stylesheet" href="02.css" type="text/css" />

    外联式优点

  • 实现了 HTML 和 css 完全分离。

  • 多个HTML文件可以共用一个css文件，便于提取公共css，减少代码量。

  • 可以实现一个 css 变化，多个 HTML 页面同时变化，减少工作量。

  • 一个 HTML 文件可以引入多个 css 文件，可以实现同一个页面

    导入式外联表

    书写位置：在内嵌式样式表<style>或者在外联式样式表内部，导入其他的外部的 .css 文件。
    导入方式：利用一条@import url(路径) 语句进行引入。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <style>
      /*书写CSS*/
      div {
        @import url(01.css0);
        width: 100px;
        height: 100px;
        background-color: gold;
      }
    </style>

    导入式缺点

    导入式样式表的作用与外联式样式表基本相同。
    但是由于导入式在浏览器中加载时，会在HTML结构加载完毕后再进行编译，如果网速比较慢时，会导致网页出现没有 css 样式的效果，给用户的体验不好。

    CSS规则

    CSS规则主要由两部分构成：选择器，以及一条或者多条声明(属性名：属性值)
    以内嵌式样式表为例

  1. 所有的 css 代码都必须书写在<head>标签内部的一对<style>标签内。
  2. css 在给某个标签设置样式前，必须使用选择器先选中标签。
  3. css 样式的属性，属性名和属性值的键值对写法为 k : v ;
  4. 给每个选择器添加的样式属性都必须写在一对大括号{}之内。
  5. 给一个标签添加所有需要的样式，都要在{}内部一一罗列出来

    注意事项

    分号必要性：每条属性后面的分号必须写，如果不写，会导致后边所有代码加载错误
    CSS中所有属性与属性之间对空格、换行、缩进不敏感。

    注释语法

    1
    /* 注释内容 */

    CSS选择器

    CSS2.1版本的七种选择器
    基础选择器：id选择器、标签选择器、类选择器、通配符选择器(通用选择器)
    高级选择器：后代选择器、交集选择器、并集选择器

    id选择器

    通过标签上的 id 属性去选择标签。
    书写方式：#id 属性值
    选择范围：只能选中一个标签。
    id 命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。每个 id 属性值必须是唯一的，不能与其他的 id 同名。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <style>
      p {
        color: red;
      }
      #para1 {
        color: blue;
      }
      #para2 {
        color: gray;
      }
    </style>
    <body>
      <h2>标题</h2>
      <p>段落</p>
      <p id="para1">段落</p>
      <h2 id="para2">标题</h2>
      <p>段落</p>
      <p>段落</p>
    </body>

    id选择器特点

    缺点：id选择器只能实现单选，因为id是唯一的。（基本不使用id选择器写样式）

    标签选择器

    通过标签名去选择标签元素，选中的是HTML文件中所有同名标签

    标签选择器可以选择所有同名标签，忽视HTML元素的嵌套，都能被选中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
  p {
    color: red;
  }
  h2 {
    color: green;
  }
</style>
<body>
  <h2>标题</h2>
  <p>段落</p>
  <p>段落</p>
  <h2>标题</h2>
  <p>段落</p>
  <p>段落</p>
  <div>
    <div>
      <div><p>嵌套段落</p></div>
    </div>
  </div>
</body>

标签选择器特点

优点：可以选中所有同名标签，设置所有同名标签的公共样式
缺点：只能实现全选，不能对局部的标签添加特殊样式
​

类选择器

通过标签的class属性去选择标签。
书写方式：.class属性值
选择范围：是页面中所有 class 属性值相同的标签。
class 命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。class 属性值可以与其他的class相同。

类选择器特点

特点1：多个不同的标签，不性值相同，都可以被同一个类选择器选中。
特点2：一个标签的class 属性可以有多个属性值，值之间用空格分隔，每个属性值组成的选择器，都可以选中这一个标签，每个选择器后面的样式都会添加给同一个标签。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
  .demo1 {
    color: red;
  }
  .ps {
    font-size: 30px;
  }
</style>
<body>
  <h2>标题</h2>
  <p class="demo1 ps">段落</p>
  <p class="demo1">段落</p>
  <h2 class="demo1">标题</h2>
  <p>段落</p>
  <p>段落</p>
</body>

类选择器特殊应用

原子类(公共样式/通用样式)：在css中提前设置一些类名，每个类选择器后面只添加一条css样式属性，这开些属性会在页面中常被使用，后期可以不需要多次书写属性，只要将对应的类名添加给需要的标签即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
  .fs12 {
    font-size: 12px;
  }
  .fs30 {
    font-size: 30px;
  }
  .hong {
    color: red;
  }
  .lv {
    color: green;
  }
</style>
<body>
  <h2 class="fs30 lv">标题</h2>
  <p class="fs12 hong">段落</p>
  <p class="fs12 lv">段落</p>
  <p>段落</p>
</body>

类选择器优点

  1. 通过一个类选择器进行多选，选中多个标签，添加公共样式。
  2. 一个标签可以被多个类选择器选中，可以将所有样式进行分离，分别提取公共样式和单独样式，节省代码量。

​

实际工作中，通常我们有一个使用规律：类上样式(CSS)，id 上行为(JavaScript)。

通配符选择器

通过一个特殊符号选择页面内所有的标签。
书写方式：*
选择范围：包含<html>标签在内的所有标签。

1
2
3
4
* {
  padding: 0;
  margin: 0;
}

通配符选择器的特点和应用

优点：可以实现全选，简化书写。
缺点：通配符选择效率低，设置的部分公共样式不是所有标签都需要添加，如果使用通配符选择，会让不需要的标签也加载一次样式，导致浏览器多做无用的工作。
注意：实际上线的网站不允许使用 * 去清除默认内外边距。
不过普通的案例，代码量较少时，为了节省书写，可以使用通配符。
​

后代选择器

通过标签之间存在的嵌套关系(族谱关系)去选择元素，基本组成部分就是基础选择器。
后代选择器也叫包含选择器。
书写方式：空格表示后代，基础选择器中间使用空格分隔，空格前面的选择器选中的标签必须是后面选择器选中标签的祖先级。
选择范围：通过后代选择器中前面的一系列基础选择器缩小选择范围，最终由一个选择器确定选中的标签。后代选择器不一定只能是父子关系，满足是后代关系即可

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
<style>
  .box1 ul li p {
    color: red;
  }
  .box1 p {
    font-size: 20px;
  }
</style>
<body>
  <div class="box1">
    <ul>
      <li><p>这是box1中li的p</p></li>
      <li><p>这是box1中li的p</p></li>
      <li><p>这是box1中li的p</p></li>
    </ul>
    <p>这是box1中的p</p>
  </div>
  <div class="box2">
    <ul>
      <li><p>这是box2中li的p</p></li>
      <li><p>这是box2中li的p</p></li>
      <li><p>这是box2中li的p</p></li>
    </ul>
    <p>这是box2中的p</p>
  </div>
</body>

后代选择器特点

优点：减少class属性的定义使用，选择效率更高

交集选择器

通过一个标签之上满足所有的基础选择器的需求去选择标签。
书写方式：基础选择器进行连续书写，如果有标签选择器参与交集，必须书写在开头。
选择范围：选择的是满足所有基础选择器需求的标签，如果一个条件不满足都不能被选中。
比较常见的是标签与类的交集
交集选择器可以进行类名的连续交集，需要满足更多的条件才能选中标签，
ie6不支持类名连续交集写法，
交集选择器可以作为嵌套高级选择器的组成部分

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
<style>
  p.demo {
    color: red;
  }
  p.demo.ps {
    color: gold;
  }
  .box2 p.demo {
    font-size: 20px;
  }
</style>
<body>
  <div class="box1">
    <ul>
      <li><p class="demo ps">这是box1中li的p</p></li>
      <li><p>这是box1中li的p</p></li>
      <li><p>这是box1中li的p</p></li>
    </ul>
    <p>这是box1中的p</p>
  </div>
  <div class="box2">
    <ul>
      <li><p class="demo">这是box2中li的p</p></li>
      <li><p>这是box2中li的p</p></li>
      <li><p>这是box2中li的p</p></li>
    </ul>
    <p>这是box2中的p</p>
  </div>
</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
  <style>
    body,
    h2,
    div,
    ul,
    li,
    p {
      margin: 0;
      padding: 0;
    }
    h2,
    .demo {
      color: red;
    }
  </style>
</head>
<body>
  <h2>标题</h2>
  <div class="box1">
    <ul>
      <li><p class="demo ps">这是box1中li的p</p></li>
      <li><p>这是box1中li的p</p></li>
      <li><p>这是box1中li的p</p></li>
    </ul>
    <p>这是box1中的p</p>
  </div>
</body>

并集选择器用途

如果多个标签具有公共样式，但是不能用一个选择器选中，可以使用并集写法
可以使用标签选择器的并集写法，进行默认样式的清除，交换通配符的功能

伪类选择器

普通类选择器和伪类选择器区别

普通的类：

必须给标签设置对应的class属性值，才能选中标签，而且类选择器后面添加的属性，会立即加载到浏览器之上。

伪类：

不需要给标签添加任何属性，伪类名都是语法提前规定好的，书写时伪类必须搭配其他选择器使用，伪类选择器后面添加的样式不一定立即加载到浏览器之上，只有用户触发了对应的行为，伪类的样式才会立即加载。
​

伪类选择器的权重和普通类选择器相同
伪类选择器写法：前面是普通的选择器，后面紧跟：伪类名
​

<a>标签的伪类

<a>标签可以根据用户行为不同，划分为四种状态，访问前、访问后、鼠标悬浮、点击状态。设置这四种状态时顺序不可乱
通过<a>标签的伪类可以将四种状态选中设置为不同的样式效果，用户触发对应行为，就可以加载对应的样式。

1
2
3
4
5
6
7
8
9
10
11
12
a:link {				/*访问前状态 */
  color: gray;
}
a:visited {			/*访问后状态 */
  color: cyan;
}
a:hover {				/*鼠标悬浮状态 */
  color: red;
}
a:active {			/* 鼠标点击状态 */
  color: yellow;
}

<a>标签的伪类书写顺序

<a>标签上可能会同时触发2到3个状态，每个状态的属性都会进行加载，相同的属性之间会发生层叠。
伪类的权重是相同的，只能根据书写顺序，后写的层叠先写的，所以伪类书写顺序非常重要。
要想让每个伪类的状态正常加载，书写顺序必须是：访问前link、访问后visited、鼠标移上hover、鼠标点击active。

<a>标签的伪类实际应用

一般会将访问前和访问后状态设置为一样的效果，保证了页面的统一性，可以选中性的设置鼠标移上和鼠标点击状态

1
2
3
4
5
6
a:link,a:visited {				
  color: gray;
}
a:hover {			
  color: red;
}

CSS层叠式

理解层叠式和基础性

继承性

如果一个标签没有设置过一些样式，它的某个祖先级曾经设置过，在浏览器中该标签也加载了这些样式，这些样式都是从祖先级继承而来，这种现象就是继承性。
能够被继承的样式是所有的文字相关样式属性，其他的属性都不能被继承。
样式继承.png

继承性的应用

继承性是一个很好的性质，可以将页面中出现最多的文字样式设置给一个较大的祖先级标签比如<body>,后期所有的后代标签都可以从人<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
<style>
  body {
    font-size: 20px;
    color: red;
    font-family: '微软雅黑';
  }
  .box1 {
    width: 200px;
    height: 200px;
    border: 1px solid red;
  }
</style>
<body>
  <h2>标题</h2>
  <div class="box1">
    <ul>
      <li><p>这是box1中li的p</p></li>
      <li><p>这是box1中li的p</p></li>
    </ul>
    <p>这是box1中的p</p>
  </div>
  <div class="box2">
    <ul>
      <li><p>这是box2中li的p</p></li>
      <li><p>这是box2中li的p</p></li>
    </ul>
    <p>这是box2中的p</p>
  </div>
</body>

层叠性

判断选择器是否选中目标标签

  1. 直接选中目标标签
  2. 选中目标标签的祖先级
  3. import
  4. 行内样式

    直接选中目标标签

    第一步：比较两个选择器的权重，权重高的层叠权重低
    第二步: 如果选择器权重都相同,需要比较CSS代码中的书写顺序,后写的层叠先写的(覆盖同名属性,没有被覆盖的属性继续有效)
    基础选择器的权重
    根据选择范围，范围越大权重越小

ID选择器 > 类选择器 > 标签选择器 >*

高级选择器权重比较方法

依次比较组成高级选择器的 id 的个数，类的个数，标签的个数，如果前面能够比较出大小就不再比较后面，如果前面相等就往后比较。直到比较出大小。
比较顺序：( id 个数,类的个数,标签的个数）
​

比较复杂的情况

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
  #box1 .box2 .demo,
  .box1 #box2 #ps {
    color: red;
  }
  .box1 .box2 #box3 .demo {
    color: yellow;
  }
</style>
<body>
  <div class="box1" id="box1">
    <div class="box2" id="box2">
      <div class="box3" id="box3">
        <div class="demo" id="ps">颜色</div>
      </div>
    </div>
  </div>
</body>

以上选择器是将选择器才开判断,依次是 一个id和两个类,两个id和一个类,一个id和两个类
很明显两个id选择器的权重大,所以是红色

权重相同

权重相同,后写的样式属性覆盖先写的,没有被覆盖的属性继续有效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
  .box1 .box2 #box3 .demo {
    font-size: 20px;
    background-color: blue;
    color: red;
  }
  .box1 .box2 #box3 .demo {
    color: yellow;
    border: 5px solid black;
  }
</style>
<body>
  <div class="box1" id="box1">
    <div class="box2" id="box2">
      <div class="box3" id="box3">
        <div class="demo" id="ps">颜色</div>
      </div>
    </div>
  </div>
</body>

样式层叠.png

选中目标标签的祖先级

如果选择器选中的是祖先元素,文字的样式可以被继承
第一步：比较就近原则，比较HTML结构中距离, 目标标签近的层叠远的
第二步：如果距离相同，比较选择器权重，权重大的层叠权重小的
第三步：如果权重相同，比较css书写顺序，后面的层叠前面的

就近原则

比较HTML结构中距离, 目标标签近的层叠远的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  <style>
    #box1 {
      color: red;
    }
    .box2 {
      color: green;
    }
    .box3 {
      color: blue;
    }
  </style>
<body>
  <div class="box1" id="box1">
    <div class="box2" id="box2">
      <div class="box3" id="box3">
        <div class="demo" id="ps">蓝色</div>
      </div>
    </div>
  </div>
</body>

image.png

import

如果在比较选择器权重的过程，遇见一个 !important关键字，可以将某条CSS样式属性的权重提升到最大。
书写位置：在某个css属性的属性值后面空格加 !important 。

在比较权重过程中

在比较权重过程中，添加important，选择器权重没有改变，只是某条属性权重提升到最大

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
  #box3 {
    color: yellow !important;
  }
  #box2 .box3 {
    font-size: 12px;
    color: blue;
  }
</style>
<body>
  <div class="box1" id="box1">
    <div class="box2" id="box2">
      <div class="box3" id="box3">
        <div class="demo" id="ps">蓝色</div>
      </div>
    </div>
  </div>
</body>

image.png
注意：

  1. 就近原则中，不需要比较选择器权重，所有 important 会失效。
  2. important 不能提升选择器的权重，只能提升某条属性的权重到最大。
    在就近原则中 !important失效
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
      <style>
        #box2 {
          font-size: 12px;
          color: yellow !important;
        }
        #box2 .box3 {
          color: blue;
        }
      </style>
    </head>
    <body>
      <div class="box1" id="box1">
        <div class="box2" id="box2">
          <div class="box3" id="box3">
            <div class="demo" id="ps">蓝色</div>
          </div>
        </div>
      </div>
    </body>
    image.png

    行内式

    行内式与内嵌式或者外链式比较权重时，行内式的权重最高
    但是与!important关键字相比权重要低
    ​

常用字体样式

颜色 color、字体 font-family、字号 font-size

color

颜色，给文字设置颜色。
属性名：color
属性值：颜色名、颜色值

RGB模式

1
2
3
p {
  color: rgb(0, 0, 0);
}

常用RGB色值

红色 绿色 蓝色 黑色 白色
rgb(255,0,0) rgb(0,255,0) rgb(0,0255) rgb(0,0,0) rgb(255,255,255)

十六进制模式

使用#开头，后面连续书写红、绿蓝三个颜色的十六进制的两位数值

1
2
3
p {
  color: #000000;
}

常用颜色的十六进制色值

红色 绿色 蓝色 黑色 白色
#ff0000 #00ff00 #0000ff 000000 #ffffff

font-family

定义元素文字的字体

1
2
3
4
p {
  color: #000000;
  font-family: 'Arial', '微软雅黑', '宋体';
}

计算机字体位置 C:\Windows\Fonts

注意事项

  1. font-family 可以设置多个字体名称，在实际加载时只会选择一种加载，选择的依据是按书写顺序进行，如果浏览器不支持第一个字体，则会尝试下一个，直到找到第一个支持的字体。

  2. 浏览器中加载的字体是用户机器中自带的，如果用户的电脑中没有设置的字体则加载败，需要查找下一个，因此，必须在最后设置一个所有机器都具备的通用字体作为后路。

  3. 中文字体中一般带有英文可以加载的的字体效果，为了避免对英文文字的字体影响，建议将英文字体写在属性值最前面。

    font-size

    设置文字的大小
    可以使用相对长度单位(推荐)，也可以使用绝对长度单位

    相对长度单位

    px：像素值，最常用的单位
    em：倍数，继承自祖先元素设置的字号的倍数
    %：百分比，继承自祖先元素设置的字号的百分比

    绝对长度单位

    in：英寸
    cm：厘米
    mm：毫米
    pt：点

    注意事项

  4. 如果 HTML 中不设置字号，不同的浏览器有自己默认的加载字号。chrome、IE，默认显示字号为16px。

  5. 不同的浏览器也有自己最小加载显示字号，如果设置的字号低于最小字号，都以最小字号加载，0除外。chrome 浏览器最小加载显示字号为8px，IE浏览器最小可以支持1px的号。

  6. 网页中最小设置字号必须是12px，如果低于12px会出现兼容问题。现在网页中普遍使用14px+。尽量使用12px、14px、16px等偶数的数字字号，ie6等老式浏览器支持奇数会有bug

    font-weight

    字体粗细
    作用：设置文字是否加粗显示。
    属性名：font-weight，属于 font 属性的一个单一属性。
    属性值有两种方式：单词类型、数字类型。

    单词类型

    属性值 说明
    normal 默认值，定义标准的字体
    bold 定义粗体字符，b、strong标签的默认值
    bolder 定义更粗的字体
    lighter 定义更细的字体

数字类型

100-900之间的整百数字。数字越大，文字显示越粗
其中 400 等价于normal，700等价于bold。

font-style

字体风格
作用：设置文字是否斜体显示。
属性名：font-style，属于 font 属性的一个单一属性。
属性值：单词。

属性值

属性值 说明
normal 设置正规的字体，大多数标签的默认值
italic 设置斜体的文字,主要针对英文，要求英文以字体中的斜体样式显示
oblique 设置倾斜的文字，只是将文字倾斜显示，与字体无关

line-heigth

行高
作用：设置的是一行文字实际占有的高度，文字字号在行高中是垂直居中的
属性名：line-height，属于 font 属性的一个单一属性。
行高是指文本行基线间的垂直距离。 基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿。下图中两条红线之间的距离就是行高，上行的底线和下一行顶线之间的距离就是行距，而同一行顶线和底线之间的距离是font-size的大小，行距的一半是半行距
image.png

font

字体综合
字体、字号、行高、加粗、斜体都是font综合属性的单一属性。
font属性五个单一属性的值可以进行合写，属性值可以有2到多个，值之间用空格进行分隔。

写法1 两个属性

font进行综合写书时，必须有字号和字体，而且必须字号在前，字体在后，顺序不能颠倒

1
2
3
p {
  font: 14px '宋体';
}

写法2 三个属性

font属性经常对字体、字号、行高进行合写，书写顺序必须是字号、行高、字体，字体和行高之间必须用/进行分割

1
2
3
p {
  font: 14px/28px '宋体';
}

写法3 四五个属性时

如果font属性需要设置加粗和斜体，两个属性值只能写在最前面，两个值之间可以互相换位置。后面的字号、行高、字体不能更改位置

1
2
3
p {
  font: bold italic 14px/28px '宋体';
}

常用文本样式

text-align 水平对齐

作用：设置文本水平方向的对齐。
在盒子中，不论文本是单行还是多行，都会对应方向对齐。
属性值：三个方向的单词

属性值

属性值 作用
left 居左对齐，大部分标签默认
center 居中对齐
right 居右对齐

text-decoration 文本修饰

文本修饰，设置文本整体是否有线条的修饰效果

属性值

属性值 作用
none 没有修饰，大部分标签默认
overline 上划线
line-through 中划线，删除线，<del>标签的默认值
underline 下划线，<a>标签的默认值

text-indent 缩进

设置段落首行是否进行缩进

属性值

属性值 作用
px单位 表示首行缩进多少像素
em单位 首行缩进几个中文字符的位置
百分比 表示缩进文字所在标签的父级标签的width属性值的百分比

实际工作中em最常用
属性值区分正负，正数表示向右缩进，负数表示向左缩进

常用背景属性

CSS中除了布局类属性，还需要添加一些背景类的内容进行页面的修饰，从而让网页变得更加的美观
CSS中通过background属性来设置背景，它是一个综合属性，可以拆分成多个单一属性。

background-color 背景颜色

属性名：background-color
作用：在盒子区域添加背景颜色的修饰。
加载区域：在border及以内加载背景颜色。
属性值：颜色名、颜色值。

background-image 背景图片

属性名：background-image
作用：给盒子添加图片的背景修饰。
加载范围：默认的加载到边框及以内部分。后期如果图片不重复加载，加载从border 以内开始。
属性值：url(图片路径)
url：uniform resource locator，统一资源定位符，小括号内部书写查找图片的路径。

background-repeat 背景重复

属性名：background-repeat
作用：设置添加的背景图是否要在盒子中重复进行加载。
根据属性值不同，有四种重复加载方式。

属性值

属性值 作用
repeat 重复，默认属性值，表示会使用背景图片重复加载填满整个盒子背景区域
no-repeat 不重复，不论背景图是否大于盒子范围，都只加载一次图片
repeat-x 水平重复，使用背景图片水平重复加载铺满第一行，垂直方向不重复
repeat-y 垂直重复，使用背景图片垂直重复加载铺满第一列，水平方向不重复

background-position 背景定位

属性名：background-position
作用：主要用于设置不重复的图片在背景区域的加载开始位置。
属性值：分为三种写法，单词表示法、像素表示法、百分比表示法。不论哪种写法,属性值都有两个，值之间用空格分隔。
第一个属性值：表示背景图片在水平方向的位置。
第二个属性值：表示背景图片在垂直方向的位置。

单词表示法

属性值都是使用代表方向的单词进行书写。
水平方向可选单词：left、center、right
垂直方向可选单词：top、center、bottom

像素表示法

使用像素值作为背景定位的属性值。
第一个属性值：像素是几，表示背景图片左上角针对border 以内的左上顶点水平方向位移的距离。
第二个属性值：像素是几，表示背景图片左上角针对 border 以内的左上顶点垂直方向位移的距离。
像素值区分正负，正负代表位移方向不同：
正数：表示图片针对盒子的原点向右、向下移动。
负数：表示图片针对盒子的原点向左、向上移动。

百分比表示法

使用百分比数字作为属性值。
100%代表的数值：
水平方向，等价于盒子的border以内的背景区域宽度减去图片的宽度。
垂直方向，等价于盒子的border以内的背景区域高度减去图片的高度。

background-attachment 背景附着

属性名：background-attachment
作用：设置的是背景图片是否要随着页面或者盒子的滚动而滚动。
属性值

属性值 说明
scroll 滚动的，表示背景图片与盒子保持相对位置不变，随着页面的滚动而滚走
fixed 固定的，背景图的定位的参考点从盒子border以内的左上顶点变为了浏览器窗口上顶点，页面滚动时，浏览器窗口的左上顶点是不变的，导致背景图固定在浏览器窗口的某个位置,不会随着页面滚动而滚走。 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      background-image: url(2512a3d58033abb28da342e076335589b862fc48.png);
      background-repeat: no-repeat;
      background-position: center top;
      background-attachment: fixed;
    }
    div {
      width: 970px;
      height: 540px;
      border: 10px solid #f00;
      margin: 0 auto;
      margin-bottom: 10px;
    }
  </style>
<body>
  <div></div>
  <div></div>
  <div></div>
</body>

background综合写法

background属性可以将五个单一属性的值进行合写。
属性值：可以有1-5个属性值，值之间用空格进行分隔，背景定位的两个属性值算作一个属性值，不能被分开也不能颠倒顺序。五个属性值之间可以互换位置。

1
background: url(1.jpg) no-repeat center top scroll skyblue;

注意1：如果属性值没有设置完全，其他没有设置的单一属性会按照默认值加载。
注意2：如果想去层叠综合属性中的一部分，其他的属性保持不变，最好使用单一属性写法进行层叠。

背景应用

交替插入图

<h1>标签是权重最高的标签，一般会在内部书写最重要的内容，比如logo图片、最大的标题等。
另外<h1>内部的文字，可以帮助提高SEO搜索排名。
在设置的是logo图片时，如果使用插入图，就不能书写搜索关键字。
如果想解决SEO问题，可以将HTML结构中，插入图换成搜索关键字，然后使用css添加背景图给<a>标签或<h1>标签。

文字隐藏方法

  1. 将字号设置为0。IE8及以上或高版本浏览器可以隐藏文字，但是IE7及以下有兼容问题。

  2. 可以设置给<a>标签一个text-indent属性，属性值为负的很大的值，文字会走到盒子外部，直接再设置溢出隐藏属性，将溢出文字隐藏。(推荐)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
      <style>
        * {
          margin: 0;
          padding: 0;
        }
        h1 {
          width: 280px;
          height: 80px;
          margin: 0 auto;
        }
        h1 a {
          display: block;
          width: 280px;
          height: 80px;
          background: url(/taobao.jpg) no-repeat;
          text-indent: -999px;
          overflow: hidden;
        }
      </style>
    <body>
      <h1><a href="">首页</a></h1>
    </body>

    padding区域背景图

    在一个盒子中有背景图部分，而且有文字内容，文字会让开背景图区域进行加载，背景区域应该使用padding 挤出位置。
    四个方向的padding 都可能用于添加背景图。
    image.png

    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
      <style>
        * {
          margin: 0;
          padding: 0;
        }
        .list {
          width: 300px;
          border: 1px solid #333;
          padding-left: 10px;
          margin: 10px;
          list-style: none;
          font: 16px/32px '微软雅黑';
        }
        .list li {
          padding-left: 35px;
          background: url(/vx.jpg) no-repeat left center;
        }
      </style>
    <body>
      <ul class="list">
        <li>新闻1</li>
        <li>新闻2</li>
        <li>新闻3</li>
        <li>新闻4</li>
      </ul>
    </body>

    精灵图

    CSS精灵是一种处理网页背景图像的方式。
    它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。
    通常情况下，这个由很多小的背景图像合成的大图被称为精灵图。

    精灵图技术依据

  3. 将网页中需要用到的小尺寸背景图制作成一张背景透明的png图片。

  4. 利用背景定位技术，将精灵图的每个小图片加载到对应的标签上。

    注意事项

  5. 精灵图上放的都是小的装饰性质的背景图片，插入图片不能往上放。

  6. 精灵图的宽度取决于最宽的那个背景图片的标签宽度。

  7. 精灵图可以横向摆放也可以纵向摆放，但是每个图片之间必须留够足够的空白，保证背景图片加载到一个标签内部时，不能出现多余内容。

  8. 在精灵图的最低端，尽量留一点空白，方便以后添加其他精灵图

在线生成精灵图

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
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .bg-1 {
      width: 48px;
      height: 48px;
      background: url('css_sprites.png') -10px -254px;
    }
    .bg-2 {
      width: 48px;
      height: 48px;
      background: url('css_sprites.png') -78px -254px;
    }
    .bg-3 {
      width: 170px;
      height: 198px;
      background: url('css_sprites.png') -200px -10px;
    }
    .bg-4 {
      width: 170px;
      height: 224px;
      background: url('css_sprites.png') -10px -10px;
    }
  </style>
<body>
  <p class="bg-1"></p>
  <p class="bg-2"></p>
  <p class="bg-3"></p>
  <p class="bg-4"></p>
</body>

CSS3新增背景属性

rgba 背景半透明

CSS3支持背景半透明的写法，颜色值增加了一种rgba模式。
rgba模式：在rgb基础上增加了一个不透明度的设置，不透明度alpha取值范围在0-1之间，0表示完全透明，1表示完全不透明，0.5表示半透明。
书写方式：rgba(红色，绿色，蓝色，不透明度)
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 200px;
      height: 200px;
      background-color: rgba(255, 0, 0, 0.5);
    }
  </style>
<body>
  <div class="box">11</div>
</body>
半透明其他应用
1
2
color: rgba(255, 0, 0, 0.5);
border: 1px solid rgba(255, 0, 0, 0.5);

background-size 背景缩放

通过background-size设置背景图片的尺寸，就像我们设置<img>的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。

属性值
属性值 说明
px值 1-2个像素值，只设置1个值，垂直方向等比例拉伸;设置2个值,按照设置值加载。
百分比 同像素值设置方法相同,设置百分比时,数值参照盒子的宽、高属性
cover 自动调整缩放比例，把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。如有溢出部分则会被隐藏。
contain 自动调整缩放比例，把图像图像扩展至最大尺寸，保证图片始终完整显示在背景区域。 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 200px;
      height: 200px;
      border: 5px solid red;
      background: url(/2512a3d58033abb28da342e076335589b862fc48.png) no-repeat;
      /* background-size: 200px 150px; */
      /* background-size: 100% 60%; */
      /* background-size: cover; */
      background-size: contain;
    }
  </style>
<body>
  <div class="box"></div>
</body>

background-image 多背景

CSS3中规定，一个盒子上，可以添加多个背景图片。
background-image的属性值书写时，以逗号分隔多背景的URL路径地址。
注意：背景加载时，先写的背景压盖后写的背景图片。

1
background-image: url(/vx.jpg), url(/taobao.jpg);

定位类型及特点

定位属性

属性名：position
作用：设置定位的元素，它需要根据某个参考元素发生位置的偏移

属性值

relative 相对定位
absolute 绝对定位
fixed 固定定位

定位根据属性值不同又三种类型的定位效果，其中绝对定位和固定定位会脱离标准流

偏移量属性

定位的元素要想发生位置的移动，必须搭配偏移量属性进行设置。
水平方向：left、right。
垂直方向：top、bottom。
属性值：常用px为单位的数值，或者百分比。

relative 相对定位

属性值：relative，相对的意思。
参考元素：标签加载的原始位置。
必须搭配偏移量属性才能发生位置移动。

相对定位的性质

性质：相对定位的元素不脱离标签的原始状态（标准流、浮动)，不会让出原来占有的位置。
元素显示效果上，原位留坑，形影分离。
image.png

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
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 200px;
      height: 200px;
      border: 5px solid red;
    }
    .box p {
      width: 100px;
      height: 100px;
      margin-bottom: 10px;
      background-color: skyblue;
    }
    .box .para {
      position: relative;
      left: 100px;
      top: 100px;
      background: yellowgreen;
    }
  </style>
<body>
  <div class="box">
    <p>1</p>
    <p>2</p>
    <p class="para">3</p>
    <p>4</p>
  </div>
</body>

注意事项

偏移量属性的值是区分正负的。

正数：表示偏移方向与属性名方向相反。
负数：表示偏移方向与属性名方向相同。

同一个方向，不能设置两个偏移量属性，

如果水平方向同时设置了left和right属性，只会加载left属性。
垂直方向只加载top属性。

书写时从水平方向和垂直方向各挑一个属性进行组合。

由于相对定位的参考元素是自身

left的正值等价于right的负值，top的正值等价于bottom的负值。

为了方便记忆，可以选中只使用left、top组合

实际应用

  1. 由于相对定位元素比较稳定，不会随意让出位置，可以将相对定位的元素作为后期绝对定位的参考元素，就是所说的子绝父相情况。

  2. 相对定位比较稳定，可以在占有原始位置的情况下，对加载效果区域进行位置调整，进行微调设置。或者对文字进行微调。

    相对定位应用

    鼠标滑动到的位置，顶部出现一个小块
    image.png
    给a标签伪类设置相对定位和顶部边框

    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
      <style>
        * {
          margin: 0;
          padding: 0;
        }
        .nav {
          width: 1080px;
          height: 50px;
          background-color: pink;
          list-style: none;
          margin: 100px auto;
        }
        .nav li {
          float: left;
          width: 180px;
          height: 50px;
        }
        .nav li a {
          display: block;
          width: 180px;
          height: 50px;
          background-color: skyblue;
          font: 18px/50px '微软雅黑';
          text-align: center;
          color: #333;
          text-decoration: none;
        }
        .nav li a:hover {
          position: relative;
          top: -4px;
          border-top: 4px solid #ff0;
        }
      </style>
    <body>
      <ul class="nav">
        <li><a href="">首页</a></li>
        <li><a href="">首页</a></li>
        <li><a href="">首页</a></li>
        <li><a href="">首页</a></li>
        <li><a href="">首页</a></li>
        <li><a href="">首页</a></li>
      </ul>
    </body>

    对文字进行微调
    image.png

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
     <style>
        * {
          margin: 0;
          padding: 0;
        }
        p {
          width: 120px;
          border: 1px solid #f00;
          font: 18px/36px '微软雅黑';
          text-indent: 2em;
        }
        span {
          position: relative;
          top: -5px;
          font-size: 12px;
        }
      </style>
    <body>
      <p>
        这是一个段落
        <span>[1]</span>
        ，这是一个段落这是一个段落
      </p>
    </body>

    absolute 绝对定位

    属性值：absolute，绝对的意思。
    参考元素：参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考<body>。
    必须搭配偏移量属性才会发生位置移动。

    绝对定位的性质

    性质：绝对定位的元素脱离标准流，会让出标准流位置，可以设置宽高，也可以随时定义位置，绝对定位的元素不设置宽高只能被内容撑开。

    注意事项

  3. 绝对定位的参考元素是不固定的，不同的参考元素以及不同的偏移量组合，会导致绝对定位元素的参考点不同，具体位移效果不同。

  4. 在绝对定位中，由于参考点不同，left正值不再等价于right的负值。

    ​<body>为参考元素的参考点

    以为参考元素时，参考点的确定与偏移量方向有关。

  5. 如果有top参与的定位，参考点就是页面的左上顶点和右上顶点。自身的对比点是盒子的所有盒模型属性最外面的左上角或右上角。

  6. 如果有bottom参与的绝对定位，参考点是页面首屏的左下顶点或右下顶点。对比点是盒子的所有盒模型属性最外面的左下角或右下角。

实际应用中，如果以<body>为参考元素，不同分辨率的浏览器中，绝对定位的元素位置是不同的，所以较少使用作为参考元素。

祖先级为参考元素

如果祖先级中有定位的元素，就不会去参考<body>
参考元素：参考的是祖先元素中有任意定位的，在HTML结构中距离目标最近的祖先。
根据绝对定位的参考元素的定位类型不同，有三种定位组合方式：
子绝父相、子绝父绝、子绝父固，
由于相对定位的祖先级位置更稳定，大多使用子绝父相的情况。

祖先元素参考点

如果绝对定位的参考元素是某个祖先级，参考点是盒子border 以内的四个顶点，组合方向决定了参考点。
绝对定位的元素只关心对比点和参考点之间的距离，会忽视参考元素的padding 区域。
left、top：参考点是祖先的 border以内的左上顶点，对比点是盒子自身的左上角。
right、top：参考点是祖先的border 以内的右上顶点，对比点是盒子自身的右上角。left、bottom：参考点是祖先的border以内的左下顶点，对比点是盒子自身的左下角。
right、bottom：参考点是祖先的border以内的右下顶点，对比点是盒子自身的右下角

fixed 固定定位

属性值：fixed，固定的意思。
参考元素：浏览器窗口。
参考点：浏览器窗口的四个顶点。跟偏移量组合方向有关。
由于浏览器窗口的四个顶点位置不会发生变化，会导致固定定位的元素会始终显示在定位位置。

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
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 300px;
      height: 300px;
      margin-bottom: 10px;
      background-color: skyblue;
    }
    .backtop {
      position: fixed;
      right: 100px;
      bottom: 100px;
      width: 100px;
      height: 50px;
      background-color: #ccc;
      font: 18px/50px '微软雅黑';
      color: #333;
      text-align: center;
      text-decoration: none;
    }
    a:hover {
      background-color: gold;
    }
  </style>
<body>
  <a href="#" class="backtop">回到顶部</a>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>

固定定位的性质

固定定位的元素脱离标准流，让出标准流位置，可以设置宽高，根据偏移量属性可以任意设置在浏览器窗口的位置。
固定定位的元素会始终显示在浏览器窗口上。

定位的应用

压盖效果

所有的定位类型都可以实现压盖效果。
由于绝对定位的元素脱标，不占标准流位置，压盖效果更彻底，实际工作中，常见的是绝对定位制作的压盖。
image.png

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
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      position: relative;
      width: 980px;
      border: 10px solid #f00;
    }
    .box p {
      position: absolute;
      left: 100px;
      top: 100px;
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
<body>
  <div class="box">
    <img src="/2512a3d58033abb28da342e076335589b862fc48.png" alt="" />
    <p></p>
  </div>
</body>

居中

定位的元素，如果想在参考元素中居中显示，有自己的居中方法:
第一步：在居中的方向使用一个偏移量属性，例如 left，设置属性值为50%。导致图片的左顶点移动到参考元素的中心位置。
百分比形式的属性值，百分百参考的是参考元素的border 以内的宽度、高度。
第二步：给绝对定位的子盒子设置一个同方向的margin，例如margin-left，属性值为负的自身宽度的一半。
image.png

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
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      position: relative;
      width: 980px;
      border: 10px solid #f00;
      margin: 0 auto;
    }
    .box p {
      position: absolute;
      left: 50%;
      top: 100px;
      width: 1200px;
      height: 100px;
      margin-left: -600px;
      background-color: pink;
    }
  </style>
<body>
  <div class="box">
    <img src="/2512a3d58033abb28da342e076335589b862fc48.png" alt="" />
    <p></p>
  </div>
</body>

扩展应用

  1. 解决标准流中，宽的子盒子在窄的父盒子中的居中，可以设置大的子盒子相对定位，利用相对定位居中的方法进行居中。

  2. 浮动的元素居中，在不改变原始浮动状态情况下，可以利用相对定位居中方法。

    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
      <style>
        * {
          margin: 0;
          padding: 0;
        }

        .box1 {
          width: 400px;
          height: 100px;
          border: 10px solid #f00;
          margin: 50px auto;
        }
        .box1 p {
          position: relative;
          left: 50%;
          width: 800px;
          height: 100px;
          margin-left: -400px;
          background-color: pink;
        }
      </style>
    <body>
      <div class="box1">
        <p></p>
      </div>
    </body>

    压盖顺序

    默认压盖顺序

    定位的元素不区分定位类型，都会去压盖标准流或浮动的元素。
    如果都是定位的元素，在HTML 中后写的定位压盖先写的定位。
    因此，书写代码时，需要注意压盖效果，必须合理设置HTML元素的书写顺序。

    自定义压盖顺序

    如果想更改定位的元素的压盖顺序，可以设置一个z-index属性。
    属性值：数字。

    自定义压盖顺序注意事项

  3. 属性值大的会压盖属性值小的，设置z-index属性的会压盖没有设置的。

  4. 如果属性值相同，比较HTML书写顺序，后写的压盖先写的。

  5. z-index属性只能设置给定位的元素才会生效，如果给没有定位的元素设置，不会生效。

  6. 父子盒模型中，如果父子盒子都进行了定位，与其他的父子级有压盖的部分:

    父级盒子：

    如果不设置z-index，后写的压盖先写的;
    如果设置了z-index，值大的压盖值小的。

    子级盒子：

    如果父级没有设置z-index属性，子级z-index大的会压盖小的;
    如果父级设置了z-index值，无论子级值是多少，都是父级的值大的子级压盖父级值小的子级，俗称“从父效应”。

    盒模型

    盒模型又叫框模型，包含了五个用来描述盒子位置、尺寸的属性，分别是
    宽度 width、高度 height、内边距 padding、边框 border、外边距 margin。

常见和模型区域
盒模型的属性中，根据不同属性的效果可以划分：
书写内容区域：width+height
实体化区域(设置样式可见)：width+height+padding+border
实际占位的位置：width+height+padding+border+margin
image.png

width

可以设置添加元素内容的区域的宽度

属性值

属性值 说明
auto 默认值。浏览器可计算出实际的宽度
px 像素值定义的宽度
% 定义参考父元素宽度的百分比宽度

特殊应用

如果一个元素不添加width属性，默认属性值为auto，不同的元素浏览器会根据其特点自动计算出实际宽度，
例如<div>元素等独占一行的，其 width 属性的值会自动撑满父元素的 width 区域，
如果是 <span> 元素等不需要独占一行的，其 width属性的值是内部元素内容自动撑开的宽度。
<body> 元素比较特殊，不需要设置 width 属性，宽度会自动适应浏览器窗口的宽度

height

可以设置添加元素内容的区域的高度

属性值

属性值 说明
auto 默认值。浏览器可计算出实际的高度
px 像素值定义的高度
% 定义参考父元素高度的百分比高度

特殊应用

如果一个元素不添加height属性，默认属性值为auto，浏览器自动会计算出实际高度，也就是说内部元素自动撑开的高度。元素的高度自适应内容的高度

pandding

内边距
作用：设置的是元素的边框内部到宽高区域之间的距离。
特点：可以去加载背景，不能书写嵌套的内容。
属性值：常用px为单位的数值。
padding 是一个复合属性，可以根据内边距的方向不同划分为四个方向的单一属性。

单一属性

1
2
3
4
5
6
p {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 30px;
}

四值法

方向按照顺时针，上、右、下、左

1
2
3
.demo {
  padding: 10px 20px 30xp 40px;
}

三值法

上、右左、下

1
2
3
.demo {
  padding: 10px 20px 30xp;
}

二值法

上下、左右

1
2
3
.demo {
  padding: 10px 20px;
}

单值法

上下左右都相同

1
2
3
.demo {
  padding: 10px;
}

border

边框，设置的是内边距外边的边界区域，作为盒子的实体化的最外层
属性值：有三个值组成，分为线的宽度、线的性质、线的颜色。(位置可以替换)
border属性是一个复合属性，根据划分依据不同 可以有两种单一属性的划分方式

1
2
3
p {
  border: 1px solid red;
}

按照属性值的类型划分

线宽：border-width、线型：border-style、颜色：border-color

border-width

作用：设置边框线的宽度。
属性值：常用px形式的数值，四个方向都有边框，属性值类似于 padding，也有四种值的写法。

1
2
3
p {
  border-width: 1px 2px 3px 4px;
}
border-style

作用：设置边框的线条形状。
属性值：形状的单词，总体也是类似 padding 的综合属性写法。属性值的单词可能性:

属性值 说明
none 定义无边框
solid 定义实线
dashed 定义虚线。在大多数浏览器中呈现为实线
dotted 定义点状边框。在大多数浏览器中呈现为实线
double 定义双线。双线的宽度等于 border-width 的值
……
border-color

作用：设置边框的颜色。
属性值：颜色名或颜色值，整体类似 padding 综合属性写法。

1
2
3
p {
  border-color: #f00 #0f0 #00f #ff0;
}

根据边框的方向划分

上边框：border-top、
右边框：border-right、
下边框：border-bottom、
左边框：border-left
每个单一属性都必须与符合属性border一致，设置三个属性值

根据方向和类型进一步细分

类似border-top的单一方向属性，也可以根据属性值类型继续进行单一属性划分
单一属性写法：border-方向-类型

1
2
3
p {
  border-top-color: #f00;
}

细分时必须先写方向划分在写类型划分，否则属性名错误

margin

外边距
设置的是盒子与盒子之间的距离
特点：不能渲染背景
属性值：常用px为单位的数值
外边距的设置方式与内边距padding一模一样

盒模型扩展

清除默认样式

大部分标签都有一个浏览器加载的默认样式，会对布局造成一些影响。为了避免默认样式对整体布局效果造成影响，一定要清除默认样式。

盒模型属性中内外边距：

大部分容器级标签都有默认边距，要么用标签选择器的并集方式，要么通配符清除。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
  /*清除默认样式 */
  /* body,div,h1,p,ul,li {
    margin: 0;
    padding: 0;
  } */
  * {
    margin: 0;
    padding: 0;
  }
</style>
<body>
  <div>div</div>
  <h1>标题1</h1>
  <p>段落</p>
  <ul>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
  </ul>
</body>

<ul>和<ol>两种列表有默认的列表前缀

清除list-style属性，设置list-style:none

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  <style>
    ol,
    ul {
      list-style: none;
    }
  </style>
<body>
  <div>div</div>
  <h1>标题1</h1>
  <p>段落</p>
  <ul>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
  </ul>
</body>

<a>标签默认样式

a标签自带蓝色和下划线，设置颜色color和下划线text-decoration：none

1
2
3
4
a {
  color: #333;
  text-decoration: none;
}

清除默认加粗效果

默认粗体比如说h、b、strong标签，设置font-weight:normal

1
2
3
4
5
h1,
b,
strong {
  font-weight: normal;
}

height应用

根据不同的需求，高度属性可以设置也可以不设置。
如果设置了高度：盒子占有的高度位置就确定死了，后面的同级元素会紧挨着加载。
如果不设置高度：会根据标签内部内容高度自动撑开。

必须设置高度的情况

设计图中盒子高度占位是固定的，后面同级元素在高度下面加载。
盒子自身内部内容过多溢出盒子区域
image.png

overflow属性

设置了高度的盒子，如果内部元素的加载高度超过父级，会出现溢出效果。可以通过一个溢出的属性 overflow，进行溢出部分内容的显示效果设置。

属性值 说明
visible 默认值，可见的可视的，溢出部分显示的。
hidden 溢出部分直接隐藏，隐藏超过边框范围的内容
scroll 溢出的部分出现滚动条，可以拖动滚动条看到隐藏部分，多出盒子高度的部分不显示，不论有没有溢出，水平和垂直方向都会出现滚动条。
auto 自动的，如果没有溢出就正常显示，如果有溢出，溢出的方向自动出现滚动条。 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  <style>
    div {
      width: 100px;
      height: 100px;
      border: 1px solid red;
      overflow: hidden;
      /* overflow: visible; */
      /* overflow: scroll; */
      /* overflow: auto; */
    }
  </style>
</head>
<body>
  <div>
    这是div,这是div这是div这是div这是div这是div这是
    div这是div这是div这是div这是div
  </div>
  <span>这是span</span>
</body>

必须不设置高度

要求盒子高度必须自适应内部内容的高度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <style>
    div {
      width: 100px;
      /* height: 100px; */
      border: 1px solid red;
    }
  </style>
<body>
  <div>
    这是div,这是div这是div这是div这是div这是div
    这是div这是div这是div这是div这是div
  </div>
  <span>这是span</span>
</body>

或者是设置height的属性值是自动的

1
2
3
4
5
6
7
<style>
  div {
    width: 100px;
    height: auto;
    border: 1px solid red;
  }
</style>

居中

元素居中或者是文字居中

文本水平居中

水平居中：text-align:center
不论单行或者多行都可以设置

1
2
3
4
5
6
7
8
9
10
11
  <style>
    div {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      text-align: center;
    }
  </style>
<body>
  <div>这是div这是div</div>
</body>

文本垂直居中

单行文本垂直居中

让文字行高line-height等于盒子高度height

1
2
3
4
5
6
7
8
9
10
11
  <style>
    div {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      line-height: 200px;
    }
  </style>
<body>
  <div>这是div</div>
</body>
多行文本垂直居中

让元素高度自适应或者正好等于多行文字的高度，设置元素内边距上下值相同

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
  div {
    width: 200px;
    padding: 20px 0;
    border: 1px solid red;
  }
</style>
<body>
  <div>
    这是div这是div这是div这是div这是div这是div
    这是div这是div这是div这是div这是div
  </div>
</body>

元素垂直居中

一个元素内部嵌套的子元素，在父元素中居中
垂直居中：与多行文字类似，让父元素高度自适应，子元素高度自动撑开父级的高度，再给父元素设置相同的上下边距

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
  .box {
    width: 200px;
    padding: 20px 0;
    border: 1px solid #000;
  }
  .demo {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
  }
</style>
<body>
  <div class="box">
    <div class="demo"></div>
  </div>
</body>

元素水平居中

针对类似<div>样式上必须独占一行的盒子，如果子盒子宽度低于父盒子宽度，可以设置子盒子的 margin 值，水平方向的值都设置为 auto。
原因：auto只在水平方向有作用，水平方向的 margin 如果设置为 auto，边距会自动无限增大，直到撑满整个父元素除了子元素宽度之外剩余的区域，如果两个水平方向都是 auto，两边都要无限大，只能达到一个平衡，两边距离相同，导致盒子居中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
  .box {
    width: 200px;
    padding: 20px 0;
    border: 1px solid #000;
  }
  .demo {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border: 1px solid #000;
  }
</style>
<body>
  <div class="box">
    <div class="demo"></div>
  </div>
</body>

父子盒模型

一般情况下，一个父元素内部可以放一个或多个子元素，而且多个子元素要排成一行显示，必须保证父元素的宽度一定要足够(不考虑溢出情况)，需要遵循一个设置尺寸的规律：所有子元素的宽度加在一起不能大于父元素的宽度width。
父元素的width ≥ 所有子元素 width + padding + border + margin
如果不满足条件：要么多余的子元素掉下来不能在一排，要么溢出父元素

多余的子元素掉下来不能在一排

image.png

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
<style>
  * {
    margin: 0;
    padding: 0;
  }
  .box1 {
    width: 150px;
    height: 50px;
    border: 1px solid red;
  }
  .box1 p {
    float: left;
    width: 50px;
    height: 50px;
    margin-right: 10px;
    background-color: pink;
  }
</style>
<body>
  <div class="box1">
    <p></p>
    <p></p>
    <p></p>
  </div>
</body>

溢出父元素

image.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
  * {
    margin: 0;
    padding: 0;
  }
  .box2 {
    width: 50px;
    height: 50px;
    border: 10px solid red;
  }
  .box2 p {
    width: 50px;
    height: 50px;
    border: 30px solid black;
  }
</style>
<body>
  <div class="box2">
    <p></p>
  </div>
</body>

特殊情况：盒模型自动内减

父子盒模型中，只有一个子元素，且子元素是类似<div> 标签必须占一行的。
不设置子元素的 width 属性，子元素的 width 属性值会自动加载父级元素的 width。
如果同时设置了子元素水平方向的 padding 和 border、margin，不需要手动去进行内减，子元素的 width 会自动收缩尺寸。
子元素所有的水平方向的位置所有属性的加和等于父元素的 width。

margin塌陷

margin塌陷现象：在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值大的值内部。

两个元素垂直margin塌陷

image.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    * {
      margin: 0;
      padding: 0;
    }
    .box1 {
      width: 50px;
      height: 50px;
      margin-bottom: 10px;
      border: 1px solid red;
    }
    .box2 {
      width: 50px;
      height: 50px;
      margin-top: 50px;
      border: 1px solid black;
    }
  </style>
<body>
  <div class="box1">1</div>
  <div class="box2">2</div>
</body>

父子元素margin塌陷

父子元素之间也会出现 margin 塌陷，父元素和子元素都设置了同方向的margin-top 值，两个属性之间没有其他的内容进行隔离，导致两个属性相遇，发生margin塌陷。
如果父盒子没有设置margin-top值，子盒子设置了，也会发生margin塌陷
image.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
   * {
     margin: 0;
     padding: 0;
   }
   .box3 {
     width: 50px;
     height: 50px;
     margin-top: 10px;
     background-color: pink;
   }
   .box3 p {
     width: 20px;
     height: 20px;
     margin-top: 50px;
     background-color: red;
   }
 </style>
 <body>
   <div class="box3"><p></p></div>
 </body>

解决margin塌陷问题

margin塌陷问题只会出现在垂直方向上，水平方向不会

同级元素

如果两个元素垂直方向有间距，只需要都设置给一个元素，不要进行拆分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
  * {
    margin: 0;
    padding: 0;
  }

  .box3 {
    width: 50px;
    height: 50px;
    background-color: pink;
  }
  .box3 p {
    width: 20px;
    height: 20px;
    margin-top: 10px;
    background-color: red;
  }
</style>
父子元素
用父元素的border或者padding隔开(不推荐)

让两个边距不要相遇，中间可以使用父元素border或者padding将边距分开
(不推荐)因为会增加额外的边距或者是高度重新计算

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
  * {
    margin: 0;
    padding: 0;
  }

  .box3 {
    width: 50px;
    height: 50px;
    border: 1px solid red;
    /* padding-top: 10px; */
    background-color: pink;
  }
  .box3 p {
    width: 20px;
    height: 20px;
    margin-top: 10px;
    background-color: red;
  }
</style>
用父元素的padding挤出来(推荐)

父子盒模型之间的距离不要用儿子的margin去隔出来，而是用父级的padding挤出来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
  * {
    margin: 0;
    padding: 0;
  }

  .box3 {
    width: 50px;
    height: 40px;
    padding-top: 10px;
    background-color: pink;
  }
  .box3 p {
    width: 20px;
    height: 20px;
    background-color: red;
  }
</style>

标准文档流

标准文档流，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。前面内容发生了变化，后面的内容位置也会随着发生变化。
HTML就是一种标准文档流文件。
HTML中的标准文档流特点通过两种方式体现：微观现象和元素等级。

微观现象

  1. 空白折叠现象
  2. 文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果
  3. 自动换行，元素内一行内容写满元素的width时，会自动进行换行

    元素等级

    在标准流中，大部分元素是区分等级的，习惯将元素划分为几种常见的加载级别：

块级元素、行内元素、行内块元素
​

块级元素：大部分容器级标签包括p标签都是块级元素，比如<div>、<h1>等。
行内元素：大部分的文本级标签，比如<span>、<a>、<b>等。
行内块元素：比如<img>、<input>等。
各种等级的元素有自己的加载特点。

块级元素

  1. 块级元素可以设置宽高，在浏览器中正常加载。

  2. 块级元素必须独占一行，不能与其他任何标签并排一行。

  3. 块级元素如果不设置宽度，会自动撑满父级的 width 区域；高度不首容自动撑开高度。

    行内元素

  4. 行内元素不能正常加载宽高属性，其他的盒模型属性虽然能够设置，但是容易出现加载问题。

  5. 行内元素可以与其他的行内或行内块元素并排一行显示。

  6. 行内元素不论是否设置宽高，宽度和高度都只能被内容自动撑开。

    行内块元素

  7. 行内块元素可以设置宽度和高度。

  8. 行内块元素可以与其他的行内或行内块并排一行显示。

  9. 行内块元素如果不设置宽高，要么以原始尺寸加载要么被内容自动撑开。

  10. 行内块依旧具有标准流的微观性质，例如空白折叠现象。

    显示模式 display

    标准文档流的元素有自己默认的浏览器加载模式，但是加载模式不是一成不变的，后期可以通过display属性改成一个标签的显示模式
    属性值：元素根据属性值不同，可以加载对应元素等级的显示模式的特点

    属性值

    属性值 作用
    block 表示元素要以块级元素模式加载，具备块级特点
    inline 表示元素要以行内元素模式加载，具备行内特点
    inline-block 表示标签要以行内块模式加载，具备行内块特点
    none 表示标签及内部内容直接隐藏，让出原有标准流的位置 
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
 <style>
    div {
      display: inline;
      width: 100px;
      height: 50px;
      background-color: pink;
    }
    span {
      display: block;
      width: 100px;
      height: 50px;
      background-color: aqua;
    }
    p {
      display: inline-block;
      width: 100px;
      height: 50px;
      background-color: red;
    }
  </style>
<body>
  <div>div</div>
  <span>span</span>
  <p>p</p>
  <p>p</p>
</body>

脱离标准流

display 属性更改的显示模式并没有改变标准流本质性质，页面还是只能从上往下加载，存在空白折叠现象等微观性质。要想实现更多的界面布局效果需要脱离标准流的限制。
标签元素脱离标准流的方法包括：浮动、绝对定位、固定定位。

浮动

浮动是一种非常重要的布局属性。
属性名：float，漂流、浮动的意思。
属性值：left 左浮动、right 右浮动
作用：让元素脱离标准流，同一级的浮动的可以并排在一排显示。

浮动的性质

浮动的元素脱离标准流

标准文档流特点：区分行块。

  • 块级元素：可以设置宽高，必须独占一行。
  • 行内元素：不能设置宽高，可以并排一行。

​

浮动的元素脱离了标准流的限制，具备行块二象性，浮动的元素可以设置宽高，还可以并排一行，而且不会有空白折叠现象，如果元素不设置宽高，可以被元素内容自动撑开。
​

浮动的元素依次贴边

浮动属性值：left、right。
浮动方向设置不同，进行布局时，加载位置方向不同。
以left为例：父元素宽度足够，所有子元素会按照HTML书写顺序，依次向左进行贴边，父元素左边 <- 子元素1 <- 子元素2 <- 子元素3 <- 子元素4。
​

父元素宽度足够，并排一排
image.png
父元素宽度如果不够
如果不能放下一个子元素4，那么子元素4在贴边时，会跳过上一个子元素3，向更上一个子元素2进行贴边，
image.png
如果子元素2后面位置不够，继续跳过子元素2向前面的子元素1进行贴边。
image.png
如果子元素4在跳过子元素3向更前面的子元素2贴边时，子元素2的高度不高于子元素3，子元素2没有延伸出一个高度的边让子元素4贴边，那么子元素4就会跳过子元素2向子元素1进行贴边。
image.png
如果贴边的这个子元素4宽度小于子元素2，子元素2的高度低于子元素1和子元素3，形成一个凹陷，子元素4会受前面子元素3高度影响，不会出现钻空现象。
image.png
如果子元素1后面的距离也放不下子元素4，子元素4最终会贴到父元素左边，
如果子元素4的宽度超过了父元素，只会出现溢出现象。
image.pngimage.png

右浮动和左浮动规则一致

浮动依次贴边应用

利用浮动依次贴边的性质，用列表结构模拟平均分布的表格布局结构
边框是利用不同的背景色，然后父元素的padding和子元素margin挤出来的空隙

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
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      list-style: none;
      width: 408px;
      height: 126px;
      padding-top: 2px;
      padding-left: 2px;
      background-color: #ccc;
    }
    ul li {
      float: left;
      width: 100px;
      height: 40px;
      margin-right: 2px;
      margin-bottom: 2px;
      background-color: skyblue;
    }
  </style>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
  </ul>
</body>

注意：同一个盒子中，可以有左浮动和右浮动的子盒子并存，
子盒子会根据浮动方向，向上一个同方向的子盒子进行贴边，如果空间不够，也会发生之前依次贴边的各种情况。

image.png

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
 <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      list-style: none;
      width: 580px;
      height: 126px;
      padding-top: 2px;
      padding-left: 2px;
      background-color: #ccc;
    }
    ul li {
      float: left;
      width: 100px;
      height: 40px;
      margin-right: 2px;
      margin-bottom: 2px;
      background-color: skyblue;
    }
    .fr {
      float: right;
    }
  </style>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li class="fr">4</li>
    <li>5</li>
    <li>6</li>
    <li class="fr">7</li>
    <li>8</li>
    <li>9</li>
    <li class="fr">10</li>
    <li class="fr">11</li>
    <li>12</li>
  </ul>
</body>

贴边性质常见应用：

  1. 表格
  2. 导航栏
  3. 电商或者企业网站布局
    浮动元素没有margin塌陷
    margin塌陷出现在标准流中，浮动元素以及脱离了标准流，不再具有margin塌陷现象
    浮动的元素让出标准流位置
    元素浮动之后，脱离了标准流，会将原来占有的标准流位置让给后面的一个同一级元素
    image.png
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
     <style>
        * {
          margin: 0;
          padding: 0;
        }
        .ps1 {
          float: left;
          width: 100px;
          height: 100px;
          background-color: skyblue;
        }
        .ps2 {
          width: 200px;
          height: 200px;
          background-color: yellow;
        }
      </style>
    <body>
      <div>
        <p class="ps1">1浮动</p>
        <p class="ps2">2不浮动</p>
      </div>
    </body>
    由于浏览器中有兼容性，不会使用这种属性制作压盖效果，压盖一般用定位
    如果没有特殊需求，不允许一个父元素中的子元素有的浮动有的不浮动，同级元素中有一个浮动其他的也要浮动。
    浮动有字围现象
    与前面压盖效果结构类似，同级元素中前面的元素浮动，后面的元素不浮动，不浮动的元素内部还有一些文字，浮动的蓝盒子会压盖住黄盒子的一部分，但是文字内容不会被盖住，黄盒子中的文字会让开蓝盒子位置，围绕它进行加载。

    浮动的问题

    浮动的子元素是不会撑高父元素
    标准流中的元素，不设置高度的情况下，都能被内部的标准流元素自动撑高。
    如果内部的子元素进行了浮动，浮动的子元素是撑不高标准流父亲的。
    image.png
    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
      <style>
        * {
          margin: 0;
          padding: 0;
        }
        .box {
          width: 1000px;
          border: 10px solid red;
        }
        .box p {
          float: left;
          width: 100px;
          height: 100px;
          margin-right: 10px;
          background-color: skyblue;
        }
      </style>
    <body>
      <div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
      </div>
    </body>
    父元素无高度，浮动元素可能会影响后面的浮动贴边
    父元素没有高度，会影响后面元素的标准流位置，如果浮动的子元素足够高时，有可能影响到后面浮动元素的贴边
    image.png
    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
      <style>
        * {
          margin: 0;
          padding: 0;
        }
        .box {
          width: 1000px;
          border: 10px solid red;
        }
        .box p {
          float: left;
          width: 100px;
          height: 100px;
          margin-right: 10px;
          background-color: skyblue;
        }
      </style>
    <body>
      <div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
      </div>
      <div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
      </div>

    清除浮动

    给父元素添加合适的高度
    给标准流的父元素强制给一个合适的高度
    解决：父元素有了高度，前面的浮动不能影响后面元素的标准流位置和贴边。
    问题：父元素高度不是自适应，一旦子元素高度变化，问题可能再次出现。
    image.png
    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
      <style>
        * {
          margin: 0;
          padding: 0;
        }
        .box {
          width: 1000px;
          height: 100px;
          border: 10px solid red;
        }
        .box p {
          float: left;
          width: 100px;
          height: 100px;
          margin-right: 10px;
          background-color: skyblue;
        }
      </style>
    <body>
      <div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
      </div>
      <div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
      </div>
    </body>
    父元素使用clear属性
    clear，清除。
    作用：清除标签元素自身受到的前面的浮动元素的影响。
    属性值：left 清除前面左浮动带来的影响、right 清除前面右浮动带来的影响、both 清除前面所有浮动带来的影响
    给标准流父元素添加 clear 属性，父元素不受前面浮动影响，不会再占有位置。
    1
    2
    3
    4
    5
    .box {
      width: 1000px;
      clear: both;
      border: 10px solid red;
    }
    image.png
    解决：浮动元素影响后面元素标准流位置和贴边。
    问题：父元素不能高度自适应，两个父元素之间如果有 margin 效果不正确。
    隔墙法
    隔墙法有外墙法和内墙法
    外墙法：
    在两个大的父盒子之间添加一个空的div标签，标签上带有clear:both属性
    解决：浮动影响后面元素标准流位置和贴边，模拟父元素间的距离。
    问题：父元素没有高度自适应。image.png
    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
      <style>
        * {
          margin: 0;
          padding: 0;
        }
        .box {
          width: 1000px;
          border: 10px solid red;
        }
        .box p {
          float: left;
          width: 100px;
          height: 100px;
          margin-right: 10px;
          background-color: skyblue;
        }
        .cl {
          clear: both;
          height: 10px;
        }
      </style>
    <body>
      <div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
      </div>
      <div class="cl"></div>
      <div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
      </div>
    </body>
    内墙法：(推荐使用)
    在元素内部，所有的浮动子元素后面添加一个空的div元素，标签高度为0，添加clear属性
    解决：父元素高度自适应，浮动影响后面的元素位置和贴边。
    缺点：浮动是 css 样式属性带来的问题，内墙法使用 HTML 结构去辅助解决问题，
    如果页面中浮动元素很多，需要添加多个没有语义的空标签，造成HTML结构的冗余
    image.png
    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
      <style>
        * {
          margin: 0;
          padding: 0;
        }
        .box {
          width: 1000px;
          border: 10px solid red;
          margin-bottom: 10px;
        }
        .box p {
          float: left;
          width: 100px;
          height: 100px;
          margin-right: 10px;
          background-color: skyblue;
        }
        .cl {
          clear: both;
        }
      </style>
    <body>
      <div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <div class="cl"></div>
      </div>
      <div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <div class="cl"></div>
      </div>
    </body>
    伪类(推荐使用)
    本质是使用伪类方法利用css代码书写一堵内墙。
    伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置。
    :after：这个伪类表示选中的是某个标签内部的最后的位置。
    书写方法：前面必须加普通的选择器，后面连续书写伪类名称。
    将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一个clearfix的类名。
    解决：父元素高度自适应，浮动影响后面元素位置和贴边
    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
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 1000px;
        border: 10px solid red;
        margin-bottom: 10px;
      }
      .box p {
        float: left;
        width: 100px;
        height: 100px;
        margin-right: 10px;
        background-color: skyblue;
      }
      .clearfix:after {
        content: '1'; /*添加一个文字内容*/
        display: block; /*将文字转换为块级元素*/
        height: 0; /* 将盒子高度固定为0，避免影响父盒子高度 */
        clear: both; /* 清除前面浮动影响 */
        visibility: hidden; /*将创建的元素占位并隐藏 */
      }
    </style>
    <body>
      <div class="box clearfix">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
      </div>
      <div class="box clearfix">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
     </div>
    溢出隐藏(推荐使用)
    给内部有浮动子元素的父元素添加溢出隐藏 overflow:hidden 属性，可以解决浮动所有问题
    元素没有高度时，如果同时设置了overflow:hidden，元素会自适应内容的高度
    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
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 1000px;
        border: 10px solid red;
        margin-bottom: 10px;
        overflow: hidden;
      }
      .box p {
        float: left;
        width: 100px;
        height: 100px;
        margin-right: 10px;
        background-color: skyblue;
      }
    </style>
    <body>
      <div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
      </div>
      <div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
      </div>
     </body>
    高度自适应原因：
    一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏浏览器会强制性去检索内部的子元素的高度，不论子元素是标准流还是浮动，都会将最高的高度作为父盒子高度加载。
    浮动影响后面的元素:
    父元素有了高度后，可以管理住内部所有的浮动元素，不会延伸到后面标签中影响贴边。
    ​

总结：
如果父元素高度是固定的，建议使用height属性解决
如果父元素高度需要自适应，建议使用overflow属性解决浮动
​

静态轮播图布局

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul,
    ol {
      list-style: none;
    }
    .lunbo {
      position: relative;
      width: 976px;
      height: 550px;
      border: 2px solid #333;
      margin: 20px auto;
    }
    .lunbo .pic li {
      position: absolute;
      left: 0;
      top: 0;
      width: 880px;
      height: 550px;
      display: none;
    }
    .lunbo .pic .current {
      display: block;
    }
    .lunbo .btn a {
      position: absolute;
      top: 50%;
      width: 40px;
      height: 40px;
      margin-top: -20px;
      background-color: rgba(255, 255, 255, 0.3);
      text-align: center;
      font: 20px/40px '宋体';
      color: #fff;
      text-decoration: none;
      font-weight: bolder;
    }
    .lunbo .btn .leftbtn {
      left: 20px;
    }
    .lunbo .btn .rightbtn {
      right: 20px;
    }
    .lunbo .btn a:hover {
      background-color: rgba(255, 255, 255, 0.6);
    }
    /* 下标 */
    .lunbo .sub {
      position: absolute;
      left: 100px;
      bottom: 20px;
      width: 240px;
    }
    .lunbo .sub li {
      float: left;
      width: 20px;
      height: 20px;
      margin-right: 20px;
      background-color: rgba(255, 255, 255, 0.3);
      font: 12px/20px '微软雅黑';
      text-align: center;
      color: #666;
      cursor: pointer;
    }
    .lunbo .sub .current {
      background-color: #fff;
    }
  </style>
<body>
  <!-- 轮播图大结构 -->
  <div class="lunbo">
    <!-- 图片部分 -->
    <ul class="pic">
      <li class="current"><img src="/L1.jpg" alt="" /></li>
      <li><img src="/L2.jpg" alt="" /></li>
      <li><img src="/L3.jpg" alt="" /></li>
      <li><img src="/L4.png" alt="" /></li>
      <li><img src="/L5.jpg" alt="" /></li>
      <li><img src="/L6.jpg" alt="" /></li>
    </ul>
    <!-- 按钮 -->
    <div class="btn">
      <a href="javascript:;" class="leftbtn">&lt;</a>
      <a href="javascript:;" class="rightbtn">&gt;</a>
    </div>
    <!-- 小圆点 -->
    <ol class="sub">
      <li class="current">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ol>
  </div>
</body>
CSS
CSS

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！