css佈局屬性

時間 2019-11-12

標籤 css 佈局屬性欄目 CSS 简体版

原文原文鏈接

文檔流類型：文檔中的元素在排列顯示的顯示規則，html中提供了3中文檔流類型控制元素的佈局方式。 css

普通流：文檔中的元素默認顯示顯示規則。
- 從上到下，從左到右
- 塊級元素獨佔一行
- 元素不能重疊（沒法交匯）
浮動流：設定元素向某一個方向傾斜浮動的方式排列元素。定位
- 從上到下，按照指定方向見縫插針。
- 元素不能重疊（沒法交匯）
定位：直接定位元素在文檔或在父元素中的位置，表現爲漂浮在指定元素上方。
- 脫離文檔流。
- 元素能夠重疊在一塊區域內,按照顯示的有限級別以覆蓋的方式顯示。

佈局屬性：用來控制元素顯示位置文檔佈局方式的屬性，按照功能能夠分爲以下三類。html

控制顯示類屬性

display：設定元素的顯示類型，經常使用取值以下。佈局
- none：隱藏對象，不佔據空間。spa
- inline：指定對象爲內聯元素。code
- block：指定對象爲塊元素。htm
- inline-block：指定對象爲內聯塊元素。對象

visibility ：設定是否顯示元素，經常使用取值以下blog

visible：設置對象可視，但佔據空間文檔
hidden：設置對象隱藏it

 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>
```

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。