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

CSS中的几种布局模型

2015-12-31 10:33 465 查看

1、流动模型（Flow）

流动模型是默认的网页布局模式。即：网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

特性：

块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置啊；

在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。

2、浮动模型（float）

由于块状元素都是独占一行，那么如果想让两个块状元素并列显示，则可通过元素浮动来实现（float:left;）

如： div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>3、层模型
现HTML元素的在网页中精确定位，就像PhotoShop中的图层一样可以对每个图层都能够精确定位操作

层模型的三种形式：

绝对定位（position:absolute）、相对定位（position:relative）、固定定位（position:fixed）

a、绝对定位：

作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口

<style type="text/css">
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
right:100px;
top:20px;
}
</style>
b、相对定位：
通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来 )，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动

<style type="text/css">
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
</style>
</head>
<body>
<div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span>
</body>效果：

c、固定定位

与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与bac kground-attachment:fixed;属性功能相同。

<style type="text/css">
#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
bottom:0;
right:0;
}
</style> d、绝对定位与相对定位的组合使用
<style type="text/css">
div{border:2px red solid;}
#box1{
width:200px;
height:200px;
position:relative;
}
#box2{
position:absolute;
bottom:20px;
left:15px;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">相对参照元素进行定位</div>
</div>
</body>

效果：

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

标签： 布局 css

相关文章推荐

新的分享

章节导航