常见布局 、样式实现方法

普通流(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;}

 

　　

　　

 其他常规实现的处理方式

1、div实现button自适应长度，通过添加padding来添加与border的间距，不指定固定宽度

2、div不指定宽度，居中实现，第一种方法：margin：auto；第二种方法：display:inline-block;父容器text-algin:center;