談談行內元素和塊元素的區別和居中問題

2021-07-28 10:17:15 字數 1184 閱讀 5196

行內元素,也叫內聯元素、內嵌元素等,是眾多的行內元素能在一行中顯示的元素。行內元素的主要作用是用來新增特殊樣式,如元素,元素,元素,,下標 上標等等。

塊元素,就是會獨佔一行的元素,比如,

等等。行內元素和塊元素的區別如下:   

行內元素

塊級元素

預設開始位置

和其他元素都在一行上

總是在新行上開始

寬度寬度就是它的文字或的寬度,不可改變

寬度預設是它的容器的100%,除非設定乙個寬度。

高度高,行高及外邊距和內邊距不可改變

高度,行高以及外邊距和內邊距都可控制

padding、margin設定

水平方向的padding-left、padding-right、margin-left、margin-right都產生邊距效果,但豎直方向的padding-top、padding-bottom、margin-top、margin-bottom卻不會產生邊距效果。

可以設定

display

incline

block

容納的元素

內聯元素只能容納文字或者其他內聯元素

它可以容納內聯元素和其他塊元素

轉換display:block變成行內元素,或者將display:inline-block變成行內塊元素

display:inline變成行內元素,或者將display:inline-block變成行內塊元素

怎麼設定行內元素和塊元素的居中方式?

1)行內元素水平居中:

以div為例,要讓div裡面的文字水平居中,可以設定text-align:center;。

2)行內元素垂直居中:

以div為例,要讓div裡面的文字垂直居中,可以同時設定height和line-height值相等即可,如:div 

3)塊元素水平居中:

以div為例,要讓div裡面的p水平居中,需要同時設定p的寬度和margin:0 auto;

如:div p 

注意此處的塊級元素p一定要設定寬度

4)塊元素垂直居中:

以div為例,要讓div裡面的p垂直居中,需要同時設定p的寬度和margin-top值;

下面是對div中的p元素作水平居中和垂直居中案例:

這是p

行內元素和塊元素的區別

注意 1.只有文字才組成的段落,例如p標籤,h1,h2,h3,h4,h5,h6,屬於文字類塊級元素,裡面不能放其他塊級元素。2.鏈結裡面不能再放鏈結。3.行內元素內部只能放文字和行內元素,但是a標籤裡面可以放塊元素。行內元素 1.和相鄰行內元素在一行上。2.高,寬無效,但水平方向的padding和m...

塊級元素和行內元素區別 以及行內塊元素

塊級元素的特點 1 寬度預設是容器的100 2 高度,行高 外邊距以及內邊距都可以控制。3 總是從新行開始 4 可以容納內聯元素和其他塊元素。行內元素的特點 1 預設寬度就是它本身內容的寬度。2 高 寬無效,但水平方向的padding和margin可以設定,垂直方向的無效。3 和相鄰行內元素在一行上...

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

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