CSS3_3.文字格式化&表格&浮動
文字格式化、表格、浮動
1 文字格式化
1.1 文字格式化概述
控制字型：字型大小、字型加粗、字體系列等；
設定文字格式：文字顏色、文字排列和文字縮排等；
使用文字格式化相關樣式，取代加粗< b >、傾斜< i >等HTML元素
1.2 字型屬性
1.2.1 控制字型
指定字型，font-family: value1, value2;
字型大小，font-size: value;單位px,pt,em/rem
字型加粗，font-weight: normal/bold bolder lighter/無單位整百數字;
字型樣式，font-style: normal/italic;
小型大寫字母顯示，font-variant: normal/small-caps;
1.2.2 字型屬性font
字型屬性font用於把所有針對字型的屬性設定在一個宣告中，6個按順序設定的值。
font: font-style font-variant font-weight font-size font-family;不設定的值使用預設設定,但必須有size和family
1.3 文字屬性
文字顏色 color: value;
文字排列 text-align: left/right/center/justify(兩端對齊);
文字修飾 text-decoration: none/underline/line-through/overline;
行高 :定義一行資料的高度，如果行高高度大於字型本身大小，文字將在指定的行高內呈現垂直居中的效果,文字在div垂直中間顯示，把div的高度設定給行高。但是注意，多行文字時會出現問題;
line-hight: 以px為單位的數字。無單位的數字，行高高度是字型大小的多少倍
首行文字縮排 text-indent: value;以px為單位
文字陰影 text-shadow: h-shadow v-shadow blur color;橫向偏移，縱向偏移，模糊距離，陰影顏色
2 表格
2.1 表格常用樣式屬性
2.1.1 表格常用樣式屬性
邊距屬性：padding(margin無效)
尺寸屬性：width、height；設定表格或者單元格的尺寸
文字格式化屬性 font- text- line-height
背景屬性：設定表格或者單元格的背景色或者背景影象
border屬性：設定表格的邊框
2.1.2 垂直方向對齊
vertical-align屬性：在表單元格中設定單元格內容的對齊方式
取值：vertical-align:top/middle/bottom
2.2 表格特有樣式屬性
2.2.1 邊框合併
設定了單元格的邊框，相鄰單元格的邊框會單獨顯示。
border-collapse：separate/collapse;是否合併相鄰的邊框為單一邊框
2.2.2 邊框邊距
border-spacing屬性用於設定相鄰單元格的邊框間的距離，僅限於border-collapse屬性為separate值的情況(邊框分離模式)。
取值為一個值時為水平和垂直間距，兩個值指定水平間距和垂直間距，用空格隔開
2.2.3 標題位置
caption-side屬性設定表格標題的位置，指定表標題相對於表框的位置：top定位在表格之上，預設值；bottom定位在表格下方
2.2.4 顯示規則
table-layout 屬性設定顯示錶格單元格、行列的演算法規則，取值：
auto：預設值，自動錶格佈局，內容決定列的尺寸；
fixed：固定表格佈局，與單元格內容無關，取決於表格寬度、列寬度、表格邊框寬度、單元格間距
| 自動佈局 | 固定佈局 |
|---|---|
| 單元格大小會適應內容 | 單元格大小取決設定的值 |
| 表格複雜時，載入速度慢(缺點) | 任何情況下會加速載入表格(優) |
| 自動佈局比較靈活(優) | 固定佈局不靈活(缺點) |
| 適用於不確定每列大小並且表格不復雜的時候使用 | 適用於確定每列尺寸使用 |
3 浮動
3.1 定位概述
3.1.1 定位概述
定位：定義元素框相對其正常位置應該出現的位置，或者相對於父元素、另一個元素或者瀏覽器視窗本身的位置
1）普通流定位
2）浮動定位
3）相對定位
4）絕對定位
3.1.2 普通流定位
塊級元素框從上到下排列：塊級元素出現在新的行(p、div)；元素框之間的垂直距離由框的垂直外邊距計算；
行內元素：在一行中從左到右排列水平佈置，可以使用水平內邊距、可以用水平內邊距、邊框和外邊距調整間距
3.2 浮動定位
3.2.1 浮動概述
浮動定位指將元素排除在標準文件流之外，元素將不在頁面佔用空間，浮動元素位於包含框之內，可以放置在包含框的左邊或者右邊；
浮動框向左或向右移動直到外邊緣碰到包含框或另一個浮動框的邊框，常使用實現特殊定位效果；
解決多個塊級元素同一行顯示的問題
浮動引發的特殊情況：
- 父元素顯示不下所有浮動元素，將換行顯示(可能被卡住)；
- 未指定寬的塊級元素浮動後，寬度以內容為準；
- 元素浮動後變為塊級元素，允許修改尺寸以及設定垂直外邊距
- 文字、行內元素、行內塊不會被浮動元素壓在下面，而是環繞浮動元素顯示
3.2.2 浮動定位
浮動元素外邊緣不會超過父元素的內邊緣；不會互相重疊也不會上下浮動
3.2.3 float屬性
使用float屬性來設定元素左浮還是右浮
float: none/left/right;
3.2.4 clear屬性
clear屬性用於清除浮動帶來的影響，定義元素哪邊不允許出現浮動元素
取值：left/right/both/none 不被左/右/左右浮動影響
3.2.5 float與overflow
高度坍塌，父元素不寫高，高度預設以內部元素最高為準，內部元素浮動後不佔據預設文件流的高度，所以父元素高度為0
解決方案：
- 父級元素新增高度
弊端：不能每次知道父元素高度； - 父級元素設定浮動
弊端：父元素設定浮動後會影響其它元素； - 父元素設定溢位overflow: hidden/auto
弊端：如果內容有需要溢位顯示的會被隱藏 - 父元素中追加一個空的塊級元素，不設定寬高，只設置clear:both
