前端布局的一些基本知识和思路 -

beck5859509

浏览: 110841 次
性别:
来自: 深圳

最近访客更多访客>>

loginboot

bitzgx

u012363178

ceohq

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

前端布局的一些基本知识和思路

博客分类：

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布局。

0
顶

0
踩

分享到：

JSON的数据结构与用法 | oracle中创建用户的步骤

2014-02-26 12:41
浏览 1182
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

前端布局的一些基本知识和思路

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

前端布局的一些基本知识和思路

评论

发表评论

相关推荐

JSON的数据结构与用法

javascript预编译思考

最近访客更多访客>>