html標(biāo)簽有三大性質(zhì)，如果不清楚這些東西，在使用css添花的時候可能會糊涂的不知所措。

一、塊級元素

塊元素會獨自占據(jù)一整行，或者多行，可以任意設(shè)置其大小尺寸，是用于搭建網(wǎng)頁布局的必須部分，使網(wǎng)頁結(jié)構(gòu)更加緊湊合理。

• 典型代表：div,h1-h6,p,ul,li
• 特點：

1.獨占一行，普通流中不予許有和它同占一行的

2.可以設(shè)置其寬度、高度，內(nèi)外邊距

3.嵌套(包含)下，子塊元素寬度(沒有定義情況下)和父塊元素寬度默認(rèn)一致

4.可以容納其他元素，p元素是例外

二、行內(nèi)元素

• 典型代表： span ,a, ,strong , em, del, ins
• 特點：

1.在一行上顯示，如果不是塊級元素，所有的元素都會并排一起

2.設(shè)置寬高無效，水平方向的padding和margin屬性可以設(shè)置，但是垂直方向上的無效。

3.元素的寬和高就是內(nèi)容撐開的寬高，自身無法設(shè)置。

4.只能容納其他行內(nèi)元素或者文本，a元素是例外，但是放了塊級元素就不能放鏈接了。

三、行內(nèi)塊元素(內(nèi)聯(lián)元素)

• 典型代表 input img
• 特點：

1.和相鄰行內(nèi)元素在同一行，但是之間會有空白縫隙。

2.默認(rèn)寬度是他本身內(nèi)容的寬度，但是也可以手動設(shè)置

三、轉(zhuǎn)換屬性的方法

• 塊元素轉(zhuǎn)行內(nèi)元素：display:inline;
• 行內(nèi)元素轉(zhuǎn)塊元素：display:block;
• 塊和行內(nèi)元素轉(zhuǎn)行內(nèi)塊元素：display:inline-block;

四、行高

• 瀏覽器默認(rèn)文字大小：16px
• 行高：是基線與基線之間的距離，行高=文字高度+上下邊距
• 一行文字行高和父元素高度一致的時候，垂直居中顯示

實例：開發(fā)網(wǎng)頁時，你會發(fā)現(xiàn)，圖片和底部對不齊，他們之間會有間隙，那么為什么會有這個間隙呢？

原因：這是因為img元素后面會跟一個空白符，會使它的高度多出3px。至于這個空白符出現(xiàn)的原因嘛，是因為img元素是行內(nèi)元素，行內(nèi)元素默認(rèn)會有3px的間距。因此當(dāng)我們的塊級元素div包含這個行內(nèi)元素的時候底部就出現(xiàn)了3px的間距。

解決方法：將img轉(zhuǎn)換為塊級元素就好了，{display:block}

---

如果喜歡點擊加關(guān)注，有什么問題或者建議可以在下方評論留言哦~~

總結(jié)

以上是生活随笔為你收集整理的div中的p标签于img设置同一水平_前端工程师：css中一些需要注意的东西的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。