CSS3学习系列之布局样式（二）
- 使用盒布局
在CSS3中，通过box属性来使用盒布局，例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用float属性进行布局的示例</title>
<style>
#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;
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>
- 盒布局与多栏布局的区别
盒布局与多栏布局的区别在于：使用多栏布局时，各栏宽度必须是相等的，在指定每栏宽度时，也只能为所有栏指定一个统一的宽度，栏与栏之间的宽度不可能是不一样的，另外使用多栏布局时，也不可能具体指定书目栏中显示书目内容。因此比较合适使用在显示文章内容的时候，不适合用于安排整个网页由各元素组成的网页结构时。
- 使用自适应窗口的弹性盒布局
使用box-flex属性，可以将盒布局变为弹性盒布局就可以了。例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用float属性进行布局的示例</title>
<style>
#container{
display: -moz-box;
display: -webkit-box;
}
#left-sidebar {
width: 200px;
padding: 20px;
background-color: orange;
}
#contents{
-moz-box-flex:1;
-webkit-box-flex: 1;
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;
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>
- 改变元素的显示顺序
使用弹性盒布局的时候，可以通过box-ordinal-group属性来改变元素的显示顺序，可以在每个元素的样式中加入box-ordinal-group属性，该属性使用一个表示序号的整数属性值，浏览器在显示的时候根据该序号从小到大来显示这些元素。例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用float属性进行布局的示例</title>
<style>
#container{
display: -moz-box;
display: -webkit-box;
}
#left-sidebar {
-moz-box-ordinal-group: 3;
-webkit-box-ordinal-group: 3;
width: 200px;
padding: 20px;
background-color: orange;
}
#contents{
-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
-moz-box-flex:1;
-webkit-box-flex: 1;
padding: 20px;
background-color: yellow;
}
#right-sidebar{
-moz-box-ordinal-group: 2;
-webkit-box-ordinal-group: 2;
width: 200px;
padding: 20px;
background-color: limegreen;
}
#left-sidebar,#contents,#right-sidebar{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
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>
- 改变元素的排列方向
使用弹性盒布局的时候，我们可以很简单地将多个元素的排列方向从水平方向修改为垂直方向，或者从垂直方向修改为水平方向。
在css3中，使用box-orient来指定多个元素的排列方向。例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用float属性进行布局的示例</title>
<style>
#container{
display: -moz-box;
display: -webkit-box;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
}
#left-sidebar {
-moz-box-ordinal-group: 3;
-webkit-box-ordinal-group: 3;
width: 200px;
padding: 20px;
background-color: orange;
}
#contents{
-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
-moz-box-flex:1;
-webkit-box-flex: 1;
padding: 20px;
background-color: yellow;
}
#right-sidebar{
-moz-box-ordinal-group: 2;
-webkit-box-ordinal-group: 2;
width: 200px;
padding: 20px;
background-color: limegreen;
}
#left-sidebar,#contents,#right-sidebar{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
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>
- 元素宽度与高度的自适应
使用盒布局的时候，元素的宽度与高度具有自适应性，即元素的宽度与高度可以根据排列方向的改变而改变。例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素宽度与高度的自适应示例</title>
<style>
#container {
display: -moz-box;
display: -webkit-box;
border: solid 5px blue;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
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;
font-size: 1.5em;
font-weight: bold;
}
</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>
- 对对个元素使用box-flex属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素宽度与高度的自适应示例</title>
<style>
#container {
display: -moz-box;
display: -webkit-box;
border: solid 5px blue;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
width: 500px;
height: 300px;
} #text-a {
-moz-box-flex: 1;
-webkit-box-flex: 1;
background-color: orange;
} #text-b {
-moz-box-flex: 1;
-webkit-box-flex: 1;
background-color: yellow;
} #text-c {
background-color: limegreen;
} #text-a, #text-b, #text-c {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
font-size: 1.5em;
font-weight: bold;
}
</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>
- 指定水平方向与垂直方向的对齐方式
使用盒布局的时候，可以使用box-pack属性及box-align属性来指定元素文字、图像及子元素的水平方向或垂直方向的对齐方式。例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>让文字位于div元素正中央的简单示例</title>
<style>
div{
display: -moz-box;
display: -webkit-box;
-moz-box-align: center;
-webkit-box-align: center;
-moz-box-pack:center;
-webkit-box-pack:center;
width: 300px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div>示例文字</div>
</body>
</html>
CSS3学习系列之布局样式（二）的更多相关文章
- CSS3学习系列之布局样式（一）
多栏布局 使用float属性或position属性的缺点: 使用float属性或position属性进行页面中的简单布局的例子. <!DOCTYPE html> <html lang ...
- CSS3学习系列之盒样式（二）
text-overflow属性 当通过把overflow属性的属性值设定为"hidden"的方法,将盒中容纳不下的内容隐藏起来时,如果使用text-overflow属性,可以在盒的 ...
- CSS3学习系列之背景相关样式（二）
在border-radius属性中指定两个半径 在border-radius属性中,可以指定两个半径,指定方法如下所示: border-radius:40px 20px; 针对这种情况,各种浏览器的处 ...
- CSS3学习系列之盒样式（一）
盒的基本类型 在css中,使用display属性来定义盒的类型,总体上来说,css中的盒分为block类型与inline类型 inline-block类型 inline-block类型是在css2.1 ...
- CSS3学习系列之选择器（二）
first-child选择器和last-child选择器 first-child指定第一个元素.last-child指定最后一个子元素. 例如: <!DOCTYPE html> <h ...
- CSS3学习系列之背景相关样式（一）
新增属性: background-clip:指定背景的显示范围 background-origin:指定绘制背景图像时的起点 background-size:指定背景中图像的尺寸 background ...
- MVC学习系列5--Layout布局页和RenderSection的使用
我们开发网站项目的时候,都会遇到这样的问题:就是页面怎么统一风格,有一致的外观,在之前ASP.NET的时代,我们有两种选择,一个是使用MasterPage页,一个是手动,自己在每个页面写CSS样式,但 ...
- [CSS3]学习笔记-CSS基本样式讲解
1.CSS样式-背景 CSS运行应用纯色作背景,也允许使用背景图像创建相当复杂的效果 <!DOCTYPE html> <html> <head lang="en ...
- css3学习系列之选择器（一）
CSS3中的属性选择器 [att*=val]属性选择器:[att*=val]属性选择器的含义是:如果元素att表示的属性之属性值中包含用val指定的字符的话,则该元素使用这个样式. [att^=val ...
随机推荐
- HTM CSS 笔记乱炖
一.常用实体(字符转义) '<' == '<' '©' == '©' '>' == '>' '"' == '"' ' ' == ' ' '®' == '®' ...
- Junit 入门使用教程
1.Junit 是什么? JUnit是一个Java语言的单元测试框架.它由Kent Beck和Erich Gamma建立,逐渐成为源于Kent Beck的sUnit的xUnit家族中最为成功的一个JU ...
- /proc/kcore失效，调试其文件系统相关模块，使重新正常工作
为分析内核,在有限的机器上用虚拟机装了CentOS.6.9.i386.minimal,重新编译了3.19.8内核并克隆.当使用/proc/kcore进行内核动态映像调试时,发现与kgdb远程调试端读到 ...
- DOM详解
浏览器工作的基本流程 1.浏览器开始解析html文档,构建DOM树(DOM tree),DOM树的节点由文档的标签.属性.文本等组成:2.解析外部CSS文件及style标签中的样式信息,这些样式信息将 ...
- android相对布局中控件的常用属性【转】
Android布局属性详解 RelativeLayout用到的一些重要的属性: 第一类:属性值为true或false android:layout_centerHorizontal 水平居中 andr ...
- mysql之 mysqldump 备份恢复详解
mysqldump是MySQL用于转存储数据库的客户端程序.转储包含创建表和/或装载表的SQL语句 ,用来实现轻量级的快速迁移或恢复数据库,是mysql数据库实现逻辑备份的一种方式. mysqldum ...
- 一天搞定CSS：背景background--03
背景分为-背景颜色和背景图片 1.背景属性 2.背景颜色 代码演示: <!DOCTYPE html> <html> <head> <meta charset= ...
- JavaScript实现单击全选 ,再次点击取消全选
以下为实现思路,已测试,供参考 var allSet = document.getElementById('allSet');//获取全选按钮元素 var a = allSe ...
- iOS CAShapeLayer、CADisplayLink 实现波浪动画效果
iOS CAShapeLayer.CADisplayLink 实现波浪动画效果 效果图 代码已上传 GitHub:https://github.com/Silence-GitHub/CoreAnima ...
- 第一次使用idea从SVN什么checkout项目，一直都是用的eclipse
IntelliJ IDEA 14 拉取SVN maven 多模块项目 部署tomcat 详细图解! 二话不说 进入主题 我们创建空项目实际上是项目空间 进入主界面 想用svn必须先启用它 选择Su ...