css布局屬性
阿新 • • 發佈：2017-10-10
body 浮動 left 容器 清除 常用 空間 style 文檔流
文檔流類型：文檔中的元素在排列顯示的顯示規則，html中提供了3中文檔流類型控制元素的布局方式。
- 普通流：文檔中的元素默認顯示顯示規則。
- 從上到下，從左到右
- 塊級元素獨占一行
- 元素不能重疊（無法交匯）
- 浮動流：設定元素向某一個方向傾斜浮動的方式排列元素。 定位
- 從上到下，按照指定方向見縫插針。
- 元素不能重疊（無法交匯）
- 定位：直接定位元素在文檔或在父元素中的位置，表現為漂浮在指定元素上方。
- 脫離文檔流。
- 元素可以重疊在一塊區域內,按照顯示的有限級別以覆蓋的方式顯示。
布局屬性：用來控制元素顯示位置文檔布局方式的屬性，按照功能可以分為如下三類。
- 控制顯示類屬性
-
display：設定元素的顯示類型，常用取值如下。
-
none： 隱藏對象，不占據空間。
-
inline： 指定對象為內聯元素。
-
block： 指定對象為塊元素。
-
inline-block： 指定對象為內聯塊元素。
-
-
visibility ：設定是否顯示元素，常用取值如下
-
visible： 設置對象可視，但占據空間
-
hidden： 設置對象隱藏
-
1 <style type="text/css"> 2 div{ 3 border: 2px black solid; 4 width: 300px; 5 height: 400px; 6 7
} 8 #n{ 9 display: none; 10 } 11 #h{ 12 visibility: visible; 13 } 14 </style> 15 </head> 16 <body> 17 <div id="n"></div> 18 <div id="h"></div> 19 </body>
-
-
- 控制浮動類屬性
-
控制浮動類屬性 float ：設定元素以浮動流方式顯示。
-
none： 設置對象不浮動
-
left： 設置對象浮動方向向左
-
right：設置對象浮動方向右
-
-
clear：清除浮動。
-
none： 不清除浮動。
-
both： 清除兩側浮動。
-
left： 清楚左側浮動。
-
right： 清除右側浮動。
-
1 <style type="text/css"> 2 div{ 3 border: 2px black solid; 4 width: 300px; 5 height: 400px; 6 float: left; 7 } 8 #cl{ 9 clear: left; 10 } 11 </style> 12 </head> 13 <body> 14 <div></div> 15 <div id="cl"></div> 16 </body>
-
-
- 控制溢出類屬性
-
控制溢出類屬性 overflow(-x)(-y)：設定當內容溢出（橫向\縱向）父容器時的顯示方式。
-
visible： 對溢出內容不做處理，內容可能會超出容器。
-
hidden： 隱藏溢出容器的內容且不出現滾動條。
-
scroll： 隱藏溢出容器的內容，溢出的內容將以滾動條的方式呈現。
-
auto： 當內容溢出容器時出現滾動條，按需出現滾動條。
-
1 <style type="text/css"> 2 div{ 3 border: 2px black solid; 4 width: 300px; 5 height: 400px; 6 overflow: hidden; 7 } 8 </style> 9 </head> 10 <body> 11 <div id="over"></div> 12 </body>
-
-
css布局屬性