行內元素與塊級元素

2021-10-25 14:51:30 字數 1281 閱讀 5765

行內元素只佔據其內容本身所佔據的空間

塊級元素佔據其父元素的整個空間,通常瀏覽器會在塊級元素前後加乙個換行符。

style

="background-color

: hotpink;

">

span2span

>

style

="background-color

: hotpink;

">

span3span

>

>

span4span

>

由於換行符的原因,span2與span3,span4雖然在同一行,但是卻有有一點間隙

style

="width

: 100px;

height

: 100px;

background-color

: blue;

">

div>

style

="width

: 100px;

height

: 100px;

background-color

: red;

">

div>

內容

格式

寬高

內邊距和外邊距分類

舉例行內元素

span、a、b、i、img、imput、strong、select、lable、em、button、sup、sub

塊級元素

div、p、pre、h1~h6、ul、ol、li、head、section、aside、footer、dl、dd、dt、form、fieldset、table、thead、tbody、tfoot、tr

替代元素

img, input, textarea, select, object 、audio、video

空元素br、 hr 、img、 input 、link、 meta、

display屬性

div

float屬性設定了float:left/right;屬性的元素會轉換為塊級元素

position屬性

設定了position:absolute/fixed的元素會轉換為塊級元素

行內元素 塊級元素和行內塊級元素

而標籤的屬性是可以轉換的 display inline 轉換為行內元素 display linline block 轉換為行內塊元素 display block 轉換為塊級元素。行內元素 無法設定寬高 margin和padding上下無效,只有左右有效果 總是和相鄰的行內元素在同一行上,預設排列方式...

行內元素與塊級元素

1.行內元素與塊級元素直觀上的區別 行內元素會在一條直線上排列,都是同一行的,水平方向排列 塊級元素各佔據一行,垂直方向排列。塊級元素從新行開始結束接著乙個斷行。2.塊級元素可以包含行內元素和塊級元素。行內元素不能包含塊級元素。3.行內元素與塊級元素屬性的不同,主要是盒模型屬性上 行內元素設定wid...

塊級元素與行內元素

用法 塊級元素只能用於標籤中 塊級元素與行內元素 塊級元素與行內元素的幾個區別 格式 在預設情況下,塊級元素會從新起一行 內容模型 塊級元素可以包含其他的塊級元素和行內元素,這種模型會比行內元素有著更加大的結構 塊級元素列表 1.資訊 2.塊引用 3.定義列表中的條目描述 4.文件分割槽 5.定義列...