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

最新推荐文章于 2025-04-26 19:19:58 发布

beck4855255

最新推荐文章于 2025-04-26 19:19:58 发布

阅读量434

点赞数

分类专栏： web 文章标签：前端 javascript ViewUI

web 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了网页布局的基础概念，包括盒子模型、块级元素和内联元素的区别，以及如何使用定位（相对定位、绝对定位、浮动）实现页面布局。通过实例演示了如何在实际网页设计中应用这些知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[size=large]1.盒子模型[/size]
布局前我们首先了解盒子模型，这是布局的基石。
网上很多内容没有讲解清楚盒子模型，引起了不少误解。
一个DIV在布局的概念中自内到外包含五层含义。
1）文本元素本身的内容。
2）padding所占空间
3）border所占空间
4）margin所占空间
5）position中top,left所占空间。

图示：
[img]http://dl2.iteye.com/upload/attachment/0094/1943/4e733914-631e-3367-9d30-87cf422480fa.png[/img]

[size=medium]换种思路理解盒子模型[/size]
上面看起来有点抽象，我们可以想像一幢房子的结构情况。
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轴。
[img]http://dl2.iteye.com/upload/attachment/0094/2304/5c76aef0-76b8-3124-8565-55810862e21e.png[/img]

[size=large]2.块级元素和内联元素[/size]
有了上面的一些基础知识，接着往下看块级元素和内联元素。
块级元素是在浏览器中占据一行，比如div,p,form元素
内联元素不占据行，比如span,label,input元素
2.1)块级元素可以设置高宽（width,height）,而内联元素不能设置高宽。
正常情况下需要显示的内容使用内联元素包装，而块级元素大多情况只是用来定位。

[size=large]3.定位[/size]
定位前首先要了解文档流。普通的一个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>