常見佈局 、樣式實現方法

普通流(Normal Flow)

在普通流中，元素按照其在 HTML 中的前後位置至上而下佈局，在這個過程當中，行內元素水平排列，直到當行被佔滿而後換行，塊級元素則會被渲染爲完整的一個新行， 除非另外指定，不然全部元素默認按順序渲染。

浮動 (Floats)

在浮動佈局中，元素首先按照普通流的位置出現，而後根據設置的浮動的方向儘量的向左邊或右邊偏移渲染。浮動元素會影響兄弟元素

絕對定位 (Absolute Positioning)

絕對定位不佔位，相對定位佔位，絕對定位不會影響兄弟元素

三欄佈局的實現方式

一：float 文檔dom順序--中、左、右

html結構

<div class="center"><div>a</div></div>
<div class="left">b</div>
<div class="right">c</div>

css代碼

div{height:200px;}
.center{float:left;width:100%;}
.center div{margin:0 150px;}
.left{float:left;width:150px;margin-left:-100%;background:blue;}
.right{float:left;width:150px;margin-left:-150px;background:red}

二：float 文檔dom順序--左中右

html結構

<div class="left">b</div>
<div class="center"><div>a</div></div>
<div class="right">c</div>

css代碼

div{height:200px;}
.center{float:left;width:100%;margin:0 -150px;}
.center div{margin:0 150px;background:green;}
.left{float:left;width:150px;background:blue;}
.right{float:left;width:150px;background:red}

 

三：position絕對定位

html結構

<div class="left">b</div>
<div class="center">a</div>
<div class="right">c</div>

css代碼

.left{width:150px;height:100%;background:blue;position:absolute;top:0;left:0;}
.right{width:150px;height:100%;background:red;position:absolute;top:0;right:0;}
.center{background:green;position:absolute;top:0;right:150px;bottom:0;left:150px;}

 

　　

　　

 其餘常規實現的處理方式

一、div實現button自適應長度，經過添加padding來添加與border的間距，不指定固定寬度

二、div不指定寬度，居中實現，第一種方法：margin：auto；第二種方法：display:inline-block;父容器text-algin:center;