塊元素與行內元素簡單總結

2021-08-20 17:59:03 字數 1321 閱讀 2028

1.  塊元素

特點:- 單個塊元素在瀏覽器中預設獨佔一行

- 兩個塊元素不能夠在一行顯示, 他們會自動換成兩行顯示

- 塊元素可以設定寬高等屬性.  

分類:標題標籤:  表示文件的標題, 除了具有塊元素基本特徵之外, 還含有預設的外邊距和字型大小

段落標籤:  表示文件中的乙個文字段落, 除了具有塊元素基本特徵, 還含有預設的外邊距

通用塊容器標籤:  表示文件中一塊內容, 具有塊元素基本特性, 沒有其他預設樣式

2.  行內元素

特點:- 多個內聯元素可以在一行顯示

- 內聯元素不能夠設定寬高, 設定了也沒有用, 不會顯示出效果

- 內聯元素的寬高由他們本身的內容多少來支撐, 內容多,寬高自動增加.

分類:超連線標籤a:  鏈結到另外乙個網頁, 具有內聯元素基本特徵, 預設文字藍色, 有下劃線 

通用內聯容器標籤span:  具有內聯元素基本特性, 沒有其他預設樣式,在文字段落的中間部分強調某一部分的時候呼叫span

標籤img: 在網頁中插入, 具有內聯元素基本特性, 但是它支援寬高設定

注意點:  

1.  可以根據這個元素是否在一行顯示判斷是否是塊元素或行內元素,比如:label與input不能在兩行各自顯示,可以使用塊元素將其包裹.

2.  塊元素:可以設定寬高值, 獨佔一行

3.  行內標籤:自動設定寬高值, 一行內可以有多個

4.  塊級元素可以包含行內元素,行內元素不能包含塊級元素

5.  a 標籤用於跳轉(超連結)   [跳轉網頁, 跳轉頁面, 跳轉檔案等]

6.  標題標籤用於設定標題, 共有6級

7.  div就是乙個無色透明的容器,看不見,摸不到

8.  img標籤主要用於設定

9.  p 標籤就是paragraph(段落)   通常用於包裹段落

10.  span是乙個行內元素通常用於p標籤內部,個別文字設定時使用.

塊元素 行內元素 行內塊元素

塊級元素 一行只能放乙個,可以設定寬度高度,預設為容器的100 可以包含任何標籤 常用元素 div hr p h1 h6 ul ol dl form table 行內元素 一行可以放多個行內元素,不可以直接設定寬度高度,預設為本身內容的寬度,容納文字或其他行內元素 常用元素 span a i em ...

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

a 標籤定義鏈結 b 字型加粗 br 換行 i 斜體文字效果 img 在網頁中嵌入 input 輸入框 span 組合文件中的行內元素 small 呈現小號字型效果 big 呈現大號字型效果 sub 定義下標文字 sup 定義上標文字 div 定義文件中的分割槽或節 dl 定義列表 dt 定義列表中...

行內與塊級元素總結

塊級元素 block 特性 總是獨佔一行,表現為另起一行開始,而且其後的元素也必須另起一行顯示 寬度 width 高度 height 內邊距 padding 和外邊距 margin 都可控制 內聯元素 inline 特性 和相鄰的內聯元素在同一行 寬度 width 高度 height 內邊距的top...