display的block、none、inline屬性及解釋

常會用到display對應值有block、none、inline這三個值

參數:

block :塊對象的默認值。用該值爲對象之後添加新行。之前也添加一行。

none :隱藏對象。與visibility屬性的hidden值不同,其不爲被隱藏的對象保留其物理空間

inline :內聯對象的默認值。用該值將從對象中刪除行。如果其前後都是inline的則在同一行

display:block:

特點:

1、總是在新行上開始

2、該對象隨後的內容自動換行

3、高度,行高以及頂和底邊距都可控制

4、如果寬度缺省,則默認爲它容器的100%

作用:

1. 顯示被隱藏的塊級元素,一般是相對於diplay:none;使用的。

2. 定義非塊級元素,使css定義的長寬生效,比較常用於a、span這兩個標籤。

display:none;

用於隱藏對象內容,被隱藏的對象也不會佔用自身固有寬度高度空間。

例如在導航條的二級菜單中就會使用此屬性顯示和隱藏二級菜單。

display:inline;

功能:

常在li中使用,讓li排成一排。

特點:

和其他元素都在一行上

高,行高及頂和底邊距不可改變

寬度就是它的文字或圖片的寬度,不可改變

附:

常見的塊級元素

* address - 地址
* blockquote - 塊引用
* center - 舉中對齊塊
* dir - 目錄列表
* div - 常用塊級容易,也是css layout的主要標籤
* dl - 定義列表
* fieldset - form控制組
* form - 交互表單
* h1 - 大標題
* h2 - 副標題
* h3 - 3級標題
* h4 - 4級標題
* h5 - 5級標題
* h6 - 6級標題
* hr - 水平分隔線
* isindex - input prompt
* menu - 菜單列表
* noframes - frames可選內容,(對於不支持frame的瀏覽器顯示此區塊內容
* noscript - )可選腳本內容(對於不支持script的瀏覽器顯示此內容)
* ol - 排序表單
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表

常見的非塊級元素

* a - 錨點
* abbr - 縮寫
* acronym - 首字
* b - 粗體(不推薦)
* bdo - bidi override
* big - 大字體
* br - 換行
* cite - 引用
* code - 計算機代碼(在引用源碼的時候需要)
* dfn - 定義字段
* em - 強調
* font - 字體設定(不推薦)
* i - 斜體
* img - 圖片
* input - 輸入框
* kbd - 定義鍵盤文本
* label - 表格標籤
* q - 短引用
* s - 中劃線(不推薦)
* samp - 定義範例計算機代碼
* select - 項目選擇
* small - 小字體文本
* span - 常用內聯容器,定義文本內區塊
* strike - 中劃線
* strong - 粗體強調
* sub - 下標
* sup - 上標
* textarea - 多行文本輸入框
* tt - 電傳文本
* u - 下劃線
* var - 定義變量
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章