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

[CSS] CSS布局系列一

2012-08-03 00:16 92 查看

每次和同事朋友谈到前端，谈到CSS，总会听到他们说用哪个哪个框架，很方便很快捷地就完成前端设计，谁还会去一条一条的写CSS Rule。对于这种想法我总想说点什么。CSS框架试图通过在标记和表现之间建立强耦合来简化CSS布局，但是这种耦合正是我们摒弃基于表格布局的主要原因。这种进行CSS布局的"黑盒"方式可能会让人迅速地得到想要的结果，但是最终会阻碍开发人员理解这种语言和实现修改的能力[来源<精通CSS: 高级Web标准解决方案>]。

闲话少说，开始聊聊CSS布局。所有CSS布局技术的根本都是3个基本概念：定位、浮动和外边距操纵。

定位

CSS中有3种基本的定位机制：普通流、浮动和绝对定位。除非专门指定，否则所有框架都在普通流中定位（普通流中元素框的位置由元素在HTML中位置决定）。下面稍微总结下相对定位、绝对定位和固定定位，要理解这三种定位方式，最主要的是抓住两个词"相对于"和"占空间"。

相对定位是"相对于"元素在文档流中的初始位置，无论元素是否移动，元素仍然占据原来的"空间"

绝对定位是"相对于"距离元素最近的那个已定位的祖先元素的位置，其与文档流无关，不占据"空间"

固定定位是"相对于"视口（viewport），其实绝对定位的一种，也不占据"空间"

浮动

浮动float:right|left，浮动的框可以左右移动，直到它的外边缘碰到包含框或另一个浮动框的边缘。浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。这儿我要说明的一点是，有很多人都一个意识，用了float接着就要用clear:left|right|both，那么为什么要用clear，下面用个例子说明

<html>
<head>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
.float {
float: left;
}
.square {
height: 100px;
width: 100px;
}
#float-1 {
background-color: #CC99B3;
}
#float-2 {
background-color: #4F779C;
}
#float-3 {
background-color: #7195B7;
}
#no-float {
background-color: #99CCCB;
}
</style>
</head>
<body>
<div id="float-1" class="float square">Float 1</div>
<div id="float-2" class="float square">Float 2</div>
<div id="float-3" class="float square">Float 3</div>
<div id="no-float" class="square">No Float</div>
</body>
</html> 查看效果图

CSS布局例子 1 <html>
2 <head>
3 <style type="text/css">
4 * {
5 padding: 0px;
6 margin: 0px;
7 }
8 .header {
9 position: absolute;
top: 0px;
left: 0px;
height: 40px;
width: 100%;
background-color: #8F8F8F;
}
.content {
position: absolute;
top: 40px;
left: 0px;
right: 0px;
bottom: 30px;
}
.content .main-content {
height: 100%;
width: 100%;
background-color: #CCCCCC;
overflow-y: auto;
margin: 0 auto;
}
.dashlet {
float: left;
height: 300px;
width: 300px;
margin: 10px;
background-color: #99B3CC;
}
.content .to-top {
position: fixed;
bottom: 40px;
right: 10px;
height: 50px;
width: 50px;
background-color: #336699;
}
.footer {
position: absolute;
bottom: 0px;
left: 0px;
height: 30px;
width: 100%;
background-color: #8F8F8F;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="content">
<div class="main-content">
<div class="dashlet"></div>
<div class="dashlet"></div>
<div class="dashlet"></div>
<div class="dashlet"></div>
<div class="dashlet"></div>
<div class="dashlet"></div>
</div>
<div class="to-top"></div>
</div>
<div class="footer"></div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航