塊級元素(block)特性:總是獨佔一行,表現為另起一行開始,而且其後的元素也必須另起一行顯示;內聯元素(inline)特性:和相鄰的內聯元素在同一行,接下來為大家詳細介紹下,感興趣的朋友可以參考下哈
塊級元素(block)特性:
•總是獨佔一行,表現為另起一行開始,而且其後的元素也必須另起一行顯示;
•寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制;
內聯元素(inline)特性:
•和相鄰的內聯元素在同一行;
•寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變,就是裡面文字或的大小;
塊級元素主要有:
複製**
**如下:
address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul
內聯元素主要有:
複製**
**如下:
a , abbr , acronym , b , bdo , 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
可變元素(根據上下文關係確定該元素是塊元素還是內聯元素):
複製**
**如下:
css中塊級、內聯元素的應用:
利用css我們可以擺脫上面**裡html標籤歸類的限制,自由地在不同標籤/元素上應用我們需要的屬性。
主要用的css樣式有以下三個:
•display:block -- 顯示為塊級元素
•display:inline -- 顯示為內聯元素
•dipslay:inline-block -- 顯示為內聯塊元素,表現為同行顯示並可修改寬高內外邊距等屬性
我們常將元素加上display:inline-block樣式,原本垂直的列表就可以水平顯示了。發現了不少的問題:
1.內聯元素的margin-left / margin-right及padding-left / padding-rigtht是可以控制的,所以可以通過這4個屬性來控制內聯元素的寬度。
2.內聯元素的內部也可以放塊級元素標籤,而且內部的塊級元素標籤會撐大外部的內聯標籤,所以可以通過放塊元素來控制內聯元素的高度(網上介紹的是內聯元素只能放文字及其他內聯元素)
例如:
複製**
**如下:
測試
html塊級元素和內聯元素
塊級元素 就是乙個方塊,像段落一樣,預設佔據一行出現 內聯元素 又叫行內元素,顧名思義,只能放在行內,就像乙個單詞,不會造成前後換行,起輔助作用。一般的塊級元素諸如段落 標題.列表,body 元素的內容會顯示在瀏覽器中。title 元素的內容會顯示在瀏覽器的標題欄中。從上圖的例子可以看出,塊級元素預...
html 內聯元素和html 塊級元素概述及區別
塊級元素 block 特性 總是獨佔一行,表現為另起一行開始,而且其後的元素也必須另起一行顯示 寬度 width 高度 height 內邊距 padding 和外邊距 margin 都可控制 內聯元素 inline 特性 和相鄰的內聯元素在同一行 寬度 width 高度 height 內邊距的top...
html塊級元素和內聯元素小結
block element 塊級元素 顧名思義就是以塊顯示的元素,高度寬度都是可以設定的。比如我們常用的 預設狀態下都是屬於塊級元素。塊級元素比較霸道,預設狀態下每次都佔據一整個行,後面的內容也必須再新起一行顯示。當然非塊級元素也可以通過css的display block 將其更改成塊級元素。此外還...