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 ...
随机推荐
- 瀑布流布局使用详解——JQuery插件Isotope（动态实现子项目筛选）
瀑布流布局,听起来听牛逼的样子,其实就是简单的子元素筛选功能.不过这一功能在网站页面布局当中还是很常用的,特别是在电商网站中 经常会有点一个钮筛选,然后页面的子元素刷的以下变了样.接下来,我们先简单介 ...
- Tomcat 部署项目的三种方法
1.下载 Tomcat 服务器 ①.官网下载地址:http://tomcat.apache.org/ ②.tomcat 8.0 64位百度云下载地址:http://pan.baidu.com/s/1s ...
- 012一对一 唯一外键关联映射_双向(one-to-one)
² 两个对象之间是一对一的关系,如Person-IdCard(人—身份证号) ² 有两种策略可以实现一对一的关联映射 主键关联:即让两个对象具有相同的主键值,以表明它们之间的一一对应的关系:数据库 ...
- CoreCLR源码探索(六) NullReferenceException是如何发生的
NullReferenceException可能是.Net程序员遇到最多的例外了, 这个例外发生的如此频繁, 以至于人们付出了巨大的努力来使用各种特性和约束试图防止它发生, 但时至今日它仍然让很多程序 ...
- Ultimus BPM 金融与证券行业应用解决方案
Ultimus BPM 金融与证券行业应用解决方案 行业应用需求 金融服务业的整合与全球化发展,带来高度竞争的国际市场,所牵涉的产业包括了商业.贷款.投资银行,以及保险公司和许多其它为企业和消费者提供 ...
- ElasticSearch的Marvel更新license
Marvel安装的时候需要申请一个license,否则只有30天的使用时间,到期后最多保存7天的监控数据,为了造成不必要的监控数据丢失,建议安装的同时注册一个lincense,方法如下: 1. ...
- 小K的H5之旅-CSS基础（一）
一.什么是CSS W3C标准中,倡导有3:其一为内容与表现分离,其二为内容与行为分离,其三为内容结构的语义化.其倡导中第一条的"表现"指的便可以说是CSS.CSS全称Cascadi ...
- General Thread States
对于实践中可能出现的各种General Thread States 以下列表描述了与常规查询处理关联的线程状态值,而不是更复杂的活动,例如复制. 其中许多仅用于在服务器中查找错误. after cre ...
- WireShark网络分析就这么简单 读后感
京东618活动,满200减100,果断入手了这本经典的 WireShark教程
- FTP主动模式和被动模式的区别
基础知识: FTP只通过TCP连接,没有用于FTP的UDP组件.FTP不同于其他服务的是它使用了两个端口, 一个数据端口和一个命令端口(或称为控制端口).通常21端口是命令端口,20端口是数据端口.当 ...