HTML+CSS进阶学习摘录（Display属性）（三）

一、display:none 与 visbility:hidden

    display:none  元素隐藏，不占据原来位置

   visibility:hidden 元素隐藏，占据原来位置

二、display:table-cell

 (1)图片垂直居中于元素

父元素
{
display:table:cell;
vertical-align:center;
}
子元素
{
  vertical-align:center;
}

（2）等高布局

#wrapper
{
	display:table-row;
	width:auto;
	height:auto;
}
#img-box
{
	display:table-cell;
	vertical-align:middle;
	text-align:center;
	width:150px;
	height:auto;
	border:1px solid red;
}
#text-box
{
	display:table-cell;
	width:200px;
	border:1px solid red;
	border-left:none;
	padding:10px;
}

<div id="wrapper">
  <div id="img-box">
  <img src="m1.jpg" alt="" />
  </div>
  <div id="text-box">
  <span>Dark light, just light each other. The responsibility that 
you and my shoulders take together, such as 
one dust covers up. Only afraid the light suddenly put
 out in theendless dark night and countless
 loneliness.</span>
  
  </div>
</div>

                                                           

（3）自动平均划分元素

*{
	padding:0;
	margin:0;
}
ul
{
	list-style-type:none;
	display:table;
	width:300px;
}
li{
	 display:table-cell;
	 height:60px;
	 line-height:60px;
	 text-align:center;
	 color:white;
}
ul li:nth-child(1){ background-color:Red;}
ul li:nth-child(2){ background-color:Orange;}
ul li:nth-child(3){ background-color:Blue;}
ul li:nth-child(4){ background-color:silver;}
ul li:nth-child(5){ background-color:Purple;}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

                                                       

三、去除inline-block 元素间距

在父元素中添加
父元素
{
font-size:0;
}