盒子模型

conten 内容区域　　　padding 内边距　　border　边框　　margin　外边距

 

１、height 与 width　针对content设置　,如果无height 或height 会自适应宽度和通过文字，内容形成高度。　

对于行内元素，height 　与width 是无效的，是靠里面内容撑开。

 

例子：

<div style="height:100px;100px;border:1px solid red;">
   大家好<br/>好好好
 </div>

 

 

针对行内元素：height 　与width 是无效

<span style="100px;height: 100px ;border: 1px solid black">
         一点都不好
         <br/>
     </span>

 

 

２、常规流设置：margin padding　注意事项：

　　　　　　　　a1、margin: 针对块级元素　　垂直方向margin 会发生重叠，两个div上下布置的最后距离取两者最大值。

　　　　　　　　　　　　　　　　　　　　　　水平方向无重叠现象。

 

<div style="100px;height:500px;border: 1px solid red">
         <div style="100px;margin-bottom:20px;border: 1px solid black">
             df
         </div>
         <div style="100px;margin-top:20px;border: 1px solid black">
             sf
         </div>
     </div>

 

上下距离是20px，而不是40px.

    

              a2、margin : 针对内嵌元素　　　　　垂直方向margin 无效果

　　　　　　　　　　　　　　　　　　　　　水平方向有效果，不会发生重叠。

 

<div>
         <span style="margin-right:20px;margin-top:20px;border: 1px solid red">
             开始测试
         </span>
         <span style="margin-top:20px;border: 1px solid red">
             开始测试
         </span>
     </div>

 

 

            b1、padding :针对块级元素　　　　都有效果　　

　　　 b2、padding :针对内嵌元素　　　　垂直方向无效果

　　　　　　　　　　　　　　　　　　　　水平方向有效果

 

　<div style="border:1px solid red;float: left">
         <div style="border:1px solid black;padding: 10px 20px 30px 40px">
             开始测试
         </div>
     </div>

 

这个例子也可以让我们看明白浮动的包裹性。

 

３、浮动产生的破坏性和包裹性

　　a、破坏性问题１

 

　　<div style="clear:both;border:10px solid darkslategray;">
         <span style="float:left;border: 10px solid red">
             开始测试
         </span>
     </div>

 

　　我们可以看到因为数字浮动的原因，字已经跑出来，而里面没有内容撑住，就塌陷了。

　　怎样才能让他不塌呢，只需要使用overflow:hidden;就可以了。

 

解决办法１：

<div style="overflow:hidden;clear:both;border:10px solid darkslategray;">
         <span style="float:left;border: 10px solid red">
             开始测试
         </span>
     </div>

 

 

 

　　a、破坏性问题２：

　<div style=" 200px;height: 200px;border: 1px solid blue">
         <div style="border:1px solid black;float: left">
             开始测试
         </div>
         <div style="border: 1px solid red">
             开始测试
         </div>
     </div>

 

　　

因为浮动的原因，两个块在一行，用clear清除下浮动对象即可。

 

  解决办法２：

       <div style=" 200px;height: 200px;border: 1px solid blue">
         <div style="border:1px solid black;float: left">
             开始测试
         </div>
         <div style="clear:both;border: 1px solid red">
             开始测试
         </div>
     </div>

注：clear:both;要跟在float: left（浮动元素）后面才会有效果。

　　b、包裹性