第5章 CSS3层叠样式表基础
5.1 盒模型
CSS进行页面布局时，都离不开盒模型。怎么理解盒模型呢？其实CSS中每个HTML元素都可以看成是被盒子包围起来的，也就是所谓的盒模型。
- 5.1.1 盒模型概述
- 5.1.2 在浏览器中查看盒模型
5.1.1 盒模型概述
盒模型是CSS中最重要的概念之一。每个盒子可以看成是四部分组成的：margin（外边距）、border（边框）、padding（内边距）、content（内容）。
margin是整个盒子的最外层区域，是盒子和其他元素之间的区域，外边距大小可以通过margin属性来设置。border包裹着盒子的内边距和其中的内容，边框大小通过border属性设置。padding是内容和边框之间的空白区域，内边距的大小通过padding属性改变。content是用于显示内容的区域，content大小由width和height属性设置。四个区域的排布如下图:
5.1.2 在浏览器中查看盒模型
从5.1.1小节，可以了解到每个HTML元素都是可以看成是在一个盒子中的。因此，可以在浏览器中打开任意一个网页，都可以看到盒模型的展示。
通过点击键盘上的F12，或者右键点击想要查看的HTML元素并在下拉列表中点击“检查”即可查看到HTML元素，此时在Styles标签页，可以查看盒模型。
5.2 CSS选择器
CSS选择器可以通过指定的方式选择HTML元素，并可以为选择的元素设置CSS属性值。本节主要介绍几种常用的选择器。
- 5.2.1 通过ID选择
- 5.2.2 通过class选择
- 5.2.3 通过标签名选择
- 5.2.4 通过属性选择
- 5.2.5 选择器组合
5.2.1 通过ID选择
ID选择器可以通过ID选择HTML元素，并为其指定样式。ID具有唯一性，每个ID在同一页面中只能被用到一次。虽然对于CSS 选择器而言，似乎没有ID唯一性的限制，但对于js来说，多个有相同ID的HTML元素，它只选择第一次出现的元素。
5.2.2 通过class选择
类选择器会通过class选择HTML元素，为所有应用了该类名的元素设置样式。
5.2.3 通过标签名选择
标签名选择器，也可以叫元素选择器，可以根据HTML元素类型选择特定的元素。
5.2.4 通过属性选择
属性选择器可以为元素指定的属性或属性值来设置样式。只需要使用中括号“[]”将属性或连同属性值括起来，即是属性选择器。
5.2.5 选择器组合
一般来说，一个页面的HTML元素多是嵌套的，所以单一的CSS选择器，并不能灵活的选择页面中的元素。因此，我们需要将选择器 组合起来使用。
常见的组合选择器有：后代选择器、子元素选择器、相邻兄弟选择器、普通兄弟选择器。
下面我们将使用这个例子来展示这几个组合选择器的用法及效果。
选择器示例
此处为ID选择器的展示示例！
span标签1
此处为类选择器的展示示例。
此处为示例2
span标签2
后代选择器，用于选择HTML元素的后代元素。只需要将两个基本选择器之间用空格隔开，表示选择第一个选择器下面所有符合第二个选择器的元素。例如，可以通过div .test选取上例中的div标签下所有class=”test”的元素。
div .test { color: red; }
效果如下图，div下所有class=”test”的元素字体均改变为红色。点击查看代码
5.3 边距与边框
通过5.1盒模型的介绍，可以从中了解到边框与内外边距。本小节将更详细的介绍这些属性。
- 5.3.1 通过margin设置外边距
- 5.3.2 通过padding设置内边距
- 5.3.3 通过border设置边框
5.3.1 通过margin设置外边距
margin可以用于设置盒模型周围和其它HTML元素之间的间距。因此外边距可以为正值、0，甚至可以设置为负值，但如果设置为负值的话，有可能会使不同元素的内容重叠。
可以使用margin属性来设置外边距，或者使用margin-top、margin-right、margin-bottom、margin-left来分别设置上、右、下、左四个方向的外边距。
下面使用后者这种方式，设置外边距，并将margin-left设置成负值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.test {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: -5px;
}
</style>
</head>
<body>
<div>
此处为外边距的展示示例。
</div>
</div>
</body>
</html>
通过这个例子，可以看到如图5.8，content区域相对于橙色区域左移了一部分，这也就是border-left为负值时，页面上的效果展示。
5.3.2 通过padding设置内边距
padding内边距位于content和border之间，用于设置内边距。但内边距和外边距不同的是，内边距只能设置成正值和0，不能被设置成负值。
和margin类似，我们可以通过padding简化属性同时设置四条内边距，或者使用padding-top、padding-right、padding-bottom、padding-left分别设置内边距
5.3.3 通过border设置边框
border是盒子的边框。和内外边距类似，可以直接使用border属性来设置四条边框的宽度、样式和颜色，或者使用border-top、border-right、border-bottom、border-left分别设置四条边框的属性。
例如，可以使用下面这种方式为元素设置border。
.test { border: 10px red solid; }
在浏览器中，将会看到content被width为10px且红色的实线框包围着，这也就是border。而且通过控制台，可以发现这样的简写属性，可以细分成诸多属性，也可以使用这些细化后的属性为不同的边框分别设置不同的样式等。
5.4 元素大小
从前几节的示例中，应该对元素大小有所了解。元素大小，比如字体大小、图片大小等，其实是网页中比较常见的。本节将具体介绍元素尺寸的设置方法。
- 5.4.1 原始尺寸
- 5.4.2 固定尺寸
- 5.4.3 适应元素内容
- 5.4.4 继承父元素
5.4.1 原始尺寸
不受CSS影响之前，每个HTML元素都有自己的原始尺寸。原始尺寸往往是由包含的内容决定的，即受到内容的大小影响。
最直观的例子，可以将一个图片嵌入到网页中元素中，就可以很清晰的看到元素大小和图片大小的关系。例如，将名为“自然风景1.jpg”且分辨率为1706×1280px的图片嵌入网页中，可以在控制台看到
元素的大小也是1706×1280px，如下图所示。
5.4.2 固定尺寸
显然，在5.4.1的例子中，由于图片比浏览器的尺寸要大，因此直接将图片嵌入到网页中，图片显然不能在一个屏幕中全部显示，用户需要拖动鼠标才能看到整个图片的全貌。这时，就需要给元素设置一个合适的大小，让用户在一个屏幕内就能看到整张图片，也就是给元素指定固定的尺寸。
例如，给元素的宽度和高度分别设置成960px和720px。
img { width: 960px; height: 720px; }
此时，打开浏览器，就可以看到整张图片的全貌了。
5.4.3 适应元素内容
针对由于设定的固定尺寸不合适导致了内容溢出的问题。将5.3.2小节中的padding合理利用起来，即可解决内容溢出问题。
例如，可以给元素设置四个内边距。
.test1 { width: 96px; padding: 10px 5px; border: 10px solid red; }
下图展示了元素尺寸适应了元素内容，这样就可以实现无论内容多少，都不会存在溢出的问题。
5.4.4 继承父元素
还有一种常见的元素尺寸设置方法，将元素的宽度和高度设置成百分数的形式。这种方式其实就是基于父元素，也就是元素的宽度和高度分别是父元素的宽度和高度的百分数。
在5.4.2小节中第二个例子，并为两个<div>元素设置大小及样式。
.test0 { width:1000px; border: 10px dashed blue; }
.test1 { width: 75%; padding: 10px 5px; border: 10px solid red; }
如下图可以看到将内层的<div>的宽度设置成了75%，也就是说这个宽度是外层<div>元素的75%。
5.5 定位方式
定位是改变页面中盒子位置的工具。本节将介绍两种常用的定位方式。
- 5.5.1 相对定位
- 5.5.2 绝对定位
- 5.5.3 固定定位
5.5.1 相对定位
相对定位和静态定位非常相似。相对定位的元素依然会占据文档布局流中，但可以改变它的最终位置，这个元素也可以和其它元素重叠。相对定位需要更新代码中的position属性为relative，如下。
position: relative;
另外，只修改position属性，元素显然不会有任何变化。除此之外，还需要配合top、right、bottom、left属性同时使用，这四个属性用于指明元素相对于父元素的偏移量。例如，5.4.4小节中的例子，将其中的内层<div>元素设置为相对定位，并且为其设置相对位置。
.test1 { position: relative; top:50px; left: 100px; width: 75%; padding: 10px
5px; border: 10px solid red; }
从下图可以看出设置的相对定位以及顶部偏移50px、左部偏移100px。
5.5.2 绝对定位
绝对定位和相对定位类似，也是相对于父元素的位置。但与相对位置不同的是，设置了绝对定位的元素在文档布局流中不存在了，并 不会占用布局流中的位置。
因此，如果把5.5.1的例子中相对定位改为绝对定位，其它属性不变。
position: absolute;
浏览器中就会出现一种奇怪的现象。内层的<div>元素依然相对于外层<div>有一定的偏移量，但外层的<div>元素居然变成了一条 点线，而不是原本的长方形框了。这也就是绝对定位的魅力。可以使用绝对定位方式创建弹出信息框等可以独立于其它元素的功能。
5.5.3 固定定位
固定定位是参照窗口定位元素位置，元素完全脱离文档流，且不会随页面滚动移动。适合对于导航栏或者页面工具组件使用，比如回到顶部等功能 按钮。如下代码实现了固定定位。
position: fixed;
5.6 小结
本章主要介绍了CSS3层叠样式表，同时介绍了CSS中最重要的概念之一——盒模型。除此之外，还以丰富的案例介绍了CSS中的一些构建基础和排版 布局。
学习CSS层叠样式表之前，首先需要了解盒模型，只有清楚的掌握了盒模型，才能更好的理解后面学习到的选择器、边距边框等知识。
通过学习几种常见CSS选择器以及普遍用到的选择器组合，可以更加灵活的为某些元素设置样式、定位位置。内外边距和边框的学习，是盒模型的 延伸，通过对盒模型中基本要素的了解，可以设计实现元素在页面中的布局。元素尺寸是元素的固有属性，几种常见的元素大小设置方法，是CSS 的基础。不同的定位方式，可以让页面的表现形式更丰富。
5.7 课堂练习——使用CSS3制作动态导航菜单
本节的课堂练习将结合本章内容，从静态框架开始，到如何使用CSS3设计和制作动态导航菜单。
- 5.7.1 静态框架
- 5.7.2 使用CSS3美化
- 5.7.3 使用CSS3实现动态效果
5.7.1 静态框架
导航菜单几乎在每个网站上都会出现，导航栏的作用主要是能帮助用户快速上手使用网站。因此，在设计自己的个人网站时，一个清晰的导航栏 是很重要的。
常见的导航栏主要是由多层无序列表组成的，也就是由<ul>、<li>嵌套组合成的。
新建文本文档，写入下面的内容并保存，这样就创建了一个静态的导航栏
导航栏
设计了一个有四个菜单的导航栏，并且其中一个菜单下还有子菜单。在HTML中体现出来就是由多个<ul>和<li>嵌套完成的。
在浏览器中打开后，会显示一个静态的导航栏页面，如下图
5.7.2 使用CSS3美化
从5.7.1小节中，可以看到静态导航栏有一些可以改进的地方，一是列表项前面的黑点需要去掉，二是链接下面的横线不需要展示，三要把 列表变成横向排列的，以节省屏幕空间。除此之外，可以改变字体、间距等样式。
首先，将列表前的黑点去掉。
li {
list-style: none;
}
然后，将列表改变成横向排布，并增加大小和间距的设置。
.navigation {
display: flex;
height: 100%;
line-height: 50px;
max-width: 600px;
padding: 0 20px;
}
然后是去掉链接的下划线。
a {
text-decoration: none;
}
最后设置背景颜色为蓝色，字体颜色为白色，并增加宽度和高度等。
.menu {
background-color: rgb(14, 4, 108);
width: 100%;
height: 50px;
}
.navigation li {
height: 100%;
}
.navigation li a {
font: 16px;
color: white;
padding: 30px 30px;
}
.navigation li ul li {
padding: 0 0.5em;
background: rgb(14, 4, 108);
text-align: center;
}
添加这些CSS后页面的效果如图
5.7.3 使用CSS3实现动态效果
希望子列表只有在鼠标滑到该列表时才会显示
接下来，给子列表设置鼠标滑过动画。
.navigation li ul {
display: none;
position: absolute;
}
.navigation li:hover .frontsubbar {
display: block;
}
.navigation li ul是没有鼠标滑过时的效果，display为none，即不会被显示。当鼠标滑过，display属性变为block，菜单就被 显示了出来。
最后，为每个元素设置样式，让整个导航栏看起来更加清晰美观。整个CSS样式如下。
*{
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.navigation {
display: flex;
height: 100%;
line-height: 50px;
max-width: 600px;
padding: 0 20px;
}
a {
text-decoration: none;
}
.menu {
background-color: rgb(14, 4, 108);
width: 100%;
height: 50px;
}
.navigation li {
height: 100%;
}
.navigation li:hover {
background: rgb(51, 100, 148);
}
.navigation li a {
font: 16px;
color: white;
padding: 30px 30px;
}
.navigation li ul {
display: none;
position: absolute;
}
.navigation li ul li {
padding: 0 0.5em;
background: rgb(14, 4, 108);
text-align: center;
}
.navigation li:hover .frontsubbar {
display: block;
}
最终的实现效果如图
