要想在网页上展示的内容合理、布局好看，那就少不了CSS定位与布局的应用。CSS网页定位分为三种：文档流定位、浮动定位和层定位，接下来分别讲一下这三种定位方式。

1 文档流定位

html中的元素按照是否独占一行可以分为：行内元素、块级元素和行内块元素。

行内元素：不能独占一行，使用width height属性无效。常见的行内元素有：span标签 a标签
块级元素：可以独占一行，通过width和height可以设置元素的宽、高。常见的块级元素：div table ul ol li p form h1 h2 ……
行内块元素：顾名思义，拥有行内元素和块级元素的特点。
这三者之间，可以通过display属性进行转换

display: none;  表示元素不会被显示
display: inline; 表示元素是行内元素
display: block; 表示元素是块级元素
display: inline-block; 表示元素是行内块元素

2 浮动定位

将元素设置成浮动定位后，元素将脱离文档流位置。浮动定位主要是float属性和clear属性。
float属性有三个值

float: none;    表示不浮动
float: left;    表示左浮动
float: right;   表示右浮动

接下来重点看一下左浮动和右浮动

2.1 文档流定位例子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>float</title><style>#container {margin: 0 auto;width: 150px;height: 150px;background-color: #cccccc;}#box1 {width: 50px;height: 50px;background-color: #138eee;}#box2 {width: 50px;height: 50px;background-color: #66ccff;}</style>
</head>
<body><div id="container"><div id="box1">box1</div><div id="box2">box2</div></div>
</body>
</html>

2.2 设置float为left

将box1和box2都设置为left定位

        #container {margin: 0 auto;width: 150px;height: 150px;background-color: #cccccc;}#box1 {width: 50px;height: 50px;float: left;background-color: #138eee;}#box2 {width: 50px;height: 50px;float: left;background-color: #66ccff;}

2.3 float设置为left和right定位

将box1设置成left布局，box2设置成right布局

        #container {margin: 0 auto;width: 150px;height: 150px;background-color: #cccccc;}#box1 {width: 50px;height: 50px;float: left;background-color: #138eee;}#box2 {width: 50px;height: 50px;float: right;background-color: #66ccff;}

2.4 clear属性

首先看一下，若将上述例子中的box1设置float:left定位，box2仍然是文档流定位，看一下有何效果。

        #box1 {width: 50px;height: 50px;float: left;background-color: #138eee;}#box2 {width: 50px;height: 50px;background-color: #66ccff;}

从效果看，box2和box1颜色重叠了，只是box2的字在下面。那怎么让box1和box2正常显示呢？可以使用clear属性，将box2的clear设置成both，或者left都可以。

        #box1 {width: 50px;height: 50px;float: left;background-color: #138eee;}#box2 {width: 50px;height: 50px;/*clear: left;*/clear: both;background-color: #66ccff;}

clear属性有四个取值：

clear: left; 清除左浮动
clear: right; 清除右浮动
clear: both; 清除左右浮动
clear: none; 默认值，只在需要移除已指定的清除值时用到，例如，最开始指定clear: left,后来又要清除该值，可以设置成clear: none

3 层定位

3.1 position属性

静态布局static: 默认值,没有定位，元素出现在正常的流中，top right bottom left 和z-index无效。
相对定位relative: 元素并未脱离文档流，而是在原文档流位置上进行定位，可以使用top right bottom left和z-index进行定位
绝对定位absolute：元素脱离原来的文档流。以最近的非static元素为父级元素进行定位，若未找到最近的非static布局的父级元素，则以body为父级元素进行定位。可以使用top right bottom left和z-index进行定位
固定定位fixed：元素以body为父级元素，不随着滚动条而移动.可以使用top right bottom left和z-index进行定位

例如：要想实现下面这种布局样式，可以通过设置position属性实现。

这种样式属于两行三列，其中第二行整个box可以设置成绝对定位，然后里面都可以设置成绝对定位。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>position属性</title><style>* {margin: 0;padding: 0;}#header {width: 100%;height: 50px;background-color: #66ccff;}#main_area {position: absolute;top: 50px;left: 0;right: 0;bottom: 0;background-color: pink;}#menu_side {width: 100px;height: 100%;position: absolute;top: 0;left: 0;bottom: 0;background-color: #138eee;}#right_side {position: absolute;top: 0;right: 0;bottom: 0;width: 150px;background-color: #ccffff;}#content {position: absolute;top: 0;bottom: 0;left: 100px;right: 150px;background-color: #ffc600;}</style>
</head>
<body><div id="container"><div id="header">头部</div><div id="main_area"><div id="menu_side">菜单栏</div><div id="content">内容展示区</div><div id="right_side">右侧栏</div></div></div>
</body>
</html>

其实，也可以用float布局实现上图的效果。

参考资料：中国大学慕课网上的《Web前端开发》（作者：孙俏、王新阳、祖明、付慧）课程

CSS 网页定位与布局相关推荐

43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程
在中国,很多前端javascript:;" onClick="javascript:tagshow(event, '%BF%AA%B7%A2');" target=&qu ...
【HTML＋CSS网页设计与布局从入门到精通】第4章
目录超链接 h1,h2,h3... 图片超链接邮件超链接图像热区超链接图像热区超链接-自己作图图像热区超链接-多热区插入一个框架-frame(将一个html文件当做一个frame) 插入一 ...
BIV+CSS网页的标准化布局
DIV用于搭建网站结构(框架),CSS用于创建网站表现(样式/美化) DIV+CSS模式设计网站的优势: 1.表现和内容分离. 2代码简洁,提高网页浏览速度. 3.易于维护,改版. 4.提高搜索引擎对 ...
DIV+CSS网页设计常用布局代码
单行一列 body{margin:0px;padding:0px;text-align:center;} #content{margin-left:auto;margin-right:auto;wid ...
CSS——网页版心和布局流程
阅读报纸时容易发现,虽然报纸中的内容很多,但是经过合理地排版,版面依然清晰.易读.同样,在制作网页时,要想使页面结构清晰.有条理,也需要对网页进行"排版". "版心&qu ...
html手机电脑自动适应模块,CSS网页响应式布局实现自动适配Pc/Pad/Phone设备
前言现在的设备很多,有PC.iPad.手机.智能手表.智能电视.如果没有响应式布局,那么电脑网页在手机或者ipad上显示,是体验非常差,操作不方便,视觉疲劳的,所以我们开发网页要做好响应式布局. i ...
【HTML＋CSS网页设计与布局从入门到精通】第13章-块元素div和内联元素span格式布局
目录块元素背景,边框,颜色等布局块元素ID选择器另一个例子块元素中的图片盒子模型的演示块级元素中的文本格式块级元素div与内联元素span的对比两个行内元素的margin 两个块级元素 ...
【HTML＋CSS网页设计与布局从入门到精通】第10章-CSS
目录开始新增设置英文字母全部小写字号设置首字母"大"写-大一点显示上划线,下划线text-decoration:underline overline; 缩进text-i ...
【HTML＋CSS网页设计与布局从入门到精通】第9章-选择器
目录标记选择器+类别选择器并集选择器+集体声明后代(嵌套)选择器继承关系演示前沿Web开发教室继承关系演示-选择器1 继承关系演示-选择器2 还可以写成这样批量的整或者再或者 or 层 ...
【HTML＋CSS网页设计与布局从入门到精通】第15章-表格格式：边距/居中/边框/折叠
目录初始表格边距.居中.边框单元格边距cellspacing 边距折叠(两个叠加不会变粗)border-collapse:collapse; 单元格边距border-spacing 初始表格 & ...

CSS 网页定位与布局