block,inline,inline-block的区别
生活随笔
收集整理的這篇文章主要介紹了
block,inline,inline-block的区别
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
最近正在復(fù)習(xí)，緊張地準(zhǔn)備幾天后的筆試，然后剛好看到這個地方。
block：塊級元素，會換行，如div,p,h1~h6,table這些，可以設(shè)置寬高；
? ?inline:行內(nèi)元素，不換行，擠在一行顯示，如span,a,i,em,strong,mark,input,button之類,不能設(shè)置寬高。
? inline-block:行內(nèi)塊級元素，本質(zhì)還是塊級元素，可以設(shè)置寬高，只不過多了一個擠在一行顯示的特性，但是這種特性會有一個問題，就是會有一個默認(rèn)間距。
下面貼個代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>測試界面</title> 6 <style type="text/css"> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 12 .div{ 13 display:inline-block; 14 width: 100px; 15 height: 100px; 16 background-color: aqua; 17 text-align: center; 18 line-height: 100px; 19 font-size: 25px; 20 border:1px solid #000; 21 } 22 23 </style> 24 </head> 25 <body> 26 <div class="div">111</div> 27 <div class="div">222</div> 28 <div class="div">333</div> 29 30 </body> 31 </html>?
可以看到是有默認(rèn)間隙的，而要去除這種間隙的方法我目前知道兩種，一種是在其父級容器中將font-size設(shè)置為0，另外一種則是將自身設(shè)置為浮動；選用任意一種方法后，默認(rèn)間距都消失不見了。
另外還有一個很容易被忽略的問題，就是對于行內(nèi)元素來說，無論是padding還是margin，都是只有左右的真實(shí)有效，而上下的是無效的。把上面代碼改一下，換成一堆span元素，并設(shè)置每個元素的margin為30px;去掉line-height，代碼如下：
1 .span{ 2 margin: 30px; 3 width: 100px; 4 height: 100px; 5 background-color: aqua; 6 text-align: center; 7 font-size: 25px; 8 border:1px solid #000; 9 }可以看到最后的效果是這樣的：
?
總結(jié)
以上是生活随笔為你收集整理的block,inline,inline-block的区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html5与css3入门知识点精炼
- 下一篇： js使用hover事件做一个“个人中心”