內嵌元素、塊元素、內聯塊的區分以及內嵌元素的問題
阿新 • • 發佈：2018-07-30
charset 什麽 ron 一個 box div2 16px 段落 無序
那麽什麽是塊元素，什麽是內嵌元素他們都有什麽特征呢請看下面的代碼？
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 一、塊的特征 1、默認獨占一行 2、沒有寬度時，默認撐滿一排 3、支持所有css命令 1.無默認樣式： <div ><nav><section><header><footer> 2.有默認樣式 <h></h>標題 margin 字體加粗 字體大小 <p></p> 段落margin <dl></dl>列表maigin <dd></dd>列表項maigin <ul></ul> 無序maigin padding <ol></ol>有序maigin padding <li></li>列項表項 list-style：none 二、內嵌(內聯、行內)的特征 1、同排可以繼續跟同類的標簽 2、內容撐開寬度 3、不支持寬高 4、不支持上下的margin和padding 5、代碼換行被解析 1.無默認樣式： <span></span> 2.有默認樣式： a標簽 默認有顏色、下劃線 strong 默認有字體加粗，強調的意思 em，i 默認有字體傾斜 mark 默認有背景顏色、字體顏色 table 默認有表格邊框顏色，邊框間隙 big 默認有字體加大 b 默認有字體加粗 table表格邊框顏色、邊框間隙。 big字體加大 三、內聯塊 img input--> <style> span{ width: 200px; height:200px; background-color: red; padding: 30px; } div{ width: 200px; height: 200px; border:1px solid black; margin-top: 10px; } .span{ background: blue; /*margin: 30px;*/ padding: 30px; } </style> </head> <body> <span>內聯元素不支持寬高</span> <div><span class="span">span1</span></div> </body> </html>
我們再來了解一下他們之間是如何轉換的：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 1、塊轉內聯:display: inline; 2、內聯轉塊:display:block; 3、內聯塊:display: inline-block; 註意:IE67需要加.inlineB{*display: inline;*zoom: 1;} IE67用*前綴;IE6用_前綴。 inline-block特性：（1）塊在一行顯示 （2）行內屬性支持寬高 （3）沒有寬高時內容撐開寬高 問題：（1）內容換行被解析 （2）ie6,7不支持 --> <style> .body{ width: 700px; height: 400px; border: 1px solid #000000; font-size: 0; } .div1{ display: inline; width: 200px; height:200px; background-color: red; font-size: 16px; } .span1{ display: block; width: 200px; height:200px; background-color: red; border:10px solid yellow; margin-top: 70px; font-size: 16px; } #inlineB div,#inlineB span{ display: inline-block; width: 100px; height: 100px; background: #CCCCCC; border: 1px solid #F0AD4E; font-size: 16px; } .box{ width: 150px; height: 150px; background-color: red; border: 1px solid black; display: inline-block; *display: inline; *zoom: 1; font-size: 16px; } </style> </head> <body> <div class="body"> <div class="div1">div1</div> <span class="span1">span1</span> </div> <div id="inlineB" class="body"> <div>div2</div> <span>span2</span> </div> <div class="body"> <div class="box">box1</div> <div class="box">box2</div> </div> </body> </html>
最後我們來看一下內嵌元素的問題：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 1、內聯換行被解析出一個字體的間距，解決方法是給父集加font-size:0;自己重新設置字體。 */ #box1 span,#box1 div{ width: 200px; height: 200px; border:1px solid black; background-color: red; margin-right: 100px; margin-bottom: 10px; } #box2{ font-size: 0; } #box2 span{ border:1px solid red; font-size: 16px; } </style> </head> <body> <div id="box1"> <span>span1</span> <span>span2</span> <hr /> <span>span1</span> <div></div> </div> <div id="box2"> <span>span1</span><span>span2</span><span>span3</span> <hr /> <span>span1</span> <span>span2</span> <span>span3</span> </div> </body> </html>
內嵌元素、塊元素、內聯塊的區分以及內嵌元素的問題