我遇到的css奇葩问题

1、  两个input之间有间距：

代码：

<input />

<input type="button" value="点击"/>

将两个input写在同一行即可

         代码：

<input/><input type="button" value="点击"/>

        

此方法同样适用于同级li元素之间产生间距。

 

2、float: left之后父级元素高度消失问题

         代码：

         <divstyle="border: 1px solid black ;">

             <div style="float: left">123<br/>123</div>

</div>

将父级元素加上overflow:hidden; 即可

<divstyle="border: 1px solid black ;overflow: hidden;">

             <div style="float:left">123<br />123</div>

</div>

3、  两个display: inline-block;的元素无法对齐

代码：

<div style="display:inline-block; width:100px; height:40px;background:pink;">

    </div>

    <div style="display:inline-block;width:190px; height:50px; background:purple;">

</div>

在后一个div添加vertical-align:top即可

<div style="display:inline-block; width:100px; height:40px;background:pink;">

    </div>

    <divstyle="display:inline-block; width:190px; height:50px; background:purple;vertical-align:top;">

    </div>

用此方式可以避免使用float:left 来做左右布局。

4、  margin-top父级与子元素叠加问题

代码：

<div style="margin-top: 100px; height: 100px; width:800px;background: green;">

   <div style="margin: 30px; border: 1pxsolid green; width: 300px; height: 50px; background: orange ;">

 </div>

</div>

子元素的margin-top无效且父元素的margin-top叠加上了子元素的margin-top;

 

解决方法：父元素加上overflow: hidden;

<div style="margin-top: 100px; height: 100px;width: 800px;background: green;">

   <div  style="margin:30px; border: 1px solid green; width: 300px; height: 50px; overflow: hidden; background:orange ;"></div>

</div>

 

 

另：如果父级元素添加border则不存在此问题.