CSS基础学习笔记

学习时间：2022年7月14日

学习来源：黑马

1 简介

1.1 概述

CSS 的主要使用场景就是美化网页,布局页面的。

CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。有时我们也会称之为 CSS 样式表或级联样式表。

CSS 是也是一种标记语言。CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮，让页面布局更简单。

CSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CSS，即结构 ( HTML ) 与样式( CSS ) 相分离。

1.2 语法规范

CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。

选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
属性和属性值以“键值对”的形式出现
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
属性和属性值之间用:分开
多个“键值对”之间用;进行区分

所有的样式，都包含在 <style> 标签内，表示是样式表。<style> 一般写到 </head> 上方。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>css语法规范</title>
  <style>
    /* 选择器 {样式} */
    p {
      color: pink;
      font-size: 12px;
    }
  </style>
</head>
<body>
  <p>有点意思</p>
</body>
</html>

1.3 代码风格

样式格式书写

紧凑格式

1	h3 { color: deeppink;font-size: 20px;}

展开格式

h3 {
    color: pink;
    font-size: 20px; 
}

强烈推荐第二种格式，因为更直观。

样式大小写
1
2
3
h3 {
color: pink;
}
1
2
3
H3 {
COLOR: PINK;
}
强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外。
空格规范
1
2
3
h3 {
color: pink;
}
属性值前面，冒号后面，保留一个空格；选择器（标签）和大括号中间保留空格

2 基础选择器

2.1 作用和分类

选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说，就是选择标签用的。

以上 CSS 做了两件事：

找到所有的 h1 标签。选择器（选对人）。
设置这些标签的样式，比如颜色为红色（做对事）。

选择器分为基础选择器和复合选择器两个大类，我们这里先讲解一下基础选择器。

基础选择器是由单个选择器组成的
基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器

2.2 标签选择器

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

语法：

标签名{
    属性1: 属性值1; 
    属性2: 属性值2; 
    属性3: 属性值3; 
    ...
}

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    p {
      color: green;
    }
    div {
      color: pink;
    }
  </style>
</head>
<body>
  <p>男生</p>
  <p>男生</p>
  <p>男生</p>
  <div>女生</div>
  <div>女生</div>
  <div>女生</div>
</body>
</html>

标签选择器可以把某一类标签全部选择出来，比如所有的 <div> 标签和所有的 <span> 标签。

优缺点

能快速为页面中同类型的标签统一设置样式。
不能设计差异化样式，只能选择全部的当前标签。

2.3 类选择器

2.3.1 基本使用

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点.号显示。

语法：

.类名 {
    属性1: 属性值1; 
    ...
}

html结构需要用class属性来调用 class 类的意思

1	<div class=‘red’> 变红色 </div>

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .red {
      color: red;
    }
    .star-sing {
      color: green;
    }
  </style>
</head>
<body>
  <ul>
    <li class="red">来生孝夫</li>
    <li class="red">竹内玛莉亚</li>
    <li class="star-sing">玉置浩二</li>
    <li>井上阳水</li>
    <li>吉田拓郎</li>
  </ul>
  <div class="red">我也想变成红色</div>
</body>
</html>

注意：

长名称或词组可以使用中横线来为选择器命名。
不要使用纯数字、中文等命名，尽量使用英文字母来表示。
记忆口诀：样式点定义，结构类调用。一个或多个，开发最常用。

2.3.2 多类名

我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签。简单理解就是一个标签有多个名字。

使用方式
1
<div class="red font20">亚瑟</div>
- 在标签class 属性中写多个类名
- 多个类名中间必须用空格分开
- 这个标签就可以分别具有这些类名的样式
开发场景
- 可以把一些标签元素相同的样式(共同的部分)放到一个类里面.
- 这些标签都可以调用这个公共的类，然后再调用自己独有的类.
- 从而节省CSS代码，统一修改也非常方便.

2.4 id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以#来定义。

语法

#id名 {
    属性1: 属性值1; 
    ...
}

注意：id 属性只能在每个 HTML 文档中出现一次。口诀: 样式#定义,结构id调用, 只能调用一次, 别人切勿使用。

id 选择器和类选择器的区别
- 类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
- id 选择器好比人的身份证号码，全中国是唯一的，不得重复。
- id 选择器和类选择器最大的不同在于使用次数上。
- 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #red {
      color: red;
    }
  </style>
</head>
<body>
  <div id="red">来生孝夫</div>
</body>
</html>

2.5 通配符选择器

在 CSS 中，通配符选择器使用 * 定义，它表示选取页面中所有元素（标签）。

语法

* {
    属性1: 属性值1; 
    ...
}

通配符选择器不需要调用，自动就给所有的元素使用样式
特殊情况才使用，后面讲解使用场景(以下是清除所有的元素标签的内外边距,后期讲)

* {
    margin: 0;
    padding: 0;
}

3 字体属性

CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）。

3.1 字体系列

CSS 使用 font-family 属性定义文本的字体系列。

p { 
    font-family:"微软雅黑";
} 
div {
    font-family: Arial,"Microsoft Yahei", "微软雅黑";
}

各种字体之间必须使用英文状态下的逗号隔开
一般情况下,如果有空格隔开的多个单词组成的字体,加引号.
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
最常见的几个字体：body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }

3.2 字体大小

CSS 使用 font-size 属性定义字体大小。

1
2
3

p { 
    font-size: 20px; 
}

px（像素）大小是我们网页的最常用的单位
谷歌浏览器默认的文字大小为16px
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
可以给 body 指定整个页面文字的大小

3.3 字体粗细

CSS 使用 font-weight 属性设置文本字体的粗细。

1
2
3

p { 
    font-weight: bold;
}

实际开发时，我们更喜欢用数字表示粗细。

3.4 文字样式

CSS 使用 font-style 属性设置文本的风格。

1
2
3

p { 
    font-style: normal;
}

注意： 平时我们很少给文字加斜体，反而要给斜体标签（em，i）改为不倾斜字体。

3.5 复合属性

字体属性可以把以上文字样式综合来写, 这样可以更节约代码：

1
2
3

body { 
    font: font-style font-weight font-size/line-height font-family; 
}

使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

代码示例

1
2
3

p {
    font: italic 700 16px 'Microsoft yahei';
}

4 文本属性

CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

4.1 文本颜色

color 属性用于定义文本的颜色。

1
2
3

div { 
    color: red;
}

开发中最常用的是十六进制。

4.2 对齐文本

text-align 属性用于设置元素内文本内容的水平对齐方式。注意不是将元素进行水平对齐。

1
2
3

div { 
    text-align: center;
}

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    h1 {
      /* 本质是让h1盒子中的文字水平居中对齐 */
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>居中对齐的标题</h1>
</body>
</html>

4.3 行间距

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离。

1
2
3

p { 
    line-height: 26px;
}

行间距（或称行高），有三部分组成：
- 文本自身的高度
- 上下相等的两个间距

5 引入方式

按照 CSS 样式书写的位置（或者引入的方式），CSS 样式表可以分为三大类：

行内样式表（行内式）
内部样式表（嵌入式）
外部样式表（链接式）

5.1 内部样式表

内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中。

<style>
    div {
        color: red;
        font-size: 12px;
    }
</style>

<style> 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的<head>标签中
通过此种方式，可以方便控制当前整个页面中的元素样式设置
代码结构清晰，但是并没有实现结构与样式完全分离
使用内部样式表设定 CSS，通常也被称为嵌入式引入，这种方式是我们练习时常用的方式

5.2 行内样式表

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式。

1	<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

style 其实就是标签的属性
在双引号中间，写法要符合 CSS 规范
可以控制当前的标签设置样式
由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
使用行内样式表设定 CSS，通常也被称为行内式引入

5.3 外部样式表

实际开发都是外部样式表. 适合于样式比较多的情况. 核心是：样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用。

引入外部样式表分为两步：

新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。
在 HTML 页面中，使用<link> 标签引入这个文件，包在<head>标签中。

1	<link rel="stylesheet" href="css文件路径">

使用外部样式表设定 CSS，通常也被称为外链式或链接式引入，这种方式是开发中常用的方式

6 Emmet语法

6.1 简介

Emmet语法的前身是Zen coding，它使用缩写来提高html和css的编写速度，Vscode内部已经集成了该语法。

首选项–>设置中：

6.2 生成html语法

!：生成html基本模板结构
生成标签直接输入标签名按tab即可
生成多个标签：div*3
1
2
3
<div></div>
<div></div>
<div></div>

父子关系标签：ul>li

ul>li

1
2
3

<ul>
    <li></li>
</ul>

ul>li*3

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

(ul>li)*3

<ul>
    <li></li>
</ul>
<ul>
    <li></li>
</ul>
<ul>
    <li></li>
</ul>

兄弟关系标签：div+p
生成带有类名或id的标签：.demo或#two
- p.demo
1
<p class="demo"></p>

生成有顺序类名的标签：$

div.demo$*5

<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>

在生成的标签内部写内容可以使用{}
- div{Hello World}
1
<div>Hello World</div>

6.3 生成css语法

使用缩写即可。

例如w100自动生成为width: 100px;，其余略。

6.4 格式化代码

7 复合选择器

7.1 简介

在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

复合选择器可以更准确、更高效的选择目标元素（标签）
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

7.2 后代选择器

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

语法

1	元素1 元素2 { 样式声明 }

上述语法表示选择元素 1 里面的**所有元素 2 (后代元素)**。

注意：
- 元素1 和元素2 中间用空格隔开
- 元素1 是父级，元素2 是子级，最终选择的是元素2
- 元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
- 元素1 和元素2 可以是任意基础选择器

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 选择ol下的li */
    ol li {
      color: pink;
    }
    ol li a {
      color: red;
    }
    .nav li {
      color: blue;
    }
    .nav li a {
      color: green;
    }
  </style>
</head>
<body>
  <ol>
    <li>我是ol的孩子</li>
    <li>我是ol的孩子</li>
    <li>我是ol的孩子</li>
    <li><a href="#">我是孙子</a></li>
  </ol>
  <ul class="nav">
    <li>我是ul的孩子</li>
    <li>我是ul的孩子</li>
    <li>我是ul的孩子</li>
    <li><a href="#">我是孙子</a></li>
  </ul>
</body>
</html>

7.3 子选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。

语法：

1	元素1 > 元素2 { 样式声明 }

上述语法表示选择元素1 里面的所有直接后代(子元素) 元素2。

注意：
- 元素1 和元素2 中间用 大于号 隔开
- 元素1 是父级，元素2 是子级，最终选择的是元素2
- 元素2 必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他亲儿子选择器

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .nav > a {
      color: red;
    }
  </style>
</head>
<body>
  <div class="nav">
    <a href="#">我是儿子</a>
    <p>
      <a href="#">我是孙子</a>
    </p>
  </div>
</body>
</html>

7.4 并集选择器

并集选择器可以选择多组标签, 同时为他们定义相同的样式。通常用于集体声明.

并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法

1	元素1,元素2 { 样式声明 }

上述语法表示选择元素1 和元素2。

注意：
- 元素1 和元素2 中间用逗号隔开
- 逗号可以理解为和的意思
- 并集选择器通常用于集体声明

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 并集选择器一般竖着写 */
    div, 
    p, 
    .pig li {
      color: pink;
    }
  </style>
</head>
<body>
  <div>熊大</div>
  <p>熊二</p>
  <span>光头强</span>
  <ul class="pig">
    <li>小猪佩奇</li>
    <li>猪爸爸</li>
    <li>猪妈妈</li>
  </ul>
</body>
</html>

7.5 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。

因为伪类选择器很多，比如有链接伪类、结构伪类等，所以这里先给大家讲解常用的链接伪类选择器。

7.5.1 链接伪类选择器

为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。
记忆法：love hate
因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

a:link /* 选择所有未被访问的链接 */
a:visited /* 选择所有已被访问的链接 */
a:hover /* 选择鼠标指针位于其上的链接 */
a:active /* 选择活动链接（鼠标按下未弹起的链接） */

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 选出未访问的链接 */
    a:link {
      color: #333;
      text-decoration: none;
    }
    /* 选出访问过的链接 */
    a:visited {
      color: orange;
    }
    /* 选择鼠标指针位于其上的链接 */
    a:hover {
      color: skyblue;
    }
    /* 选择活动链接 */
    a:active {
      color: green;
    }
  </style>
</head>
<body>
  <a href="#">小猪佩奇</a>
</body>
</html>

7.5.2 :focus 伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    input:focus {
      background-color: pink;
    }
  </style>
</head>
<body>
  <input type="text">
  <input type="text">
  <input type="text">
</body>
</html>

8 元素显示模式

8.1 概念

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

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

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

8.2 块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div> 标签是最典型的块元素。

特点：
- 比较霸道，自己独占一行。
- 高度，宽度、外边距以及内边距都可以控制。
- 宽度默认是容器（父级宽度）的100%。
- 是一个容器及盒子，里面可以放行内或者块级元素。
注意：
- 文字类的元素内不能使用块级元素
- <p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放<div>
- 同理， <h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

8.3 行内元素

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

特点：
- 相邻行内元素在一行上，一行可以显示多个。
- 高、宽直接设置是无效的。
- 默认宽度就是它本身内容的宽度。
- 行内元素只能容纳文本或其他行内元素（除了a标签）。
注意：
- 链接里面不能再放链接
- 特殊情况：链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全

8.4 行内块元素

在行内元素中有几个特殊的标签 —— <img/>、<input/>、<td>，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

特点：
- 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
- 默认宽度就是它本身内容的宽度（行内元素特点）。
- 高度，行高、外边距以及内边距都可以控制（块级元素特点）。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    input {
      width: 240px;
      height: 120px;
    }
  </style>
</head>
<body>
  <input type="text">
  <input type="text">
</body>
</html>

8.5 元素显示模式转换

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

使用display转换元素显示模式：
- 转换为块元素：display:block;
- 转换为行内元素：display:inline;
- 转换为行内块：display: inline-block;

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    a {
      width: 150px;
      height: 50px;
      background-color: pink;
      /* 转换成块元素 */
      display: block;
    }
    div {
      /* 此时高宽的设置无效 */
      width: 300px;
      height: 100px;
      background-color: purple;
      /* 转换成行内元素 */
      display: inline;
    }
  </style>
</head>
<body>
  <a href="#">一个链接</a>
  <a href="#">一个链接</a>
  <div>我是块级元素</div>
  <div>我是块级元素</div>
</body>
</html>

小案例——简单的侧边栏实现

案例的核心思路分为两步:

把链接a 转换为块级元素, 这样链接就可以单独占一行,并且有宽度和高度.
鼠标经过a 给链接设置背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    a {
      width: 230px;
      height: 40px;
      background-color: #55585a;
      display: block;
      font-size: 14px;
      color: white;
      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>

单行文字垂直居中的原理

简单理解: 行高的上空隙和下空隙把文字挤到中间了. 是如果行高小于盒子高度,文字会偏上,如果行高大于盒子高度,则文字偏下。

9 背景

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

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

9.1 背景颜色

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

1	background-color:颜色值;

一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色。

9.2 背景图片

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

1	background-image : none \| url (url)

注意：背景图片后面的地址，千万不要忘记加 URL，同时里面的路径不要加引号。

9.3 背景平铺

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

1	background-repeat: repeat \| no-repeat \| repeat-x \| repeat-y

9.4 背景图片位置

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

1	background-position: x y;

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

参数是方位名词
- 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
- 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
参数是精确单位
- 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
- 如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
参数是混合单位
- 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

9.5 背景图像固定

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。后期可以制作视差滚动的效果。

1	background-attachment : scroll \| fixed

9.6 复合写法

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

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

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

1	background: transparent url(image.jpg) repeat-y fixed top ;

9.7 综合案例

导航栏：

链接属于行内元素, 但是此时需要宽度高度,因此需要模式转换.
里面文字需要水平居中和垂直居中. 因此需要单行文字垂直居中的代码.
链接里面需要设置背景图片.因此需要用到背景的相关属性设置.
鼠标经过变化背景图片,因此需要用到链接伪类选择器.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .nav a {
      display: inline-block;
      width: 120px;
      height: 58px;
      background-color: red;
      text-align: center;
      line-height: 48px;
      text-decoration: none;
      color: white;
    }

    .nav .bg1 {
      background: url(./imgs/bg1.png) no-repeat;
    }

    .nav .bg1:hover {
      background-image: url(./imgs/bg11.png);
    }

    .nav .bg2 {
      background: url(./imgs/bg2.png) no-repeat;
    }

    .nav .bg2:hover {
      background-image: url(./imgs/bg22.png);
    }
  </style>
</head>
<body>
  <div class="nav">
    <a href="#" class="bg1">五彩导航</a>
    <a href="#" class="bg2">五彩导航</a>
  </div>
</body>
</html>

10 三大特性

CSS 有三个非常重要的三个特性：层叠性、继承性、优先级。

10.1 层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。

层叠性原则：
- 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
- 样式不冲突，不会层叠
- CSS 层叠性口诀：长江后浪推前浪，前浪死在沙滩上。

10.2 继承性

CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是：子承父业。

恰当地使用继承可以简化代码，降低 CSS 样式的复杂性
子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

行高的继承性

1
2
3

body {
 font:12px/1.5 Microsoft YaHei; 
}

行高可以跟单位也可以不跟单位
如果子元素没有设置行高，则会继承父元素的行高为 1.5
此时子元素的行高是：当前子元素的文字大小 * 1.5
body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

10.3 优先级

当同一个元素指定多个选择器，就会有优先级的产生。

选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行。选择器权重如下表所示：

1
2
3

div {
    color: pink!important; /* 最高优先级 */
}

注意：
- 权重是有4组数字组成,但是不会有进位。
- 可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推..
- 等级判断从左向右，如果某一位数值相同，则判断下一位数值。
- 可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为1000, !important 无穷大.
- 继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0。
权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。
- div ul li ——> 0,0,0,3
- .nav ul li ——> 0,0,1,2
- a:hover ——-> 0,0,1,1
- .nav a ——> 0,0,1,1

11 盒子模型

页面布局要学习三大核心, 盒子模型, 浮动和定位. 学习好盒子模型能非常好的帮助我们布局页面.

11.1 本质

网页布局过程：
- 先准备好相关的网页元素，网页元素基本都是盒子 Box 。
- 利用 CSS 设置好盒子样式，然后摆放到相应位置。
- 往盒子里面装内容.
网页布局的核心本质：就是利用 CSS 摆盒子。

11.2 组成

盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，由外向内它包括：外边距、边框、内边距、和实际内容。

11.3 边框

border可以设置元素的边框。边框有三部分组成：边框宽度(粗细) 边框样式边框颜色。

语法：

1	border : border-width \|\| border-style \|\| border-color

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div {
      width: 300px;
      height: 200px;
      border-width: 5px;
      border-style: solid;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

边框会额外增加盒子的实际大小。因此我们有两种方案解决:

测量盒子大小的时候,不量边框
如果测量的时候包含了边框,则需要 width/height 减去边框宽度

11.4 内边距

padding 属性用于设置内边距，即边框border与内容content之间的距离。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
      padding-left: 20px;
      padding-top: 30px;
    }
  </style>
</head>
<body>
  <div>
    盒子内容是content盒子内容是content盒子内容是content盒子内容是content
  </div>
</body>
</html>

当我们给盒子指定 padding 值之后，发生了 2 件事情：

内容和边框有了距离，添加了内边距。
padding影响了盒子实际大小。

也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

div {
    width: 200px;
    height: 200px;
    background-color: pink;
    padding: 40px;
}

未添加padding之前的盒子大小：

添加内边距之后的盒子大小：

如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

案例：新浪导航栏

11.5 外边距

margin 属性用于设置外边距，即控制盒子和盒子之间的距离。

11.5.1 水平居中

外边距可以让块级盒子水平居中，但是必须满足两个条件：

盒子必须指定了宽度（width）。
盒子左右的外边距都设置为 auto 。

.header {
  width:960px; 
  margin:0 auto;
}

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      margin: 0 auto;
      background-color: red;
      text-align: center;
    }
  </style>
</head>
<body>
  <div>我是一个块级盒子</div>
</body>
</html>

11.5.2 外边距合并

使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。

相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

解决：尽量只给一个盒子添加 margin 值。

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

11.5.3 清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

* {
  padding:0; /* 清除内边距 */
  margin:0; /* 清除外边距 */
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。

11.6 圆角边框

在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。

border-radius 属性用于设置元素的外边框圆角。

12 浮动

CSS 提供了三种传统布局方式（简单说，就是盒子如何进行排列顺序）：

普通流（标准流）
浮动
定位

12.1 标准流

所谓的标准流：就是标签按照规定好默认方式排列。

块级元素会独占一行，从上向下顺序排列。
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。

12.2 浮动

12.2.1 简介

有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。

浮动最典型的应用：可以让多个块级元素一行内排列显示

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

1
2
3

选择器 { 
  float: 属性值; 
}

12.2.2 浮动特性

脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标）：浮动的盒子不再保留原先的位置。

例如：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .box1 {
        width: 200px;
        height: 200px;
        background-color: pink;
        float: left;
      }
      .box2 {
        width: 300px;
        height: 300px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="box1">浮动的盒子</div>
    <div class="box2">标准流的盒子</div>
  </body>
</html>

如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。

注意： 浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

浮动元素会具有行内块元素特性。

12.2.3 浮动元素和标准流父级搭配使用

为了约束浮动元素位置，我们网页布局一般采取的策略是：

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .box {
        width: 1200px;
        height: 460px;
        background-color: pink;
        margin: 0 auto;
      }
      .left {
        width: 230px;
        height: 460px;
        background-color: purple;
        float: left;
      }
      .right {
        width: 970px;
        height: 460px;
        float: right;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="left">左侧</div>
      <div class="right">右侧</div>
    </div>
  </body>
</html>

网页布局第二准侧：先设置盒子的大小，之后设置盒子的位置。

12.3 常见网页布局

暂略。

浮动布局注意点：

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。

12.4 清除浮动

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。

清除浮动的本质是清除浮动元素造成的影响。如果父盒子本身有高度，则不需要清除浮动。

清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

1
2
3

选择器 {
  clear:属性值;
}

实际工作中，几乎只用 clear: both;。清除浮动主要有四种方法，见下。

12.4.1 额外标签法

额外标签法也称为隔墙法，是 W3C 推荐的做法。

额外标签法会在浮动元素末尾添加一个空的标签。例如 <div style="clear:both"></div>，或者其他标签（如<br/>等）

优点：通俗易懂，书写方便

缺点：添加许多无意义的标签，结构化较差

注意：要求这个新的空标签必须是块级元素。

示例

未加标签前：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .box {
        width: 1000px;
        margin: 0 auto;
        background-color: black;
      }
      .damao {
        float: left;
        width: 300px;
        height: 300px;
        background-color: pink;
      }
      .ermao {
        float: left;
        width: 200px;
        height: 200px;
        background-color: blue;
      }
      .footer {
        width: 1200px;
        height: 200px;
        margin: 0 auto;
        background-color: red;
      }

    </style>
  </head>
  <body>
    <div class="box">
      <div class="damao">大毛</div>
      <div class="ermao">二毛</div>
    </div>
    <div class="footer">footer</div>
  </body>
</html>

加上额外标签后：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .box {
        width: 1000px;
        margin: 0 auto;
        background-color: black;
      }
      .damao {
        float: left;
        width: 300px;
        height: 300px;
        background-color: pink;
      }
      .ermao {
        float: left;
        width: 200px;
        height: 200px;
        background-color: blue;
      }
      .footer {
        width: 1200px;
        height: 200px;
        margin: 0 auto;
        background-color: red;
      }
      .clear {
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="damao">大毛</div>
      <div class="ermao">二毛</div>
      <div class="clear"></div>
    </div>
    <div class="footer">footer</div>
  </body>
</html>

12.4.2 overflow

可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll。

优点：代码简洁

缺点：无法显示溢出的部分

示例

.box {
  width: 1000px;
  margin: 0 auto;
  background-color: black;
  /* 清除浮动 */
  overflow: hidden;
}

12.4.3 :after 伪元素法

:after 方式是额外标签法的升级版。也是给父元素添加。

.clearfix:after { 
  content: ""; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
} 
.clearfix { /* IE6、7 专有 */ 
  *zoom: 1;
}

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .clearfix:after { 
        content: ""; 
        display: block; 
        height: 0; 
        clear: both; 
        visibility: hidden; 
      }
      .box {
        width: 1000px;
        margin: 0 auto;
        background-color: black;
      }
      .damao {
        float: left;
        width: 300px;
        height: 300px;
        background-color: pink;
      }
      .ermao {
        float: left;
        width: 200px;
        height: 200px;
        background-color: blue;
      }
      .footer {
        width: 1200px;
        height: 200px;
        margin: 0 auto;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="box clearfix">
      <div class="damao">大毛</div>
      <div class="ermao">二毛</div>
    </div>
    <div class="footer">footer</div>
  </body>
</html>

优点：没有增加标签，结构更简单

缺点：照顾低版本浏览器

代表网站：百度、淘宝网、网易等

12.4.4 双伪元素清除浮动

也是给给父元素添加：

.clearfix:before,.clearfix:after {
  content:"";
  display:table; 
}
.clearfix:after {
  clear:both;
}
.clearfix {
  *zoom:1;
}

12.4.5 总结

为什么需要清除浮动？

父级没高度。
子盒子浮动了。
影响下面布局了，我们就应该清除浮动了。

12.5 css书写顺序

建议遵循以下顺序：

布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

13 定位

13.1 为什么需要定位

以下情况使用标准流或者浮动能实现吗？

某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子
当我们滚动窗口的时候，盒子是固定屏幕某个位置的。

以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。总结：

浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。

定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

13.2 定位组成

定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子。

定位 = 定位模式 + 边偏移。

定位模式用于指定一个元素在文档中的定位方式。
边偏移则决定了该元素的最终位置。

定位模式决定元素的定位方式，它通过 CSS 的 position 属性来设置，其值可以分为四个：

边偏移就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。

13.3 静态定位

了解

13.4 相对定位

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）。

1
2
3

选择器 { 
  position: relative; 
}

相对定位的特点：

它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标）。

相对定位

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>相对定位</title>
    <style>
      .box1 {
        position: relative;
        top: 100px;
        left: 100px;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
      .box2 {
        width: 200px;
        height: 200px;
        background-color: deeppink;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>
</html>

13.5 绝对定位

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。

1
2
3

选择器 { 
  position: absolute; 
}

绝对定位的特点：

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）。
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
绝对定位不再占有原先的位置。（脱标）所以绝对定位是脱离标准流的。

绝对定位-父级无定位

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绝对定位-无父亲或者父亲无定位</title>
    <style>
      .father {
        width: 500px;
        height: 500px;
        background-color: skyblue;
      }
      .son {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son"></div>
    </div>
  </body>
</html>

绝对定位-父级有定位

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绝对定位-父级有定位</title>
    <style>
      .yeye { /* 祖先元素有定位 */
        position: relative;
        width: 800px;
        height: 800px;
        background-color: hotpink;
        padding: 50px;
      }
      .father { /* 父级元素无定位 */
        width: 500px;
        height: 500px;
        background-color: skyblue;
      }
      .son {
        position: absolute;
        left: 30px;
        bottom: 10px;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="yeye">
      <div class="father">
        <div class="son"></div>
      </div>
    </div>
  </body>
</html>

13.6 子绝父相

子级是绝对定位的话，父级要用相对定位。

子级绝对定位，不会占有位置（脱标），可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
父盒子需要加定位限制子盒子在父盒子内显示。
父盒子布局时，需要占有位置（不脱标），因此父亲只能是相对定位。

13.7 固定定位

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

固定定位的特点：

以浏览器的可视窗口为参照点移动元素。
- 跟父元素没有任何关系
- 不随滚动条滚动。
固定定位不在占有原先的位置。

固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>固定定位</title>
    <style>
        .dj {
            position: fixed;
            top: 100px;
            left: 40px;
        }
    </style>
</head>
<body>
    <div class="dj">
        <img src="images/pvp.png" alt="">
    </div>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
</body>
</html>

固定定位小技巧：固定在版心右侧位置。

小算法：

让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心）的一半位置。
让固定定位的盒子 margin-left: 版心宽度的一半距离。多走版心宽度的一半位置

就可以让固定定位的盒子贴着版心右侧对齐了。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>固定定位小技巧-固定到版心右侧</title>
    <style>
      .w {
        width: 800px;
        height: 1400px;
        background-color: pink;
        margin: 0 auto;
      }
      .fixed {
        position: fixed;
        /* 1. 走浏览器宽度的一半 */
        left: 50%;
        /* 2. 利用margin 走版心盒子宽度的一半距离 */
        margin-left: 405px;
        width: 50px;
        height: 150px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div class="fixed"></div>
    <div class="w">版心盒子 800像素</div>
  </body>
</html>

13.8 定位叠放次序

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)。

1
2
3

选择器 { 
  z-index: 1; 
}

数值可以是正整数、负整数或 0，默认是 auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上
数字后面不能加单位
只有定位的盒子才有 z-index 属性

定位堆叠顺序

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>定位的堆叠顺序</title>
    <style>
      .box {
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 200px;
      }
      .xiongda {
        background-color: red;
        z-index: 1;
      }
      .xionger {
        background-color: green;
        left: 50px;
        top: 50px;
        z-index: 2;
      }
      .qiangge {
        background-color:blue;
        left: 100px;
        top: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box xiongda">熊大</div>
    <div class="box xionger">熊二</div>
    <div class="box qiangge">光头强</div>
  </body>
</html>

13.9 定位的拓展

绝对定位的盒子居中

加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。

left: 50%;：让盒子的左侧移动到父级元素的水平中心位置。
margin-left: -100px;：让盒子向左移动自身宽度的一半。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绝对定位水平垂直居中</title>
    <style>
      .box {
        position: absolute;
        /* 1. left 走 50%  父容器宽度的一半 */
        left: 50%;
        /* 2. margin 负值 往左边走 自己盒子宽度的一半 */
        margin-left: -100px;
        top: 50%;
        margin-top: -100px;
        width: 200px;
        height: 200px;
        background-color: pink;
        /* margin: auto; */
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

定位特殊特性

绝对定位和固定定位也和浮动类似。

行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。

13.10 网页布局总结

通过盒子模型，清楚知道大部分html标签是一个盒子。

通过CSS浮动、定位可以让每个盒子排列成为网页。

一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。

标准流：可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。
浮动：可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。
定位：定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局

14 元素的显示与隐藏

本质：让一个元素在页面中隐藏或者显示出来。

display 显示隐藏
visibility 显示隐藏
overflow 溢出显示隐藏

14.1 display

display 属性用于设置一个元素应如何显示。

display:none;隐藏对象
display:block;除了转换为块级元素之外，同时还有显示元素的意思

display 隐藏元素后，不再占有原来的位置。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>显示隐藏元素之display</title>
    <style>
      .peppa {
        display: none;
        /* display: block; */
        width: 200px;
        height: 200px;
        background-color: pink;

      }
      .george {
        width: 200px;
        height: 200px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div class="peppa">佩奇</div>
    <div class="george">乔治</div>
  </body>
</html>

14.2 visibility

visibility 属性用于指定一个元素应可见还是隐藏。

visibility:visible; 元素可视
visibility:hidden; 元素隐藏

visibility 隐藏元素后，继续占有原来的位置。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>显示隐藏元素之display</title>
    <style>
      .baba {
        visibility: hidden;
        width: 200px;
        height: 200px;
        background-color: pink;

      }
      .mama {
        width: 200px;
        height: 200px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div class="baba">猪爸爸</div>
    <div class="mama">猪妈妈</div>
  </body>
</html>

14.3 overflow

overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。默认值为visible

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>显示隐藏元素之overflow</title>
    <style>
      .peppa {
        /* overflow: visible; */
        /* overflow: hidden; */
        /* scroll 溢出的部分显示滚动条  不溢出也显示滚动条 */
        /* overflow: scroll; */
        /* auto 溢出的时候才显示滚动条 不溢出不显示滚动条 */
        overflow: auto;
        width: 200px;
        height: 200px;
        border: 3px solid pink;
        margin: 100px auto;
      }
    </style>
  </head>
  <body>
    <div class="peppa">
      《小猪佩奇》，又名《粉红猪小妹》（台湾名为粉红猪），英文名为《Peppa
      Pig》，是由英国人阿斯特利（Astley）、贝克（Baker）、《小猪佩奇》，又名《粉红猪小妹》（台湾名为粉红猪），英文名为《Peppa
      Pig》，是由英国人阿斯特利（Astley）、贝克（Baker）、《小猪佩奇》，又名《粉红猪小妹》（台湾名为粉红猪），英文名为《Peppa
      Pig》，是由英国人阿斯特利（Astley）、贝克（Baker）、《小猪佩奇》，又名《粉红猪小妹》（台湾名为粉红猪），英文名为《Peppa
      Pig》，是由英国人阿斯特利（Astley）、贝克（Baker）、
    </div>
  </body>
</html>

14.4 遮罩层示例

核心原理：原先半透明的黑色遮罩看不见，鼠标经过大盒子，就显示出来。

遮罩的盒子不占有位置，就需要用绝对定位和 display 配合使用。

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>仿土豆网显示隐藏遮罩案例</title>
    <style>
      .tudou {
        position: relative;
        width: 444px;
        height: 320px;
        background-color: pink;
        margin: 30px auto;
      }
      .tudou img {
        width: 100%;
        height: 100%;
      }
      .mask {
        /* 隐藏遮罩层 */
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
      }
      /* 当我们鼠标经过了 土豆这个盒子，就让里面遮罩层显示出来 */
      .tudou:hover .mask {
        /* 而是显示元素 */
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="tudou">
      <div class="mask"></div>
      <img src="images/tudou.jpg" alt="">
    </div>
  </body>
</html>