CSS(二)標籤顯示模式

2022-08-13 05:21:19 字數 489 閱讀 8505

每個塊級元素都會獨自佔一行或者多行,可以對其設定寬度(預設是容器的100%)、高度及對齊等,

可以容納內聯元素或者其他塊元素(p、h1不要包裹其他塊級元素)。

典型的又:div、table、ul、p、h1等。

內聯元素不占有獨立的區域,僅僅靠自身的字型大小和影象尺寸來支撐結構,一般不可以設定寬度(預設為本身內容的寬度)、高度、對齊等屬性,

但水平方向上的padding和margin可以設定,只能放文字和其他行內元素(a除外)。

典型的有:span、strong、em等。

屬於行內元素的特殊標籤---img、input、td,可以對它們設定寬高和對齊屬性。

1.塊轉行內: display:inline

2.行內轉塊: display:block

3.轉換為行內塊: display:inline-block

在設定樣式的時候行內元素,行內塊元素可以當作文字來看(可以設定text-align該變其位置),塊級元素不行。

css標籤顯示模式

1.1.1 塊級元素 block level 常見的塊級元素 等,其中標籤是典型的塊元素。塊級元素的特點 1 比較霸道,自己獨佔一行 2 高度,寬度,外邊距和內邊距都可以控制 3 寬度預設是父元素寬度的100 4 是乙個容器及盒子,裡面可以放行內或者塊級元素 1.1.2 行內元素 inline le...

css標籤的顯示模式

塊級元素 block 常見的塊元素,等,最典型的就是div 特點 1 總是從新行開始 2 高度,行高,外邊距以及內邊距都可以控制 3 預設寬度是容器100 行內元素 inline 常見的行內元素,等,最典型的就是特點 1 高度,寬度設定不會顯示效果 2 預設的寬度就是本身內容的寬度 3 和相鄰行內元...

CSS系列 02 標籤顯示模式 display

常見的塊元素有常見的行內元素有 等,其中標籤最典型的行內元素。行內元素的特點 1 和相鄰行內元素在一行上,但是之間會有空白縫隙 2 高 寬無效,僅外邊距 水平方向 以及內邊距 水平方向 可以正常控制 3 寬度預設就是它本身內容的寬度 注意 如果元素為行內元素,其垂直方向的內邊距也會生效,只是該元素會...