常用布局小节

常见的布局问题

1.居中

块级元素--定宽居中
	 div{
		  width:0px | 0%;
		  margin-left:auto;
		  margin-right:auto;
	  }
	  行内块元素(文本居中)
	  .baba{
		  text-align:center;
	  }
	  .son{
		  display:inline-block;
	  }
           

2.定位问题

2.1 相对定位

大多情况，相对定位的作用是用来

约束“绝对定位”的参考点

2.2 绝对定位

忽略了，定位参考点，

参考点：position属性非static的“父元素”

3.假高度，假宽度

填充元素后，记得去除假宽度
如果是浮动元素，建议保留宽高
ele{
	float:left;
	width:20%;
	height:200px;
}
           

4.字体的大小，行高

5.行内块级元素，垂直居中问题

6.表单元素，输入文字与边框的内边距问题

input{
	   box-sizing:border-box;
	   padding:4px 8px;
   }
   tips 设置input与元素placeholder(输入框里面文字样式)
           

7.使用浮动后，没有清除浮动

清除浮动的方式
   1.插入.clear的div
   2.伪对象after,清除浮动
   3.父元素设置高度
   4.父元素overflow:hidden(触发BFC)
   5.父元素跟着浮动
           

(待更新)