您的位置：首页 > Web前端 > CSS

css布局模型

2016-03-16 22:42 507 查看

在网页中，元素有三种布局模型：
1、流动模型（Flow）

2、浮动模型 (Float)

3、层模型（Layer）

流动布局模型具有2个比较典型的特征：

第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。

第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。

通常我们使用的都是在对应标签的css里面添加左浮动 float:left 或者右浮动
float:right解决

层模型有三种形式：

1、绝对定位(position: absolute)

2、相对定位(position: relative)

3、固定定位(position: fixed)

Relative与Absolute组合使用

1、参照定位的元素必须是相对定位元素的前辈元素：

<div id="box1"><!--参照定位的元素-->
<div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>

从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。

2、参照定位的元素必须加入position:relative;

#box1{
width:200px;
height:200px;
position:relative;
}

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

#box2{
position:absolute;
top:20px;
left:30px;
}

这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。
下面为大家演示一个例子

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>相对参照元素进行定位</title>

<style type="text/css">

div{border:2px red solid;}

#box1{

width:200px;

height:200px;

position:relative;

}

#box2{

position:absolute;
top:20px;
left:30px;

}

#box3{

width:200px;

height:200px;

}

#box4{

width:99%;

}

</style>

</head>

<body>

<div id="box1">
<div id="box2">相对参照元素进行定位</div>

</div>

<div id="box3">

<img src="http://img.mukewang.com/541a7d8a00018cf102000200.jpg">

<div id="box4">XXXXXXXXXXXXXXXXXX。</div>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 浮动布局相对布局绝对定位页面布局

相关文章推荐

新的分享

章节导航