内嵌元素、块元素、内联块的区分以及内嵌元素的问题
那么什么是块元素，什么是内嵌元素他们都有什么特征呢请看下面的代码？
<!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>
