页面布局
-
盒模型
文档中的每一元素都被认为是一个矩形盒子。如下图所示，盒子是由内容区以及围绕着内容区的内边距、边框以及外边距组成。这就是所谓的盒模型。 
内容
内容区由文本和其它诸如图像、段落、标题、列表之类的网页元素组成。页面上元素的可见宽度为内容、内边距和边框三者宽度的总和。当然，width属性仅设置了内容的实际宽度；它并不包括内边距、边框或外边框。 内边距
内边距（Padding）指内容和边框之间的区域。默认的内边距值为0。某个元素的背景属性对内边距与内容区域而言是一致的。我们使用padding属性来设置元素的内边距。 边框
边框是位于内边距与外边距之间的区域。默认的边框值为0，也即不显示边框。我们使用border属性来设置元素的边框。 外边距
外边距（Margin）是指元素和相邻元素之间的空白区域。 Margin属性
我们用margin属性来设置某个元素各个方向上的外边距。这一区域总是透明的，显示的是网页或父元素的背景色。对于网页文档以及特定的如段落、标题、表单等元素，浏览器自带默认的外边距值。指定margin属性就能覆盖默认值。 外边距的值是数值类型，单位为px或em。将其设置为0（无单位），外边距就消失了。设置为auto，将由浏览器计算决定外边距值。下标列出了配置外边距的各种CSS属性：
| 属性 |
简介与常用值 |
| margin |
配置元素周围外边距的简化写法
数字值（单位为px或em）或百分比；例如margin: 10px;
值为auto时浏览器自动计算元素的外边距,
两个数字值（单位为px或em）或百分比：第一个值指定顶底外边距，第二个值指定左右外边距。例如margin: 20px 10px;
三个数字值（单位为px或em）或百分比：第一个值指定顶部外边距，第二个值指定左右外边距，第三个值指定底部外边距。例如margin: 10px 20px 5px;
四个数字值（单位为px或em）或百分比时按一下顺序设置各外边距：顶部、右侧、底部、左侧。例如margin: 10px 30px 20px 5px; |
| margin-bottom |
底部外边距，数字值（单位为px或em）、百分比或auto |
| margin-left |
左侧外边距，数字值（单位为px或em）、百分比或auto |
| margin-right |
右侧外边距，数字值（单位为px或em）、百分比或auto |
| margin-top |
顶部外边距，数字值（单位为px或em）、百分比或auto |
-
正常流
浏览器根据.html文档中的顺序逐行呈现网页代码。该过程称为正常流（normal flow）。
-
CSS浮动
元素在浏览器窗口或另一个元素的左右侧浮动的效果通常是利用float属性来实现的。浏览器先使用正常流来呈现这些元素，然后将它们尽可能移动到容器（通常是浏览器窗口或一个div元素）的最左侧或最右侧。
- 使用float:right;将元素浮动到容器的右侧。
- 使用float:left;将元素浮动到容器的左侧。
- 指定一个被浮动元素的宽度，除非该元素已经有了隐式的宽度，如img元素。
- 其他元素和网页内容将围绕被浮动元素流动。
在浮动一张图片时，外边距属性(margin)可用来配置页面上的图像与文本间的空白距离。
-
CSS：清除浮动
clear属性
clear属性通常用来中止或清除浮动效果。你可以将该属性的值设置为left、right或both。
我们可以使用换行元素来清除浮动，示例代码如下：
.clearleft {clear: left;}
<div>
<img class="clearleft" src="yls.jpg" alt="Yellow Lady Slipper" height="100" width="100">
<p>your word here!</p>
<br class="clearleft">
</div>
如果你不介意浅色背景的显示效果，另一种不用换行标签的方法是将clearleft类分配给h2元素。
overflow属性
overflow属性常用于去除浮动效果，虽然设计它的预期目的是为了指定内容比所分配的区域大很多的显示方式。下表列出了常用属性值：
| 取值 |
用途 |
| visible |
默认值。内容被显示，如果过大就会呈现在元素框之外 |
| hidden |
内容会被修剪，并且其余内容是不可见的 |
| auto |
内容会充满预分配给他的区域。如果被修剪，则浏览器会显示滚动条以便查看其余内容 |
| scroll |
内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 |
-
无序列表中的超链接
下表展示了有序列表和无序列表中项目符号的CSS属性。
| 属性 |
描述 |
取值 |
项目符号显示 |
| list-style-type |
配置列表标记的样式 |
none
disc
circle
square
decimal
upper-alpha
lower-alpha
lower-roman |
无
实心圆
空心圆
实心方块
数字
大写字母
小写字母
小写罗马数字 |
| list-style-image |
用图片代替列表标记 |
url关键词加上用括号包围的图片路径与文件名 |
每个列表项目前显示一张图片 |
| list-style-position |
指定列表标记的位置 |
inside
outside（默认） |
列表项目标记放置在文本以内，且环绕文本按标记对齐。
标记位于默认位置。 |
接下来说明用无序列表组织水平导航区域，下表中列出了CSS中display属性的常用值：
| 取值 |
用途 |
| none |
元素不显示 |
| inline |
元素将与周围的文本和其他元素保持在同一行中，并且不会开始新行 |
| inline-block |
元素与相邻的内联元素保持在同一行中；但同时它也是块元素属性，并应用宽度、高度等属性 |
| block |
元素显示为块，上下均有外边距 |
-
用CSS伪类增加交互效果
下表说明了常见伪类：
| 伪类 |
应用场景 |
| :link |
未被点击（未查看）过的超链接 |
| :visited |
已访问超链接的默认状态 |
| :focus |
超链接具有键盘焦点时激活伪类 |
| :hover |
超链接在鼠标指针滑过时激活伪类 |
| :active |
超链接被实际点击后激活伪类 |
锚元素伪类必须按照上表顺序来编写代码（忽略一个或多个当然是可以的）。如果不按照以上顺序，就无法正确显示样式。
-
利用CSS进行定位
当我们使用CSS进行页面布局时，可以灵活地指定元素在页面中的位置。position（定位）属性指定了浏览器在呈现某个元素时的定位类型。
| 取值 |
用途 |
| static |
默认值。元素以“正常流”呈现 |
| fixed |
指定元素在浏览器视窗中的位置；页面滚动时元素不随之移动 |
| relative |
指定元素相对其按正常流呈现时所在位置而言应当出现的位置 |
| absolute |
指定某元素不按正常流呈现时的确切位置 |
静态定位
静态定位（Static position）是HTML元素的默认值，即按正常流呈现。 固定定位
固定定位（fixed position）使元素脱离正常流但又保持静止，或者说当浏览器视窗中的网页发生滚动时，他仍然“固定在某处”。 相对定位
在使用相对定位（relative position）时，元素位置略有变化，这是相对于其在正常流模式下应当出现的位置而言的。当然，在正常流中它的位置仍然保留着，其他元素围绕该保留位置进行流动。在指定相对定位时，要用position：relative;属性以及其他一个或多个偏移属性：left、right、top、bottom。下表列出了这些属性：
| 属性 |
取值 |
用途 |
| left |
数字值或百分比 |
元素距离其容器元素左侧的偏移位置 |
| right |
数字值或百分比 |
元素距离其容器元素右侧的偏移位置 |
| top |
数字值或百分比 |
元素距离其容器元素顶部的偏移位置 |
| bottom |
数字值或百分比 |
元素距离其容器元素底部的偏移位置 |
绝对定位
绝对定位（absolute positioning）被用来指定某元素的确切位置，即与其第一个非静态父元素的位置关系，他脱离了正常流。如果没有非静态父元素，绝对定位按相对于页面主体的位置来给出。配置绝对定位需要用position:absolute;属性以及一个或多个偏移属性（left、right、top、bottom）。
-
更多HTML5结构元素
section元素
该元素的目的在于定义文档中的某个“节”，例如章节、主题等。它也是块显示元素，可以容纳页眉、页脚、节、文章、侧边栏、图像、div以及其它可用来配置内容的元素。 article元素
文章（article）元素意在呈现一个独立的部分，如博客文章、评论、电子杂志文章，都可以是该元素的来源。它也是块显示元素，可以容纳页眉、页脚、节、文章、侧边栏、图像、div以及其它可用来配置内容的元素。 aside元素
侧边栏（aside）元素指定了一个侧边栏或其它外围内容。它也是块显示元素，可以容纳页眉、页脚、节、文章、侧边栏、图像、div以及其它可用来配置内容的元素。 time元素
时间（time）元素用来展现日期或时间。他有一个可选的datetime属性，用于将日历日期和/或时间设置为机器可读格式。用YYYY-MM-DD来指定日期。用24小时制时钟和HH:MM来指定时间。
参考书籍：［1］Terry Felke-Morris.学习HTML5［Ｍ］.第七版.北京：清华大学出版社，2017
