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