css display 属性的实验

关于display inline的实验

 

实验开始

首先建一个table

<table style='border:1px solid;width:300px'>  
  <tr>
    <td><div>div1</div><div>div2</div></td>
    <td>3</td>
  </tr> 
</table>
 

 效果

 两个div没有设宽度，所以他们默认的上下排列了

 

实验1

div1的display:inline

<table style='border:1px solid;width:300px'>  
  <tr>
    <td><div style='display:inline'>div1</div><div>div2</div></td>
    <td>3</td>
  </tr> 
</table>

 

效果

div1变短了，因为他要与他后面的元素放在一行了，但div2没有任何设定所以它还是默认的宽度，也就在div1的下面了

如果把div2的display也设上inline的话，他也会变短，然后就会和div1一行了,

如图：

 

事实上是如果在div1后面的元素是固定长的那么他们也会在一行的

<table style='border:1px solid;width:300px'>  
  <tr>
    <td><div style='display:inline'>div1</div><span style='outline:1px solid'>span2</span></td>
    <td>3</td>
  </tr> 
</table>

 span的宽度和内容一致

 

但是如果 span在前面 div在前面会怎么样呢

<table style='border:1px solid;width:300px'>  
  <tr>
    <td><span style='outline:1px solid; display:inline'>span1</span><div style='width: 50px'>div2</div></td>
    <td>3</td>
  </tr> 
</table>

 

 即使div2的宽度很小，他还是在下面，想让div2上去的话，只要也给他设定display:inline就好了，所以要注意这里。

 

实验2

之前的div都变短了，那么如果想要div还是自动变宽的话怎么办呢

<table style='border:1px solid;width:300px'>  
  <tr>
    <td><span style='outline:1px solid; display:inline; float:right;margin-top:6px'>span1</span><div>div2</div></td>
    <td><div style='display:inline; '>div2</div><span style='outline:1px solid; display:inline; '>span1</span></td>
  </tr> 
</table>

 效果

 请注意一下代码，第一个td里的span是写在div前面的，然后他用float:right飘到右边了，这样第一个td里的div就是自动宽度的

 

实验3

display的block, inline, inline-block的区别

block：是带有换行的区域，不管容器多宽都换行，div默认是这个

 

inline-block：容器够宽就排在一行，不够宽还是要换行， 这个换行是 整个line在换行

 

inline：容器够宽就排一行 像inline，不够宽就换行 像 block，
注意ie8以后的版本才有这个