CSS顯示 列表 布局

1.顯示

1、顯示方式

屬性：display

取值：

1、none

讓生成的元素不顯示 - 隱藏
特點：脫離文件流
2、block
讓元素表現的和塊級元素一樣
特點：1、獨佔一行
2、允許修改尺寸
3、允許正常處理垂直方向的外邊距
3、inline
讓元素表現的和行內元素一樣
特點：1、多個元素一行內顯示
2、不允許修改尺寸
3、垂直外邊距無效
4、inline-block
讓元素表現的和行內塊一樣
特點：1、多個元素能在一行內顯示
2、允許修改尺寸
5、table
讓元素表現的和**元素一樣
特點：1、每行只顯示乙個
2、尺寸以內容為準

（1）顯示 / 隱藏屬性

屬性：visibility

取值：

1、visible : 預設值，可見的

2、hidden : 隱藏，依然佔據空間

屬性：opacity

取值：0.0(完全透明) ~ 1.0(完全不透明) 之間的數字　

（3）垂直對齊方式

屬性：vertical-align

作用：設定 td 和 img 的垂直對齊方式

取值：

1、設定在 td 上的 值

1、top
2、middle
3、bottom
2、設定在img上的值
設定兩邊的文字，相對於的垂直對齊
1、top
2、middle
3、bottom
4、baseline ：基線對齊（預設值）
常用操作：
在開發網頁過程中，通常會先將所有的(img)的vertical-align屬性修改為除baseline以外的其他值

作用：當滑鼠懸停在元素上時表現的形式

屬性：cursor

取值：

1、default

2、pointer ：小手
3、crosshair ：+
4、text ： i
5、wait ：等待
6、help ：幫助

1.列表項標識

屬性：list-style-type

取值：

1、none

2、disc
3、circle
4、square

作用：以自定義的影象來作為列表項的標識

屬性：list-style-image

3.列表項位置

屬性：list-style-position

取值：

1、outside

將標識放置與 li 的外面
2、inside
將標識放置與 li 的裡面

屬性：list-style

取值：style image position

常用用法：list-style : none;

3.定位-布局

1.定位屬性

（1）定位方式屬性

屬性：position

取值：static（預設） / relative（相對的） / absolute（絕對的） / fixed（固定的）

注意：如果將position修改為 relative / absolute / fixed 中的任何一種的話，那麼元素就被稱為「已定位元素」　

（2）偏移屬性（只適用於「已定位元素」）

屬性：top / right / bottom / left

取值：以 px 為單位的數值

2.定位方式

（1）相對定位

作用：元素會相對於它原來的位置偏移某個距離，多數會實現在位置微調時使用

語法：

position:relative;

配合著top/right/bottom/left實現位置的微調

1、頁面中建立乙個div，尺寸為100*30，設定邊框或背景色

2、當滑鼠懸停在元素上時，讓元素向左上角移動5px(相對定位)

#postion

#postion:hover

絕對定位 & 特點

絕對定位的的元素會脫離文件流，不佔頁面空間

絕對定位的元素會相對於離它最近的，已定位的，祖先元素 去實現位置的初始化和偏移
如果不存在已定位的祖先元素的話，那麼就相對於body去實現位置的初始化和偏移

position:absolute;

配合著偏移屬性top/right/bottom/left實現位置的偏移

1、絕對定位元素會脫離文件流，所以會壓在其它元素之上

2、絕對定位的元素會變為塊級元素
3、絕對定位的元素margin可以正常處理，但margin:0 auto 會失效

一旦將元素變為已定位元素的話，元素則有可能出現堆疊的效果

屬性：z-index

取值：無單位的數字，數字越大越靠上

注意：只有已定位元素才能使用z-index

父子元素間，z-index無效，永遠都是子壓在父上　　

（4）固定定位

定義：將元素素固定在頁面的某個位置處，位置不會隨著滾動條而發生改變。固定在視覺化的區域中。

語法：

position:fixed;

配合著 top / right / bottom / left 改變位置
注意 1、固定定位的元素會脫離文件流-不佔頁面空間
2、固定定位的元素會變成塊級元素
3、固定定位的元素永遠都是相對於body去實現位置的初始化和偏移

作用：在指定的位置進行黏性操作

語法：

position:sticky

配合 top / bottom / left / right 使用
注意： 如果不定義 top / bottom / left / right 的值，該方式 position:sticky 則會沒有效果

前端學記CSS 顯示 布局

設定控制項顯示方式 display block display inline display inline block display none position relative position absolute position fixed float left 基本特性 其他特性 clear...

CSS3 4 顯示 列表 定位

1.2 顯示效果 1.3 游標 2 列表 3 定位 3.2 定位方式 1.1.1 顯示方式 所有元素都可以顯示為框 塊級元素顯示為一塊內容 塊框 div h1 p等 行內元素顯示在行中 行內框 span a等 可以使用display屬性來修改元素框的顯示方式 1.1.2 display屬性 取值di...

css3列表布局

css3多列布局 css多列屬性 屬性描述 column count 指定元素應該被分割的列數。column fill 指定如何填充列 column gap 指定列與列之間的間隙 column rule 所有 column rule 屬性的簡寫 column rule color 指定兩列間邊框的顏...