说说css3布局
使用float属性或position属性布局的缺点
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
div {
width: 20em;
float: left;
} #div1 {
margin-right: 2em;
} #div3 {
width: 100%;
background-color: yellow;
height: 200px;
}
</style>
</head>
<body>
<div id="div1">
<p> 示例文字。相对来说比较长的示例文字。
示例文字。相对来说比较长的示例文字。
示例文字。相对来说比较长的示例文字。
示例文字。相对来说比较长的示例文字。
示例文字。相对来说比较长的示例文字。
示例文字。相对来说比较长的示例文字。
示例文字。相对来说比较长的示例文字。
示例文字。相对来说比较长的示例文字。
示例文字。相对来说比较长的示例文字。
</p>
</div>
<div id="div2">
<p>
示例文字。相对来说比较长的示例文字。
示例文字。相对来说比较长的示例文字。
示例文字。相对来说比较长的示例文字。
示例文字。相对来说比较长的示例文字。
示例文字。相对来说比较长的示例文字。
示例文字。相对来说比较长的示例文字。
示例文字。相对来说比较长的示例文字。
示例文字。相对来说比较长的示例文字。
示例文字。相对来说比较长的示例文字。
</p>
</div>
<div id="div3">
页面中其它内容
</div> </body>
</html>
使用上面代码页面显示如下所示：
但是当上面示例中div1和div2中任何一个元素中添加了一点不一样的东西，比如说增加一个图片
那么显示的页面效果就会如下所示，（也就是说无法实现两个元素的询问对齐）
那么该怎么样解决这个问题呢
css3中加入多栏布局，使用多栏布局可以将一个元素中的内容分成多栏显示，并且确保各栏中内容底部对齐。主要可以使用如下属性
column-count：要显示的列数
column-width：当前列显示的宽度（通过指定每栏的最小宽度，让浏览器自动计算分栏的数量）
column-gap:多栏之间的间隔距离
column-rule:在栏与栏之间增加一条间隔线，并设置该间隔线的宽度颜色等
一般性盒布局
一般性页面布局都是分成左中右，像如下的例子一样的
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#left-sidebar {
float: left;
width: 200px;
padding: 20px;
background-color: orange;
} #contents {
float: left;
width: 300px;
padding: 20px;
background-color: yellow;
} #right-sidebar {
float: left;
width: 200px;
padding: 20px;
background-color: limegreen;
} #left-sidebar, #contents, #right-sidebar {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
</style>
</head>
<body>
<div id="container">
<div id="left-sidebar">
<h2>左侧边栏</h2>
<ul>
<li><a href="#">超链接</a></li>
<li><a href="#">超链接</a></li>
<li><a href="#">超链接</a></li>
<li><a href="#">超链接</a></li>
<li><a href="#">超链接</a></li>
</ul>
</div>
<div id="contents">
<h2>内容</h2>
<p>
示例文字。相对来说比较长的示例文字。
示例文字。相对来说比较长的示例文字。
示例文字。相对来说比较长的示例文字。
示例文字。相对来说比较长的示例文字。
示例文字。相对来说比较长的示例文字。
示例文字。相对来说比较长的示例文字。
示例文字。相对来说比较长的示例文字。
示例文字。相对来说比较长的示例文字。
示例文字。相对来说比较长的示例文字。
</p>
</div>
<div id="right-sidebar">
<h2>右侧边栏</h2>
<ul>
<li><a href="#">超链接</a></li>
<li><a href="#">超链接</a></li>
<li><a href="#">超链接</a></li> </ul>
</div>
</div>
</body>
</html>
代码运行后的界面效果如下所示：
可以看到使用float属性或position属性，左右两侧或多栏中div元素的底部并没有对齐
使用盒布局
下面使用盒布局的方式来使得底部对齐，将上面的css改为如下所示：
#container {
display:-moz-box;
display:-webkit-box;
}
#left-sidebar {
width: 200px;
padding: 20px;
background-color: orange;
}
#contents {
width: 300px;
padding: 20px;
background-color: yellow;
}
#right-sidebar {
width: 200px;
padding: 20px;
background-color: limegreen;
}
#left-sidebar, #contents, #right-sidebar {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
其实也就是在最外层的div上使用了display:box,并去除了里面三个div的float:left的属性，界面运行效果图如下所示：
这里顺便说一下，使用盒而已和多栏布局的区别：1、多栏布局每栏宽度必须相等2、使用多栏布局不可能具体指定什么栏显示什么内容，也就是说多栏布局适合在使用显示文章内容的时候而不适合用于安排整个网页的各个元素的结构
使用自适应窗口的弹性盒布局
对于上面的例子，如果我们想让这三个div的总宽度等于浏览器窗口的宽度，也就是说随着浏览器窗口宽度的改变而改变，应该怎么做呢
事实上很简单，只要在中间的div上增加-webkit-box-flex:1;-moz-box-flex:1; 这个属性就可以了,css代码如下所示：
#container {
display:-moz-box;
display:-webkit-box;
}
#left-sidebar {
width: 200px;
padding: 20px;
background-color: orange;
}
#contents {
-webkit-box-flex:;
-moz-box-flex:;
width: 300px;
padding: 20px;
background-color: yellow;
}
#right-sidebar {
width: 200px;
padding: 20px;
background-color: limegreen;
}
#left-sidebar, #contents, #right-sidebar {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
界面运行效果如所示所示：
改变元素的显示顺序
那么我们怎样改变元素的显示顺序呢，比如说我想让左侧栏在最右，内容栏在最左显示，怎么办？
css3提供了一个属性box-ordinal-group属性来改变各元素的显示顺序，大家看看我的css只是在里面的每个div增加了box-ordinal-group，就轻而易举的改变了它们的显示顺序
#container {
display: -moz-box;
display: -webkit-box;
}
#left-sidebar {
-moz-box-ordinal-group:;
-webkit-box-ordinal-group:;
width: 200px;
padding: 20px;
background-color: orange;
}
#contents {
-moz-box-ordinal-group:;
-webkit-box-ordinal-group:;
-webkit-box-flex:;
-moz-box-flex:;
width: 300px;
padding: 20px;
background-color: yellow;
}
#right-sidebar {
-moz-box-ordinal-group:;
-webkit-box-ordinal-group:;
width: 200px;
padding: 20px;
background-color: limegreen;
}
#left-sidebar, #contents, #right-sidebar {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
界面效果图如下所示（是不是挺神奇的）：
改变元素的排列方向
那如果要改变元素的排列方向呢，在css3中可以使用box-orient来指定多个元素的排列方向。只需要在最外层的div上增加box-orient属性就可以了。css代码如下所示：
#container {
display: -moz-box;
display: -webkit-box;
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
}
#left-sidebar {
-moz-box-ordinal-group:;
-webkit-box-ordinal-group:;
width: 200px;
padding: 20px;
background-color: orange;
}
#contents {
-moz-box-ordinal-group:;
-webkit-box-ordinal-group:;
-webkit-box-flex:;
-moz-box-flex:;
width: 300px;
padding: 20px;
background-color: yellow;
}
#right-sidebar {
-moz-box-ordinal-group:;
-webkit-box-ordinal-group:;
width: 200px;
padding: 20px;
background-color: limegreen;
}
#left-sidebar, #contents, #right-sidebar {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
界面立马就完全变了
元素宽度与高度的自适应
在使用盒布局时，元素的宽度与高度具有自适应性，也就是说元素的宽度与高度可以根据排列方向的改变而改变
看下面的例子，整个html界面代码如下所示：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#container {
display: -moz-box;
display: -webkit-box;
border: 5px solid blue;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
width: 500px;
height: 300px;
} #text-a {
background-color: orange;
} #text-b {
background-color: yellow;
} #text-c {
background-color: limegreen;
} #text-a, #text-b, #text-c {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
</style>
</head>
<body>
<div id="container">
<div id="text-a">示例文字A</div>
<div id="text-b">示例文字B</div>
<div id="text-c">示例文字C</div>
</div>
</body>
</html>
界面效果如下所示：
当我们改变上述代码container里面的css如下所示（也就是改变排列方式为垂直方向）：
#container {
display: -moz-box;
display: -webkit-box;
border: 5px solid blue;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
width: 500px;
height: 300px;
}
则界面效果图如下所示：
使用弹性盒布局来消除空白
看了上面的效果图，大家一定在想，容器中总还是留出一大片空白的区域，应该要怎样来消除呢？其实可以使用css3中的弹性盒布局来解决，也就是使得多个参与排列的元素的总宽度与总高度始终等于容器的宽度与高度
下面我们来修改一下上述代码（将排列方向设置为水平，在中间一个子div上加入box-flex属性）
css样式如下所示：
#container {
display: -moz-box;
display: -webkit-box;
border: 5px solid blue;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
width: 500px;
height: 300px;
}
#text-a {
background-color: orange;
}
#text-b {
background-color: yellow;
-moz-box-flex:;
-webkit-box-flex:;
}
#text-c {
background-color: limegreen;
}
#text-a, #text-b, #text-c {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
界面显示效果便如下所示了
当然你也可以设置排列方向为垂直，那么界面自然会显示成如下这样了
对多个元素使用box-flex属性
现在我们不只对中间的子div加上box-flex，也对第一个子div加上box-flex，那么结果会怎么样呢
#container {
display: -moz-box;
display: -webkit-box;
border: 5px solid blue;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
width: 500px;
height: 300px;
}
#text-a {
background-color: orange;
-moz-box-flex:;
-webkit-box-flex:;
}
#text-b {
background-color: yellow;
-moz-box-flex:;
-webkit-box-flex:;
}
#text-c {
background-color: limegreen;
}
#text-a, #text-b, #text-c {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
如果三个子div都加上box-flex属性，那么每个div高度等于容器的高度除以3，也就是效果图所示所示：
其实box-flex:1就是让其占据刚刚好的宽度，也就是说除去其它的部分，它刚好占满全部
你动手去尝试一下用box-flex:2，会发现box-flex:2并非box-flex:1的两倍就是这个道理，1只是代表单位像素，也就是刚刚好的宽高，并非代表数值
指定水平方向与垂直方向的对齐方式
在css2中，如果想方案水平居中就只能用text-align:center，但是却不能让文字垂直居中，在css3中，只要让div元素使用box-align属性就行了。
示例代码
div {
display: -moz-box;
display: -webkit-box;
-moz-box-align: center;
-webkit-box-align: center;
-moz-box-pack: center;
-webkit-box-pack: center;
width: 200px;
height: 100px;
background-color: pink;
}
如果在div容器中放入“示例文字”这几个字，界面运行效果就会如下所示：（同样，如果我们在div里面放入图像也是可以实现水平和垂直方向居中的）
说说css3布局的更多相关文章
- 针对移动设备的CSS3布局
针对移动设备的CSS3布局 一些专业人士预测五年内移动设备将击败普通电脑成为网页浏览领域的霸主,不管这个预言是否应验,让网页在移动设备上较好的显示已经成为网页设计师和开发者的重要任务,本教程学习用CS ...
- 学习笔记 第十一章 CSS3布局基础
第11章 CSS3布局基础 [学习重点] 了解CSS2盒模型. 设计边框样式. 设计边界样式. 设计补白样式. 了解CSS3盒模型. 11.1 CSS盒模型基础 页面中所有元素基本显示形态为方形 ...
- web前端学习（三）css学习笔记部分（8）-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触
15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...
- 前端CSS3布局display:grid用法
前端CSS3布局display:flex用法 1. 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta char ...
- 前端CSS3布局display:flex用法
前端CSS3布局display:flex用法 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta charset ...
- CSS3 布局
1.1 列布局 CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充.这种新语法能够让WEB开发人员轻松的让文本呈现多列显示.我们知道,当一行文字太长时 ...
- CSS3基础(3)——CSS3 布局属性全接触
一. 弹性盒模型 1.弹性盒子模型介绍 弹性盒模型(Flexible Box或Flexbox)是一个CSS3新增布局模块,官方称为CSS Flexible Box Layout Module,用于实现 ...
- CSS3布局样式
CSS3多列布局columns 为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module) ...
- CSS3布局篇（多列布局）
我们通过学习 CSS3,能够创建多个列来对文本进行布局 ,就像报纸那样排版那样! 可以参考详细说明:http://www.w3school.com.cn/css3/css3_multiple_colu ...
随机推荐
- 深入grootJs(进阶教程)
深入grootJs 这篇教程的原则是把grootJs原理讲透,主要真正理解了原理才能用起来随心所欲 mvvm模式简介 grootJs的vm结构 扫描函数sweep 垃圾回收的原理 加载器中的预编 ,控 ...
- Bootstrap系列 -- 10. 网格布局
一. 实现原理 网格布局是通过容器的大小,平均分为12份(可以修改),再调整内外边距,和表格布局有点类似但是也存在区别. 实现步骤如下: (1) 数据行.row 必须包含在容器.container 中 ...
- sql 重复数据只保留一条
用SQL语句,删除掉重复项只保留一条在几千条记录里,存在着些相同的记录,如何能用SQL语句,删除掉重复的呢1.查找表中多余的重复记录,重复记录是根据单个字段(peopleId)来判断 select * ...
- sql server 字符串函数str()
语法: STR(nExpres[,nLength[,nDecimalPlaces]]) 参数: nExpression------STR要计算的数值表达式. nLength------------ST ...
- Matlab中数组元素引用——三种方法
Matlab中数组元素引用——三种方法 1.Matlab中数组元素引用有三种方法 1 2 3 1.下标法(subscripts) 2.索引法(index) 3.布尔法(Boolean) 注意:在使 ...
- mysql 启动失败
1 mysql 启动时报:MySQL Daemon failed to start.并且启动失败 2 查看mysql log日志 less /var/log/mysqld.log 3 从两行erro ...
- 微信公众平台消息接口开发之微信浏览器HTTP_USER_AGENT判断
在微信公众平台的开发过程中,我们有时需要开发网页并判断是否是是来自微信浏览器访问,本文介绍如何做出这一判断. 一.$_SERVER数组 $_SERVER 是一个包含了诸如头信息(header).路径( ...
- 转-Spring单例模式与线程安全
问题背景 这段时间在做项目的时候,考虑到Spring中的bean默认是单例模式的,那么当多个线程调用同一个bean的时候就会存在线程安全问题.如果是Spring中bean的创建模式为非单例的,也就不存 ...
- jquery slide使用总结
.slideUp([duration][,complete])--目标元素向上滑入隐藏: .slideDown([duration][,complete])--目标元素向下滑出显示: .slideTo ...
- 关于insert /*+ append*/ 各种insert插入速度比较
来源于:http://www.cnblogs.com/rootq/archive/2009/02/11/1388043.html SQL> select count(*) from t;COUN ...