CSS表格与浮动定位
一、表格
1.表格的常用屬性
?1.邊距屬性：padding
?2.尺寸屬性：width,height
?3.文本格式化屬性：
???font-*
???text-align,color,text-indent,… …
?4.背景屬性
???背景色,背景圖,漸變
?5.border屬性
?6.vertical-align
???作用：在單元格中，設置文本的垂直對齊方式
???取值：top/middle/bottom
2.表格的特有屬性
?1.邊框和并
???屬性：border-collapse
???取值：
????1.separate
??????默認值，即分離邊框模式
????2.collapse
??????邊框和并效果
?2.邊框邊距
???作用：單元格之間的距離
???屬性：border-spacing
???取值：
????1.指定一個值
??????表示單元格間的水平和垂直間距是相同的
????2.指定兩個值
??????第一個值：單元格間的水平間距
??????第二個值：單元格間的垂直間距
????注意：
?????僅限于邊框分離狀態是使用，即
?????border-collapse:serparate;
?3.標題位置
???屬性：caption-side
???取值：
??????1.top：默認值，標題顯示在表格之上
??????2.bottom：標題顯示在表格之下
?4.顯示規則
???作用：指定表格的布局方式
??????默認布局方式為自動表格布局，即單元格的寬度實際上是由內容來決定的，與設定的值無關。
???屬性：table-layout
???取值：
??????1.auto
??????默認值，即自動表格布局
??????2.fixed
??????固定表格布局，即單元格的寬度以設定的值為主，而不取決于內容(超出的內容以溢出的方式顯示)
????????自動表格布局 VS 固定表格布局
?????????1.自動表格布局
??????????1.單元格大小會適應內容大小
??????????2.缺點：表格復雜時，加載速度慢
??????????3.適用于不確定每列大小的情況下使用
??????????4.雖然算法較慢，但是能體現傳統表格特點
?????????2.固定表格布局
??????????1.單元格大小取決于td中設置的值
??????????2.優點：加載速度較快
??????????3.確定每列大小時，可以使用固定表格布局
??????????4.算法較快，缺點是不夠靈活
ex：
效果如圖所示：
采取固定表格布局：
采取自動表格布局：
二、.浮動
?1.定位概述
??所謂的定位，實際上就是定義元素框相對于其正常位置，應該出現的位置在哪。
??簡單的說，定位就是改變元素在頁面上的默認位置。
?2.定位分類
??1.普通流定位(元素默認定位方式)
??2.浮動定位
??3.相對定位
??4.絕對定位
??5.固定定位
?3.定位-普通流定位
??普通流定位，又稱"文檔流定位"，是頁面元素的默認定位方式
????頁面中的塊級元素按照從上到下的方式排列，而且每個元素獨占一行。
????頁面中的行內元素按照從左到右的方式排列，當前行顯示不下所有的行內元素時，會自動換行。
???浮動定位專門解決讓多個塊級元素在一行內顯示
?4.浮動定位概述
??1.浮動定位概述
??如果將元素的定位方式設置為浮動定位，那么將具備以下幾個特點：
????1.浮動元素會被排除在文檔流之外即脫離文檔流，元素不在占據頁面空間，
?????其他未浮動元素要上前補位
????2.浮動元素會停靠在父元素的左邊或右邊，或頂靠在其他已浮動元素的邊緣上
????3.浮動元素只會在當前行內浮動
????4.浮動元素依然位于父元素之內
????5.浮動定位處理的問題-讓多個塊級元素在一行內顯示
??2.語法
???屬性：float
????取值：
?????1.none
???????默認值，即無浮動定位效果
?????2.left
???????左浮動，讓元素頂靠在父元素的左邊，或停靠在左側已有浮動元素的邊緣上
?????3.right
???????右浮動，讓元素停靠在父元素的右邊，或停靠在右側已有浮動元素的邊緣上
??3.浮動引發的特殊效果
?????1.當父元素的寬度顯示不下所有已浮動子元素時，最后一個將換行(有可能被卡住)
?????2.元素一旦浮動起來之后，那么寬度將變成自適應(非人為指定情況下)
?????3.元素一旦浮動起來之后，那么將變成塊級元素，尤其對行內元素影響最大
?????????塊級元素：允許修改尺寸
?????????行內元素：不允許修改尺寸
?????4.主要針對文本，行內元素，行內塊元素，是采用環繞的方式排列的，
??????是不會被浮動元素壓在底下的，會巧妙的避開浮動元素
??4.清除浮動
????元素浮動起來之后，除了影響自己的位置之外，還會影響后續元素
????如果后續元素不想被前面浮動元素所影響的話，可以使用清除浮動的效果來解決影響
????屬性：clear
????取值：
??????1.none
????????默認值，即不做任何清楚操作
??????2.left
????????清除當前元素的前面元素左浮動帶來的影響。
????????即當前元素不會上前占位，并且左邊不允許有浮動元素
??????3.right
????????清除當前元素的前面元素右浮動帶來的影響。
????????即當前元素不會上前占位，并且右邊不允許有浮動元素
??????4.both
????????清除前面元素左右浮動帶來的影響
??????5.浮動元素對父元素帶來的影響
????????由于浮動元素會脫離文檔流，所以會導致元素不占據父元素的頁面控件，所以會對父元素高度帶來影響。
??如果一個元素中所有的子元素全部都浮動了，那么該元素的高度就為0了
?????解決方案：
??????1.直接設置父元素高度
????????弊端：必須要知道父元素的準確高度
??????2.設置父元素也浮動
????????弊端：對后續元素會有影響
??????3.為父元素設置overflow，取值為hidden或auto
????????弊端：如果有內容要溢出顯示的話，也一同被隱藏了
??????4.父元素中追加空子元素，并設置clear屬性為both
總結
以上是生活随笔為你收集整理的CSS表格与浮动定位的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 外网远程访问管家婆ERP进销存
- 下一篇： vue3中的provide/inject