CSS 佈局屬性(display,float,clear,visibility,overflow,overflow-x,overflow-y)
display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box | flexbox | inline-flexbox |flex | inline-flexcss
默認值：inlinehtml
適用於：全部元素css3
繼承性：無flex
動畫性：否動畫
計算值：指定值，除浮動，絕對定位和根元素外flexbox
取值：
- none：
- 隱藏對象。與 visibility屬性的hidden值不一樣，其不爲被隱藏的對象保留其物理空間
- inline：
- 指定對象爲內聯元素。
- block：
- 指定對象爲塊元素。
- list-item：
- 指定對象爲列表項目。
- inline-block：
- 指定對象爲內聯塊元素。（CSS2）
- table：
- 指定對象做爲塊元素級的表格。類同於html標籤<table>（CSS2）
- inline-table：
- 指定對象做爲內聯元素級的表格。類同於html標籤<table>（CSS2）
- table-caption：
- 指定對象做爲表格標題。類同於html標籤<caption>（CSS2）
- table-cell：
- 指定對象做爲表格單元格。類同於html標籤<td>（CSS2）
- table-row：
- 指定對象做爲表格行。類同於html標籤<tr>（CSS2）
- table-row-group：
- 指定對象做爲表格行組。類同於html標籤<tbody>（CSS2）
- table-column：
- 指定對象做爲表格列。類同於html標籤<col>（CSS2）
- table-column-group：
- 指定對象做爲表格列組顯示。類同於html標籤<colgroup>（CSS2）
- table-header-group：
- 指定對象做爲表格標題組。類同於html標籤<thead>（CSS2）
- table-footer-group：
- 指定對象做爲表格腳註組。類同於html標籤<tfoot>（CSS2）
- run-in：
- 根據上下文決定對象是內聯對象仍是塊級對象。（CSS3）
- box：
- 將對象做爲彈性伸縮盒顯示。 （伸縮盒最老版本）（CSS3）
- inline-box：
- 將對象做爲內聯塊級彈性伸縮盒顯示。 （伸縮盒最老版本）（CSS3）
- flexbox：
- 將對象做爲彈性伸縮盒顯示。 （伸縮盒過渡版本）（CSS3）
- inline-flexbox：
- 將對象做爲內聯塊級彈性伸縮盒顯示。 （伸縮盒過渡版本）（CSS3）
- flex：
- 將對象做爲彈性伸縮盒顯示。 （伸縮盒最新版本）（CSS3）
- inline-flex：
- 將對象做爲內聯塊級彈性伸縮盒顯示。 （伸縮盒最新版本）（CSS3）
clear：none | left | right | both
默認值：none
適用於：塊級元素
繼承性：無
動畫性：否
計算值：指定值
取值：
- none：
- 容許兩邊均可以有浮動對象
- both：
- 不容許有浮動對象
- left：
- 不容許左邊有浮動對象
- right：
- 不容許右邊有浮動對象
說明：
- 對應的腳本特性爲clear。
visibility：visible | hidden | collapse
默認值：visible
適用於：全部元素
繼承性：有
動畫性：是
計算值：指定值
取值：
- visible：
- 設置對象可視
- hidden：
- 設置對象隱藏
- collapse：
- 主要用來隱藏表格的行或列。隱藏的行或列可以被其餘內容使用。對於表格外的其餘對象，其做用等同於hidden。
說明：
- 若是但願對象爲可視，其父對象也必須是可視的。
- 對應的腳本特性爲visibility。
overflow：<overflow-style>
<overflow-style> = visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls |fragments
默認值：visible
適用於：塊容器，伸縮盒容器，grid容器
繼承性：無
動畫性：否
計算值：指定值
取值：
- visible：
- 對溢出內容不作處理，內容可能會超出容器。
- hidden：
- 隱藏溢出容器的內容且不出現滾動條。
- scroll：
- 隱藏溢出容器的內容，溢出的內容將以捲動滾動條的方式呈現。
- auto：
- 當內容沒有溢出容器時不出現滾動條，當內容溢出容器時出現滾動條，按需出現滾動條。此爲body對象和textarea的默認值。
- paged-x：
- TODO...（CSS3）
- paged-y：
- TODO...（CSS3）
- paged-x-controls：
- TODO...（CSS3）
- paged-y-controls：
- TODO...（CSS3）
- fragments：
- TODO...（CSS3）
說明：
- overflow的效果等同於overflow-x + overflow-y。
- 對於table來講，假如table-layout屬性設置爲fixed，則td對象支持帶有默認值爲hidden的overflow屬性。若是設爲hidden，scroll或者auto，那麼超出td尺寸的內容將被剪切。若是設爲visible，將致使額外的文本溢出到右邊或左邊（視direction屬性設置而定）的單元格。
- 對應的腳本特性爲overflow。
overflow-x：<overflow-style>
<overflow-style> = visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls |fragments
默認值：visible
適用於：塊容器，伸縮盒容器，grid容器
繼承性：無
動畫性：否
計算值：指定值
取值：
- visible：
- 對溢出內容不作處理，內容可能會超出容器。
- hidden：
- 隱藏溢出容器的內容且不出現滾動條。
- scroll：
- 隱藏溢出容器的內容，溢出的內容將以捲動滾動條的方式呈現。
- auto：
- 當內容沒有溢出容器時不出現滾動條，當內容溢出容器時出現滾動條，按需出現滾動條。此爲body對象和textarea的默認值。
- paged-x：
- TODO...（CSS3）
- paged-y：
- TODO...（CSS3）
- paged-x-controls：
- TODO...（CSS3）
- paged-y-controls：
- TODO...（CSS3）
- fragments：
- TODO...（CSS3）
說明：
overflow-y：<overflow-style>
<overflow-style> = visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls |fragments
默認值：visible
適用於：塊容器，伸縮盒容器，grid容器
繼承性：無
動畫性：否
計算值：指定值
取值：
- visible：
- 對溢出內容不作處理，內容可能會超出容器。
- hidden：
- 隱藏溢出容器的內容且不出現滾動條。
- scroll：
- 隱藏溢出容器的內容，溢出的內容將以捲動滾動條的方式呈現。
- auto：
- 當內容沒有溢出容器時不出現滾動條，當內容溢出容器時出現滾動條，按需出現滾動條。此爲body對象和textarea的默認值。
- paged-x：
- TODO...（CSS3）
- paged-y：
- TODO...（CSS3）
- paged-x-controls：
- TODO...（CSS3）
- paged-y-controls：
- TODO...（CSS3）
- fragments：
- TODO...（CSS3）
說明：
- 1. 【css佈局】display、position、float、overflow
- 2. CSS屬性中Display與Visibility
- 3. CSS——float，clear樣式屬性
- 4. CSS 元素的顯示與隱藏（display屬性、visibility屬性、overflow屬性）
- 5. CSS 佈局的position屬性、float屬性
- 6. overflow、display、visibility的區別？
- 7. CSS中display屬性的Flex佈局
- 8. CSS HTML元素佈局及Display屬性
- 9. CSS中的display屬性的flex佈局
- 10. 佈局:box-sizing ,clear float,flex
- 更多相關文章...
- • ASP.NET MVC - 樣式和佈局 - ASP.NET 教程
- • ASP.NET Web Pages - 頁面佈局 - ASP.NET 教程
- • JDK13 GA發佈：5大特性解讀
- • 再有人問你分佈式事務，把這篇扔給他
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 【css佈局】display、position、float、overflow
- 2. CSS屬性中Display與Visibility
- 3. CSS——float，clear樣式屬性
- 4. CSS 元素的顯示與隱藏（display屬性、visibility屬性、overflow屬性）
- 5. CSS 佈局的position屬性、float屬性
- 6. overflow、display、visibility的區別？
- 7. CSS中display屬性的Flex佈局
- 8. CSS HTML元素佈局及Display屬性
- 9. CSS中的display屬性的flex佈局
- 10. 佈局:box-sizing ,clear float,flex