常用布局小節

常見的布局問題

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.父元素跟着浮動
           

(待更新)