常用前端布局等技巧

div宽度自适应，内容的居中显示。

方法一

外层div设置：text-align: center;
内层div设置：margin: 0 auto; width: ***px; 必须得有宽度值才会起作用。
内层div设置：**display:inline-block;*display:inline** 兼容IE6-7

方法二

外层div设置：

float: left; /* 自适应内容宽度 */
position: relative;
left: 50%; 

外层div设置：

position: relative;
left: -50%; 

两列分布

<div>
   <div style="width: 50%; height: 100px; background-color: red; float: left;"></div>
   <div style="width: 50%; height: 100px; background-color: blue; float: left;"></div>
</div>

div布局出现错误的可能原因

浮动影响

clear:both清除浮动

CSS

.divcss5{ width:400px;border:1px solid #F00;background:#FF0} 
.divcss5-left,.divcss5-right{width:180px;height:100px; 
border:1px solid #00F;background:#FFF} 
.divcss5-left{ float:left} 
.divcss5-right{ float:right} 
.clear{ clear:both} 

HTMl

<div class="divcss5"> 
    <div class="divcss5-left">left浮动</div> 
    <div class="divcss5-right">right浮动</div> 
    <div class="clear"></div> 
</div> 

bootstrap

class = "clearfix"

<div class="tab-pane active panel-style" id="panel-undergraduate">
    <div id="undergraduate_list">
    </div>
    <div class="clearfix"></div>
    <div class="control_wrap">
        <div id="undergraduate_control" class="page_control"></div>
    </div>
</div>

空格问题

   半角的不断行的空白格（推荐使用）  
   半角的空格   
   全角的空格  
   窄空格，全称是Thin Space。我们不妨称之为“瘦弱空格”，就是该空格长得比较瘦弱，身体单薄，占据的宽度比较小。它是em之六分之一宽。  
‌  零宽不连字，全称是Zero Width Non Joiner，简称“ZWNJ”，是一个不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字，而是以这两个字符原本的字形来绘制。  
‍  零宽连字，全称是Zero Width Joiner，简称“ZWJ”，是一个不打印字符，放在某些需要复杂排版语言（如阿拉伯语、印地语）的两个字符之间，使得这两个本不会发生连字的字符产生了连字效果。零宽连字符的Unicode码位是U+200D (HTML: ‍ ‍）。

垂直和水平居中

方法1

<div class="vertical">content</div>
.vertical {
	height: 100px;/*元素的高度*/
	position: absolute;
	top: 50%;/*元素的顶部边界离父元素的的位置是父元素高度的一半*/
	margin-top: -50px;/*设置元素顶边负边距，大小为元素高度的一半*/
}

方法2

• 重要： 先对元素 设置高度
• 运用以下规则

position: absolute;
margin: auto;
top: 0; left: 0; right: 0; bottom: 0;
overflow: auto;