1. 程式人生 > >內嵌元素和塊級元素

內嵌元素和塊級元素

塊級元素:一般用來搭建網站架構、佈局、承載內容
內嵌元素:用以“強調、區分樣式、上標、下標、錨點”等等
inline-block:既具有 block 元素可以設定寬高的特性,同時又具有 inline 元素預設不換行的特性,也可以設定 vertical-align

塊級元素與內嵌元素的區別:
1、塊級元素預設獨佔一行。垂直方向排列
內聯元素預設會再一條直線上,是在同一行的。水平方向排列
2、塊級元素預設寬度為父元素的100%,可以設定寬度、高度
內嵌元素不可以控制寬和高,它的寬和高是隨標籤裡的內容而變化。
3、塊級元素可以設定外邊距margin 和 內邊距padding.
內嵌元素的水平方向的margin上下無效,padding上下無效(水平方向有效,豎直方向無效)
4、塊級元素可以包含內嵌元素和塊級元素。
內嵌元素不能包含塊級元素,只能包含文字或者其它行內元素。

塊元素和內嵌元素互相轉換:
display:block; (形式設為塊級元素)
display:inline; (形式設為行內元素)

在這裡插入圖片描述

在這裡插入圖片描述

在這裡插入圖片描述