第八章 特殊布局情况——定位布局
8.1定位属性
8.1.1 为什么要使用定位
HTML+CSS布局方式之中，最为常见的有两种布局模式，分别是浮动布局和定位布局。在日常开发中，使用最多的是浮动布局，当在页面中出现多个元素层叠状态时，会考虑定位布局，例如平时的弹窗、黑色半透明蒙版层、返回顶部微博等网站顶部的导航条等等。
8.1.2 定位——position属性
值 |
描 述 |
Absolute |
生成绝对定位的元素，相对于static定位意外的第一个父元素进行定位。元素的位置通过“left”，“top”，“right”以及“bottom”属性进行规定 |
Fixed |
生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过“left”，“top”，“right”以及“bottom”属性进行规定 |
Relative |
生成相对定位的元素。相对于其正常位置进行定位 |
Static |
默认值。没有定位。元素出现在正常的流中（忽略top，bottom，left，right或者z-index声明） |
Inherit |
规定应该从父元素继承position属性的值 |
8.1.3 定位对文档流的影响
当对一个元素设置了position：absolute和position：fixed时，钙元素会脱离文档流，从而对父级以及兄弟级元素的布局造成影响。
如果元素设置了position：relative，根据W3C官方文档上来说，并不会脱离文档流，也不会有布局上的问题，但是在实际开发中的情况则是：元素不会脱离文档流，但是可以设置top、left等值进行位置的操作。
如果元素设置了position：absolute，第二个div的位置会受到影响，在父级元素中从左上角开始显示，似乎附加元素中压根不存在第一个元素一样，这是第一个div元素已经脱离了文档流。
8.1.4 绝对定位元素针对谁进行定位
如果父级（无限）没有设定position属性，那么当前的absolute则结合top，right，left，bottom属性以；浏览器左上角为原始点进行设定。
如果父级（无限）设定position属性，且属性值为relative、absolute、fixed，那么当前的absolute则结合top、right、left、bottom属性以及父级（最近）的左上角为原始点进行定位。
8.2.1 定位——left等属性
定位提供了四种属性来设置的偏移：left、right、top、bottom
1）这四种属性均可以设置为负值，可以选用绝对单位（如px），也可以选用相对单位（如百分比），当时用这四种属性进行位置设置时，可以理解为设置“与相对定位元素的某方向位置的距离”。
2）绝对定位元素存在固定宽高：当绝对定位元素存在固定的宽（或高）时，在水平方向上，不论书写left值后书写right值。还是先书写right值后书写left值，均按照left的值进行渲染；在垂直方向上，不论先书写top值后书写bottom值，还是先书写bottom值后书写top值。均按照top值进行渲染。
3）绝对定位没有设置固定宽高
当绝对定位元素没有设置固定宽高时，合理的left与right（或top与bottom值都会生效）
元素宽度=父级元素-left值-right值
8.3 层级覆盖关系
8.3.1 定位——z-index属性
在一个网页当中，可能存在着多个定位的元素，当这些袁旭互相重叠时，就设计层叠的关系，因此，CSS当中规定了z-index这个属性，来为定位元素设定“层叠级别”，相对定位、固定定位、绝对定位的元素，均可设置z-index属性。
Z-index默认为0，数字越大级别越高，设置z-index之前的元素都是同级的，针对同级元素来说，后读取的元素的级别要高于先读取的元素级别。Z-index只针对同级的标签有效，子标签的z-index对父标签是无效的。针对两个设置绝对定位的元素进行层级比较时，首先应当比较其父级，再比较子集。
8.4 固定定位
Fixed可定位相对浏览器窗口的指定坐标。这个元素的位置可通过left、right、top、bottom属性来规定。不论窗口是否滚动，元素都会留在指定位置，该定位方法在移动端及其常见，在PC端有时也会适用于头部导航区，无论内容区的高度有多少，滚动条是否滚动，固定定位的元素始终显示在初始位置。
第九章 特殊布局情况——界限控制与伪元素的妙用
9.1 未设置固定宽高元素的界限控制
9.1.1 何处需要考虑界限问题
对于一个元素，如果设置了固定的宽度和高度，其实就意味着为这个元素设置了接线，这种界限不是在这里要考虑的，在这里只考虑“没有设定固定宽高的元素”的界限控制。
如果不为一个块元素设置固定宽度，则钙元素在水平方向上默认占满父级的百分之百。如果不为其设置固定高度，则默认有内容撑开高度。
9.1.2 最小高度
如果设置固定高度，内容少的时候互有大量留白。如果不设置高度，单纯由内容撑开高度，当内容少的时候，这个区域的高度太小，完全无法沾满整个浏览器区域，实在难看啊。故为元素设置最小高度（min-height），最小高度的值需要根据情况而定。
为ul（列表项父级元素）设置最小高度为500px，当元素内容部分的高度小于“最小高度值”时，该元素按照最小高度值撑开渲染；当元素内容部分的高度大于“最小高度值”时，该元素按照实际高度值进行渲染。
9.1.3 最大宽度和最大高度
对打宽度主要应用在移动端，在移动端开发当中，横向同时适用百分比等相对度量单位。加入设计图给出的是750像素的宽度，那么在大于750像素的浏览器中，横向宽度已经超出了设计图宽度，此时，就需要为body设置最大宽度，限制页面的大小。
默认情况下，内容高度由内容撑开，当设置最大高度之后，即使内容超出这个高度，浏览器依旧会按照设置的最大高度来进行计算。
9.2 伪元素
9.2.1 什么是伪元素
伪元素可以理解为“虚假的元素”，他们虽然会砸内容原宿的前后插入额外的元素，但不会在文档中生成，在文档的源代码中并不能够找到他们。
虽然在结构上是“虚假”的元素，但在表现上和“普通”元素没什么区别，能够为他们添加任何样饰，比如改变文字颜色、添加背景、调整字体大小等。
9.2.2 伪元素的种类
伪元素的种类 |
描 述 |
：first-letter |
祥文本的第一个字母添加特殊样式 |
：first-line |
祥文本的首行添加特殊样式 |
：before |
在元素之前添加内容 |
：after |
在元素之后添加内容 |
9.2.3 伪元素的书写格式
最初，伪元素的语法时使用“：”，通过冒号数量来区分伪元素和伪类，伪元素使用两个冒号（：：before、：：after），伪类选择器使用一个冒号（：hover ：active）
使用：before，将会在选中的元素之前“添加”一个元素；使用：after，将会在选中的元素之后“添加”一个元素。在伪元素当中添加内容可以使用content属性。
9.2.4 让伪元素按照块元素特性渲染
如果希望伪元素能够一块元素现实，围棋设置display：block；即可。如果希望他能够设置宽高也能够与当前元素处于同一行，可以使用浮动、定位等。
第十章 表格
10.1 table布局的兴衰
10.2 table各类元素以及用法
标签 |
含义 |
标签 |
含义 |
Table |
定义一个表格 |
Col |
定义表格的列区域 |
Caption |
定义表格标题 |
Colgroup |
定义表格的数据列组 |
Thead |
定义表格的头部区域 |
Tr |
定义一个表格行 |
Tbody |
定义表格的主体区域 |
Td |
定义一个表格单元格 |
Tfoot |
定义表格的脚部区域 |
Th |
定义一个表格的表头单元格（列标题） |
10.2.1 行列合并控制
Rowspan与colspan
在表格中，有些单元格进行了合并处理，即有些单元格占据了多个单元格的空间。Rowspan表示行合并，colspan表示列合并，两个都是th或td的属性，属性值为数字，表示合并的行数或列数。