CSS（day04）

文本格式化

2. 文本属性
   ① 文本颜色
   color: 合法的颜色值

   ② 文本对齐方式
   text-align
   取值

   left / center / right / justify（两端对齐）

   注意:

   一个元素写了 text-align, 控制的是内部的文本
   这个元素自己想居中对齐, margin: 0 auto;
   text-align 对是行内元素的孩子, 都生效
   孩子如果是块级元素, 只会继承 text-align, 而块级本身不会居中

   ③ 行高
   line-height
   取值 px 为单位的数字
   特性: 如果行高的数值, 大于字体的大小, 那么该行文本将在指定的行高内部, 成居中的方式显示

   使用技巧: 一般会设置成与容器高度相同的值, 确保文字在容器垂直居中显示
   如果文字发生折行不建议使用行高做垂直居中

   ④ text-decoration
   取值

   none 默认值, 无线条

   overline 下划线

   line-through 删除线

   underline 下滑线

   项目中使用最多的 a { text-decoration: none; }

   ⑤ text-indent 以px为单位的数字（首行缩进）

   ⑥ 文本阴影
   text-shadow: h-shadow v-shadow blur color;

   h-shadow 水平偏移

   v-shadow 垂直偏移

   blur 模糊程度

   color 阴影颜色

表格

1. 表格的常用样式
   ① table 的样式

   尺寸, 边框, 背景, 文本内外边距
   设置 table 的边框, 只设置最外层一圈的边框

   ② td/th 的样式

   尺寸, 边框, 背景, 文字, 文本, 内边距都会起作用
   但是外边距无效
   vertical-align 设置单元格内部文本的垂直对齐方式
   取值: top / middle / bottom

   总结: vertical-align 对 tr,td,th 有效, 对 table 无效

2. table 特殊的显示方式
   显示方式: 行内元素, 块级元素, 行内块元素, table

   table 是一种特殊的表现方式
   1、单元格内容较多, 尺寸较小, 单元格的大小以内容为准
   2、单元格内容少, 而尺寸较大, 单元格大小以尺寸为准

   table 在浏览器的渲染方式: 先加载到浏览器内存中, 在一次的渲染到页面

3. 表格的特有属性
   ① 边框的合并和分离 （border-collapse）
   取值:

   separate 默认值, 边框分离状态
   collapse 边框合并状态

   ② 边框的边距（border-spacing: x y;）
   取值, 以 px 为单位的数值
   前提, border-collapse 属性必须为 sepearate 时才能使用此属性

   ③ 表格的标题 < caption >< /caption >
   caption-side

   取值 top默认值 / bottom

   ④ 设置表格的显示规则
   table-layout
   取值: auto 默认值（自动表格布局） / fixed （固定表格布局）

   auto: td 的大小以内容和尺寸较大的为准
   fixed: td 的大小就以尺寸为准

   表格自动布局和固定布局的区别

   自动布局	固定布局
   单元格的大小会自动适应内容	单元格取决于设置的值
   表格复杂时, 加载速度较慢	任何情况下都是逐行渲染, 渲染速度快
   自动布局比较灵活	固定表格布局不够灵活
   适用于不确定每列大小, 并且不复杂的表格	适用于明确知道每列大小的表格

定位（非常重要）

1. 什么是定位？
   定义元素在页面中的位置, 就是定位

2. 定位的分类

   普通流定位

   浮动定位

   相对定位

   绝对定位

   固定定位

3. 普通流定位（默认文档流定位）
   · 每个元素在页面都有自己的空间
   · 每个元素都是从父元素的左上角开始渲染
   · 块级和行内块, 在同一行显示从左往右一行放不下折行显示
   · 块级元素独占一行从上往下排列

4. 浮动定位（让块级元素横向显示）

   · float: val; 取值

   left 左浮动, 让元素浮动后停靠在父元素的左边, 或者其他已经浮动元素的后面

   right 右浮动, 让元素浮动后停靠在父元素的右边, 或者他已浮动元素的后面

   none 默认值, 不浮动

   · 浮动的特点

   (1) 元素一旦浮动, 该元素脱离文档流（不占页面空间, 后面元素上前补位）
   (2) 浮动元素, 会在当前行, 靠左/右, 停靠在父元素的边缘或者是其他已浮动的边缘
   (3) 父元素横向显示不下所有的浮动元素时, 显示不下的部分会自动换行, 默认去距离当前行最近的位置
   (4) 浮动, 解决多个块级元素横向显示的问题

5. 浮动定位引发的特殊的情况
   ① 浮动元素的占位问题：
   当父元素一行显示不下所有浮动元素时, 最后显示不下会换行, 默认去离当前最近的一行
   但是, 已浮动元素会根据自己的浮动方向占据位置, 导致被挤下去的元素会躲开被占据的位置在更下方显示

   ② 元素一旦浮动, 如果元素没有定义宽度, 那么浮动之后元素的宽度靠内容撑开

   ③ 元素一旦脱离文档流, 会变为块级元素, 尺寸、垂直外边距都生效

   ④ 文本, 行内元素, 行内块元素, 是不会被任何浮动元素压在下面的（而是巧妙的避开, 环绕着浮动元素显示）

   脱离文档流, 意味着什么？

   不占页面空间

   后续元素上前补位

   变为块级元素

6. 清除浮动效果（清除浮动）
   前面的浮动元素脱离文档流需要上前补位, 设置了清除浮动之后就不会上前补位了
   clear: 取值;

   none 不清除
   right 清除之前右浮动元素对其的影响
   left 清除当前左浮动元素对其的影响
   both 清除左右两边元素对其的影响

7. 高度坍塌（塌陷）

   父元素如果不设置高, 高度默认是内容撑起来的, 如果内部所有元素都浮动了, 那么父元素认为内部没有内容了所以高度为 0

   解决方案:

   1. 给父元素设置高度, 弊端：很多时候不知道确切的高度
   2. 父元素也浮动。弊端：父元素的兄弟元素会受到影响
   3. 最终解决方案: 在最后一个子元素后追加一个空的块元素, 给其设置 清除浮动, 那么这个元素还停留在文档流, 父元素的高度可以找到他这个元素不会被前面的浮动元素覆盖（clear: both;）这个元素不写宽高, 没有内容, 那么默认宽度是父级的 100% 高度为 0, 不会影响父级高度