android 三种布局方式,三种布局方法

布局方式有三种：流式布局，浮动布局，绝对定位布局；

流式布局，即标准文档流，利用盒子模型的距离来实现各个元素的布局；

概念：从左到右，从上到下渲染内容，由块级标签和行级标签组成；

浮动布局，即通过float属性来实现各个元素的布局；

float:none | left | right;

特点：

1.元素会移动直到碰到容器的边缘为止；

2.设置了浮动的元素仍然处于标准文档流中；

3.当元素没有设置宽度，而设置了浮动属性以后，元素的宽度会随内容改变；

4.当元素设置了浮动之后会对他相邻的元素造成影响，相邻元素特指紧邻后面的元素，可以用clear：both清除浮动；

5.当子元素设置了浮动而父元素没有设置浮动时，也会对其父元素造成影响，使其父元素缩成一条，这时候使用clear来清除浮动没有效果，需要在其父元素中加入{width:100%;overflow:hidden;}来清除浮动。

例子：浮动常用来做横向的两列布局或者三列布局，这里展示的是三列布局，左右宽度固定，中间随浏览器的大小而改变；

此处使用浮动定位实现

此处使用浮动定位实现

此处使用浮动定位实现

/*这是css*/

#container{

width: 100%;

overflow: hidden;/*这两条语句来清除由于子元素使用浮动造成父元素受到的影响*/

background-color: #ffff99;

border:1px solid #111111;

padding: 5px;

}

#left{

float: left;

background-color: black;

width:200px;

height: 100px;

}

#center{

float:left;

background-color: red;

width: 50%;

height: 100px;

}

#right{

float: left;

background-color: blue;

width:200px;

height: 100px;

}

3.绝对定位布局

概念：position拥有三种定位形式，默认静态定位(static)相对定位(relative)绝对定位(absolute和fixed)

相对定位：相对于自身位置进行偏移(前提你得设置偏移量)，仍处于标准文档流中，会产生空间的层堆叠。

绝对定位：建立了以自己的父包含块为基准的定位，完全脱离了标准文档流会产生空间的层堆叠；

对绝对定位的分析分为两种情况：1.未设置偏移量时，无论其父包含层有没有设置定位属性，它都留在初始位置。2.设置偏移量时，会以它的设置了定位的父包含层为基准进行偏移，若没有已经设置定位属性的父包含层时，它会以HTML为基准进行偏移。

例子：绝对定位也会被用在两页布局或者三列布局，但是应用不如浮动定位那么多，以下是三列布局，左右宽度固定，中间随浏览器变化。

此处使用绝对定位实现

此处使用绝对定位实现

此处使用绝对定位实现

/*这是css*/

#container{

position: relative;

background-color: #ffff99;

border:1px solid #111111;

padding: 5px;

height: 200px;

}

#left{

position: absolute;

left: 5px;

top: 5px;

background-color: black;

width:200px;

height: 100px;

}

#center{

position: absolute;

top: 5px;

left: 205px;

background-color: red;

width: 70%;

height: 100px;

}

#right{

background-color: blue;

width:200px;

height: 100px;

position: absolute;

top: 5px;

right: 5px;

}