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样式如下:
<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布局。