1、定位

定位：

1、普通流定位

普通流，又稱為文件流

塊級元素：從上到下一個一個的排列

行內元素：一行內從左到右的排列

2、浮動定位

1、什麼是浮動定位

將元素排除在普通流之外，即脫離文件流

浮動元素不會佔據頁面空間

浮動元素會放置在"包含框"的左邊或右邊

浮動元素依舊位於包含框之內

浮動元素可以向左或向右浮動，直到碰見包含框的邊緣或另一個已浮動的元素框為止

2、特點

1、浮動元素邊緣不會超過其父元素的邊緣

2、浮動元素不會重疊

3、浮動只能左右浮動，不會上下浮動

注意：非塊級元素浮動的話，那麼將會變成塊級元素，允許修改 width 和 height

3、處理問題

1、讓塊級元素在同一行內顯示

2、修改行內元素的 width 和 height

4、浮動屬性

屬性：float

取值：

none

left

right

清除浮動所帶來的影響:

屬性：clear

取值：left

right

both

5、子級元素的浮動，為父層元素所帶來的影響

如果一個元素的所有子級內容都是浮動的，那麼它的高度會變成 0

解決方案

1、設定父容器高度

2、設定父元素的 overflow:hidden;

3、在父元素中，增加一個空元素，新增clear:both;

2、顯示方式

1、display

none：生成元素沒有框，不佔據頁面空間，隱藏

block：按塊級顯示

inline：按行內方式顯示

inline-block:行內塊，所有的元素在一行內顯示，允許修改width 和 height

使用場合：

1、控制元素的顯示與隱藏

隱藏：display:none;

顯示：

塊級 ：display:block

行內 ：display:inline

2、將行內元素變成塊級 或 行內塊

目的：修改行內元素的寬和高

2、顯示效果

1、visibility

可見性

取值：

visible ：預設值，可見的

hidden ：元素不可見，佔據頁面空間

collapse ：用在表格上

問題：visibility:hidden 與 display:none的區別

2、opacity

透明度

取值：0 - 1

opacity:0.5;

3、vertical-align

垂直方向對齊

td

img

取值：

baseline : 預設，基線對齊

top : 頂部對齊

bottom ：底部對齊

middle ：居中對齊

放在img 上，控制的是 img 左右兩端文字的垂直對齊方式

4、游標

改變滑鼠的顯示效果

屬性：cursor

取值：

default

pointer ：小手

crosshair ：+

text ： I

wait : 等待

help : ？