前端布局的一些基本知识和思路
1.盒子模型
布局前我们首先了解盒子模型，这是布局的基石。
网上很多内容没有讲解清楚盒子模型，引起了不少误解。
一个DIV在布局的概念中自内到外包含五层含义。
1）文本元素本身的内容。
2）padding所占空间
3）border所占空间
4）margin所占空间
5）position中top,left所占空间。
图示：
换种思路理解盒子模型
上面看起来有点抽象，我们可以想像一幢房子的结构情况。
1）床所占的空间是DIV里文本的内容。
2）床离墙的距离为padding的大小。
3）而墙的厚度即为border的大小。
4）每幢楼之间的距离即为margin的大小。其中margin又分为margin-top,margin- right,margin-bottom,margin-left;是一种从顺时针的方向。
5) 楼相对于楼所在小区某个点的距离position的top,left的大小。对于div元素来讲， 这个就是相对于父亲元素的大小。
从上面的分析，我们可以得出浏览器中页面的布局是一个二维坐标图。以浏览器左上角为坐 标原点进行计算。横向为大于0的X轴，纵向为向下为正的Y轴。
2.块级元素和内联元素
有了上面的一些基础知识，接着往下看块级元素和内联元素。
块级元素是在浏览器中占据一行，比如div,p,form元素
内联元素不占据行，比如span,label,input元素
2.1)块级元素可以设置高宽（width,height）,而内联元素不能设置高宽。
正常情况下需要显示的内容使用内联元素包装，而块级元素大多情况只是用来定位。
3.定位
定位前首先要了解文档流。普通的一个html文档即称为文档流。
文档流是从上而下的排列方式。往html中添加一个div元素，则
会自动添加到当前文档流中。当然如果自上而下的纵向布局肯定不满足
业务需要。
position:absolute定位：
使用postion:absolute方式，会使元素脱离原来的文档流，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块(body元素)。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，absolute依赖于父亲元素，如果父亲元素没有position定位过，则按相距body元素的top,left来定位。原来占据的空间会被后续元素占据。一般来讲这种情况
父亲元素需要设置成相对定位，并且父亲元素需要设置高和宽。
通过绝对定位，元素可以放置到页面上的任何位置。
position:relative定位
relative是相对于自身的定位方式，它对应的top,left的大小是相对于没有定位时的大小，并且设置的top,left不能够被其它元素占据。因为他是在文档流中。纵向布局的父亲元素一般都是使用relative.
float：left,right定位
float主要是用来做横向元素的布局，因为默认文档流是纵向布局的。设置了元素的float属性以后，元素就相对于父亲元素进行了向左或者向右浮动，并且元素浮动以后本身还是一个块级元素，所以可以使用margin,padding等属性；连续的兄弟结点进行浮动以后就显示横向块了。使用float元素以后由于脱离了文档流，后续元素会补齐原来文档流的空间，所以一般需要设置下一个元素的clear:both
以下示例当child1元素设置为absolute以后，child2元素会占据原来文档流中child1的空间，表现出来的现象就是重叠，当然可以指定元素的z-index进行谁优先显示。
其CSS样式如下：
总结： 布局思路
定位外围元素一般使用相对定位position:relative或者float方式，然后再使用绝对定位position:absolute。感兴趣的同学可以看一下优酷首页和腾讯体育的布局，横向功能都采用了float布局。
布局前我们首先了解盒子模型，这是布局的基石。
网上很多内容没有讲解清楚盒子模型，引起了不少误解。
一个DIV在布局的概念中自内到外包含五层含义。
1）文本元素本身的内容。
2）padding所占空间
3）border所占空间
4）margin所占空间
5）position中top,left所占空间。
图示：
换种思路理解盒子模型
上面看起来有点抽象，我们可以想像一幢房子的结构情况。
1）床所占的空间是DIV里文本的内容。
2）床离墙的距离为padding的大小。
3）而墙的厚度即为border的大小。
4）每幢楼之间的距离即为margin的大小。其中margin又分为margin-top,margin- right,margin-bottom,margin-left;是一种从顺时针的方向。
5) 楼相对于楼所在小区某个点的距离position的top,left的大小。对于div元素来讲， 这个就是相对于父亲元素的大小。
从上面的分析，我们可以得出浏览器中页面的布局是一个二维坐标图。以浏览器左上角为坐 标原点进行计算。横向为大于0的X轴，纵向为向下为正的Y轴。
2.块级元素和内联元素
有了上面的一些基础知识，接着往下看块级元素和内联元素。
块级元素是在浏览器中占据一行，比如div,p,form元素
内联元素不占据行，比如span,label,input元素
2.1)块级元素可以设置高宽（width,height）,而内联元素不能设置高宽。
正常情况下需要显示的内容使用内联元素包装，而块级元素大多情况只是用来定位。
3.定位
定位前首先要了解文档流。普通的一个html文档即称为文档流。
文档流是从上而下的排列方式。往html中添加一个div元素，则
会自动添加到当前文档流中。当然如果自上而下的纵向布局肯定不满足
业务需要。
position:absolute定位：
使用postion:absolute方式，会使元素脱离原来的文档流，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块(body元素)。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，absolute依赖于父亲元素，如果父亲元素没有position定位过，则按相距body元素的top,left来定位。原来占据的空间会被后续元素占据。一般来讲这种情况
父亲元素需要设置成相对定位，并且父亲元素需要设置高和宽。
通过绝对定位，元素可以放置到页面上的任何位置。
position:relative定位
relative是相对于自身的定位方式，它对应的top,left的大小是相对于没有定位时的大小，并且设置的top,left不能够被其它元素占据。因为他是在文档流中。纵向布局的父亲元素一般都是使用relative.
float：left,right定位
float主要是用来做横向元素的布局，因为默认文档流是纵向布局的。设置了元素的float属性以后，元素就相对于父亲元素进行了向左或者向右浮动，并且元素浮动以后本身还是一个块级元素，所以可以使用margin,padding等属性；连续的兄弟结点进行浮动以后就显示横向块了。使用float元素以后由于脱离了文档流，后续元素会补齐原来文档流的空间，所以一般需要设置下一个元素的clear:both
以下示例当child1元素设置为absolute以后，child2元素会占据原来文档流中child1的空间，表现出来的现象就是重叠，当然可以指定元素的z-index进行谁优先显示。
其CSS样式如下：
<html>
<head>
<style>
.parent{
border:1px solid red;
width:400px;
height:400px;
position:relative;
}
.child1{
position:absolute;
top:10px;
left:10px;
margin-top:30px;
margin-left:10px;
width:200px;
height:200px;
border:1px solid red;
background-color:green;
}
.child2{
position:relative;
top:20px;
left:20px;
width:100px;
height:100px;
border:1px solid red;
background-color:blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
</body>
</html>
总结： 布局思路
定位外围元素一般使用相对定位position:relative或者float方式，然后再使用绝对定位position:absolute。感兴趣的同学可以看一下优酷首页和腾讯体育的布局，横向功能都采用了float布局。