包含元素：如果一个块级元素位于另一个块级元素内部，那么这个外部的框就称为包含元素或父级元素。
普通流：每个块级元素都换行显示，以至于页面中的每个项目都显示在前一个项目的下面。即使你指定了盒子的宽度，并且也有足够的空间让两个元素并排显示，它们也还是不会出现在一起。这是浏览器的默认行为（除非你告诉浏览器按照其他的方式进行显示）。
相对定位：相对定位将一个元素从它在普通流中所处的位置上移动，在它原来的位置向上、向下、向左、向右移动。这种移动不会影响周围元素的位置，它们还是位于在普通流中所处的位置。
绝对定位：绝对定位的元素的位置相对于它的包含元素。它完全脱离了普通流，也就是说不会影响到周围任何元素的位置（就像是直接忽略掉它所占据的空间）。使用绝对定位的元素随着页面的滚动而移动
固定定位：固定定位是绝对定位的一种形式，与相对于包含元素定位不同，它是将元素相对于浏览窗口进行定位。固定定位的元素不会影响周围元素的位置，而且当页面上下滚动时，它不会移动。
浮动元素：浮动一个元素可以让其脱离普通流，并定位到其包含盒子的最左边或最右边的位置。这个浮动的元素会成为一个周围可以浮动其他内容的块级元素。
clear
clear属性用于表明一个盒子的左侧或者右侧不允许浮动元素（在同一个包含元素内）。该属性可以选用以下值：
left
盒子的左侧不能接触同一个包含元素内的其他任何元素。
right
盒子的右侧不能接触同一个包含元素内的其他任何元素。
both
盒子的左侧和右侧都不能接触同一个包含元素内的其他任何元素。
none
盒子的两侧都可以接触
元素。在这个示例中，第四个段落拥有一个名为clear的类。该类的CSS规则使用clear属性来表明它的左侧不能出现其他元素。因此，第四个段落在页面中向下移动，直到它的左侧不再有其他任何元素。
width：该属性用于设置列宽。
float：该属性用于将多个列并排。
margin：该属性用于在列之间创建空隙。
针对<body>元素的规则用来将页面的宽度固定为960像素，并通过将左边距和右边距设置为auto使<body>元素居中。
普通流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>普通流</title>
<style type="text/css">
body{
750px;
font-family: Arial, Verdana, sans-serif;
color: #665544;}
h1{
background-color: #efefef;
padding: 10px;}
p{
450px;}
</style>
</head>
<body>
<h1>The Evolution of the Bicycle</h1>
<p>In 1817 Baron von Drais invented a walking machine that would help him get around
the royal gardens faster: two same-size in-line wheels, the front one steerable,
mounted in a frame upon which you straddled. The device was propelled
by pushing your feet against the ground, thus rolling yourself and the device forward in a sort of gliding walk.</p>
<p>The machine became known as the Draisienne (or "hobby horse").
It was made entirely of wood. This enjoyed a short lived popularity as a fad,
not being practical for transportation in any other place than a well maintained pathway such as in a park or garden.</p>
<p>The next appearance of a two-wheeled riding machine was in 1865,
when pedals were applied directly to the front wheel. This machine was known as the velocipede (meaning "fast foot")
as well as the "bone shaker," since it's wooden structure combined with the cobblestone roads of the day made
for an extremely uncomfortable ride. They also became a fad and indoor riding academies, similar to roller rinks, could be found in large cities.</p>
</body>
</html>
相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style type="text/css">
body{
750px;
font-family: Arial, Verdana, sans-serif;
color: #665544}
p{
450px;}
p.example{
position: relative;
top: 10px;
left: 100px;}
</style>
</head>
<body>
<h1>The Evolution of the Bicycle</h1>
<p>In 1817 Baron von Drais invented a walking machine that would help him get around
the royal gardens faster: two same-size in-line wheels, the front one steerable, mounted in a frame upon which you straddled.
The device was propelled by pushing your feet against the ground, thus rolling yourself and the device forward in a sort of gliding walk.</p>
<p class="example">The machine became known as the Draisienne (or "hobby horse").
It was made entirely of wood. This enjoyed a short lived popularity as a fad,
not being practical for transportation in any other place than a well maintained pathway such as in a park or garden.</p>
<p>The next appearance of a two-wheeled riding machine was in 1865,
when pedals were applied directly to the front wheel. This machine was known as the velocipede
(meaning "fast foot") as well as the "bone shaker," since it's wooden structure combined with
the cobblestone roads of the day made for an extremely uncomfortable ride.
They also became a fad and indoor riding academies, similar to roller rinks, could be found in large cities.</p>
</body>
</html>
绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style type="text/css">
body{
750px;
font-family: Arial, Verdana, sans-serif;
color: #665544;}
h1{
position: absolute;
top: 0px;
left: 500px;
250px;}
p{
450px;}
</style>
</head>
<body>
<h1>The Evolution of the Bicycle</h1>
<p>In 1817 Baron von Drais invented a walking machine that would help him get around
the royal gardens faster: two same-size in-line wheels, the front one steerable,
mounted in a frame upon which you straddled. The device was propelled by pushing
your feet against the ground, thus rolling yourself and the device forward in a sort of gliding walk.</p>
<p>The machine became known as the Draisienne (or "hobby horse").
It was made entirely of wood. This enjoyed a short lived popularity as a fad,
not being practical for transportation in any other place than a well maintained pathway such as in a park or garden.</p>
<p>The next appearance of a two-wheeled riding machine was in 1865,
when pedals were applied directly to the front wheel.
This machine was known as the velocipede (meaning "fast foot") as well as the "bone shaker,"
since it's wooden structure combined with the cobblestone roads of the day made
for an extremely uncomfortable ride. They also became a fad and indoor riding academies,
similar to roller rinks, could be found in large cities.</p>
<p>In 1870 the first all-metal machine appeared. (Prior to this,
metallurgy was not advanced enough to provide metal which was strong enough to make small,
light parts out of.) The pedals were attached directly to the front wheel
with no freewheeling mechanism. Solid rubber tires and the long spokes of the large
front wheel provided a much smoother ride than its predecessor.</p>
<p>The front wheels became larger and larger as makers realized that the larger the wheel,
the farther you could travel with one rotation of the pedals. For that reason,
you would purchase a wheel as large as your leg length would allow. This machine
was the first one to be called a bicycle ("two wheel").
These bicycles enjoyed a great popularity during the 1880s among young men of means.
(They cost an average worker six month's pay.)</p>
<p>Because the rider sat so high above the center of gravity,
if the front wheel was stopped by a stone or rut in the road,
or the sudden emergence of a dog, the entire apparatus rotated forward on its front axle and the rider,
with his legs trapped under the handlebars, was dropped unceremoniously on his head. Thus the term "taking a header" came into being.</p>
</body>
</html>
固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style type="text/css">
body{
750px;
font-family: Arial, Verdana, sans-serif;
color: #665544;}
h1{
position: fixed;
top: 0px;
left: 0px;
padding: 10px;
margin: 0px;
100%;
background-color: #efefef;}
p.example{
margin-top: 100px;}
</style>
</head>
<body>
<h1>The Evolution of the Bicycle</h1>
<p class="example">In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster:
two same-size in-line wheels, the front one steerable, mounted in a frame upon which you straddled.
The device was propelled by pushing your feet against the ground,
thus rolling yourself and the device forward in a sort of gliding walk.</p>
<p>The machine became known as the Draisienne (or "hobby horse").
It was made entirely of wood. This enjoyed a short lived popularity
as a fad, not being practical for transportation in any other place
than a well maintained pathway such as in a park or garden.</p>
<p>The next appearance of a two-wheeled riding machine was in 1865,
when pedals were applied directly to the front wheel. This machine was known as the velocipede
(meaning "fast foot") as well as the "bone shaker," since it's wooden structure combined
with the cobblestone roads of the day made for an extremely uncomfortable ride.
They also became a fad and indoor riding academies, similar to roller rinks, could be found in large cities.</p>
<p>In 1870 the first all-metal machine appeared. (Prior to this,
metallurgy was not advanced enough to provide metal which was strong enough to make small,
light parts out of.) The pedals were attached directly to the front wheel
with no freewheeling mechanism. Solid rubber tires and the long spokes
of the large front wheel provided a much smoother ride than its predecessor.</p>
<p>The front wheels became larger and larger as makers realized that the larger the wheel,
the farther you could travel with one rotation of the pedals. For that reason,
you would purchase a wheel as large as your leg length would allow.
This machine was the first one to be called a bicycle ("two wheel").
These bicycles enjoyed a great popularity during the 1880s among young men of means.
(They cost an average worker six month's pay.)</p>
<p>Because the rider sat so high above the center of gravity,
if the front wheel was stopped by a stone or rut in the road,
or the sudden emergence of a dog, the entire apparatus rotated forward
on its front axle and the rider, with his legs trapped under the handlebars,
was dropped unceremoniously on his head. Thus the term "taking a header" came into being.</p>
</body>
</html>
重叠元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>重叠元素</title>
<style type="text/css">
body{
750px;
font-family: Arial, Verdana, sans-serif;
color: #665544;}
h1{
position: fixed;
top: 0px;
left: 0px;
margin: 0px;
padding: 10px;
100%;
background-color: #efefef;
z-index; 10;}
p{
position: relative;
top: 70px;
left: 70px;
}
</style>
</head>
<body>
<h1>The Evolution of the Bicycle</h1>
<p>In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster
: two same-size in-line wheels, the front one steerable, mounted in a frame upon which you straddled.
The device was propelled by pushing your feet against the ground,
thus rolling yourself and the device forward in a sort of gliding walk.</p>
<p>The machine became known as the Draisienne (or "hobby horse").
It was made entirely of wood. This enjoyed a short lived popularity as a fad,
not being practical for transportation in any other place than a well maintained pathway such as in a park or garden.</p>
<p>The next appearance of a two-wheeled riding machine was in 1865,
when pedals were applied directly to the front wheel.
This machine was known as the velocipede (meaning "fast foot") as well as the "bone shaker,"
since it's wooden structure combined with the cobblestone roads of the day made
for an extremely uncomfortable ride. They also became a fad and indoor riding academies, similar to roller rinks, could be found in large cities.</p>
<p>In 1870 the first all-metal machine appeared. (Prior to this,
metallurgy was not advanced enough to provide metal which was strong enough to make small,
light parts out of.) The pedals were attached directly to the front wheel
with no freewheeling mechanism. Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
<p>The front wheels became larger and larger as makers realized that the larger the wheel,
the farther you could travel with one rotation of the pedals. For that reason,
you would purchase a wheel as large as your leg length would allow. This machine
was the first one to be called a bicycle ("two wheel"). These bicycles enjoyed a great popularity during
the 1880s among young men of means. (They cost an average worker six month's pay.)</p>
<p>Because the rider sat so high above the center of gravity, if the front wheel was stopped b
y a stone or rut in the road, or the sudden emergence of a dog, the entire apparatus rotated forward
on its front axle and the rider, with his legs trapped under the handlebars, was dropped unceremoniously
on his head. Thus the term "taking a header" came into being.</p>
</body>
</html>
浮动元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动元素</title>
<style type="text/css">
body{
750px;
font-family: Arial, Verdana, sans-serif;
color: #665544;}
blockquote{
float: right;
275px;
font-size: 130%;
font-style: italic;
font-family: Georgia, Times, Serif;
margin: 0px 0px 10px 10px;
padding: 10px;
border-top: 1px solid #665544;
border-bottom: 1px solid #665544;}
</style>
</head>
<body>
<h1>The Evolution of the Bicycle</h1>
<blockquote>"Life is like riding a bicycle. To keep your balance you must keep moving.
" - Albert Einstein</blockquote>
<p>In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster:
two same-size in-line wheels, the front one steerable, mounted in a frame upon which you straddled.
The device was propelled by pushing your feet against the ground, thus rolling yourself and the device forward in a sort of gliding walk.</p>
<p>The machine became known as the Draisienne (or "hobby horse").
It was made entirely of wood. This enjoyed a short lived popularity as a fad,
not being practical for transportation in any other place than a well maintained pathway such as in a park or garden.</p>
<p>The next appearance of a two-wheeled riding machine was in 1865,
when pedals were applied directly to the front wheel. This machine was known as the velocipede (meaning "fast foot")
as well as the "bone shaker," since it's wooden structure combined with the cobblestone roads of the day made
for an extremely uncomfortable ride. They also became a fad and indoor riding academies, similar to roller rinks, could be found in large cities.</p>
</body>
</html>
使用浮动将元素并排
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用浮动将元素并排</title>
<style type="text/css">
body{
750px;
font-family: Arial, Verdana, sans-serif;
color: #665544;}
p{
230px;
float: left;
margin: 5px;
padding: 5px;
background-color: #efefef;}
</style>
</head>
<body>
<h1>The Evolution of the Bicycle</h1>
<p>In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster.</p>
<p>The device know as the Draisienne (or "hobby horse") was made of wood, and propelled by pushing your feed on the ground in a gliding movement.</p>
<p>It was not seen a suitable for any place other than a well maintained pathway. </p>
<p>In 1865, the velocipede (meaning "fast foot") attached pedals to the front wheel, but its wooden structure made it extremely uncomfortable. </p>
<p>In 1870 the first all-metal machine appeared. The pedals were attached directly to the front wheel.
<p>Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
</body>
</html>
清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style type="text/css">
body{
750px;
font-family: Arial, Verdana, sans-serif;
color: #665544;}
p{
230px;
float: left;
marbin: 5px;
padding: 5px;
background-color: #efefef;}
.clear{
clear: left;}
</style>
</head>
<body>
<h1>The Evolution of the Bicycle</h1>
<p>In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster.</p>
<p>The device know as the Draisienne (or "hobby horse") was made of wood, and propelled by pushing your feed on the ground in a gliding movement.</p>
<p>It was not seen a suitable for any place other than a well maintained pathway. </p>
<p class="clear">In 1865, the velocipede (meaning "fast foot") attached pedals to the front wheel, but its wooden structure made it extremely uncomfortable.</p>
<p>In 1870 the first all-metal machine appeared. The pedals were attached directly to the front wheel.
<p>Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
</body>
</html>
浮动元素的布局： 解决方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动元素的父级：解决方案</title>
<style type="text/css">
body{
752px;
font-family: Arial, Verdana, sans-serif;
color: #665544;}
div{
border: 1px solid #665544;
overflow: auto;
100%}
p{
230px;
float: left;
margin: 10px;}
.clear{
clear: both;}
</style>
</head>
<body>
<h1>The Evolution of the Bicycle</h1>
<div>
<p>In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster.</p>
<p>The device know as the Draisienne (or "hobby horse") was made of wood, and propelled by pushing your feed on the ground in a gliding movement.</p>
<p>It was not seen a suitable for any place other than a well maintained pathway. </p>
<p class="clear">In 1865, the velocipede (meaning "fast foot") attached pedals to the front wheel, but its wooden structure made it extremely uncomfortable.</p>
<p>In 1870 the first all-metal machine appeared. The pedals were attached directly to the front wheel.
<p>Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
</body>
</html>
利用浮动创建多列式布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>利用浮动创建多列式布局</title>
<style type="text/css">
body{
960px;
font-family: Arial, Verdana, sans-serif;
color: #665544;}
.column1of2{
float: left;
620px;
margin: 10px;}
.column2of2{
float: left;
300px;
margin: 10px;}
</style>
</head>
<body>
<h1>The Evolution of the Bicycle</h1>
<div class="column1of2">
<h3>The First Bicycle</h3>
<p>In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster
: two same-size in-line wheels, the front one steerable, mounted in a frame upon which you straddled.
The device was propelled by pushing your feet against the ground, thus rolling yourself and the device forward in a sort of gliding walk.</p>
<p>The machine became known as the Draisienne (or "hobby horse").
It was made entirely of wood. This enjoyed a short lived popularity as a fad,
not being practical for transportation in any other place than a well maintained pathway such as in a park or garden.</p>
<h3>Further Innovations</h3>
<p>The next appearance of a two-wheeled riding machine was in 1865,
when pedals were applied directly to the front wheel.
This machine was known as the velocipede (meaning "fast foot") as well as the "bone shaker,
" since it's wooden structure combined with the cobblestone roads of the day made for an extremely uncomfortable ride.
They also became a fad and indoor riding academies, similar to roller rinks, could be found in large cities.</p>
<p>In 1870 the first all-metal machine appeared.
(Prior to this, metallurgy was not advanced enough to provide metal which was strong enough to make small,
light parts out of.) The pedals were attached directly to the front wheel with no freewheeling mechanism.
Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
</div>
<div class="column2of2">
<h3>Bicycle Timeline</h3>
<ul>
<li>1817: Draisienne</li>
<li>1865: Velocipede</li>
<li>1870: High-wheel bicycle</li>
<li>1876: High-wheel safety</li>
<li>1885: Hard-tired safety</li>
<li>1888: Pneumatic safety</li>
</ul>
</div>
</body>
</html>
固定宽度布局示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定宽度布局示例</title>
<style type="text/css">
*{
font-family: Arial, Verdana, sans-serif;
color: #665544;
text-align: center;}
body{
960px;
margin: 0 auto;}
#content{
overflow: auto;
height: 100%;}
#nav, #feature, #footer{
background-color: #efefef;
padding: 10px;
margin: 10px;}
.column1, .column2, .column3{
background-color: #efefef;
300px;
float: left;
margin: 10px;}
li{
display: inline;
padding: 5px;}
</style>
</head>
<body>
<div id="header">
<h1>Logo</h1>
<div id="nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Products</a></li>
<li><a href="">Services</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="feature">
<p>Feature</p>
</div>
<div class="article column1">
<p>Column One</p>
</div>
<div class="article column2">
<p>Column Two</p>
</div>
<div class="article column3">
<p>Column Three</p>
</div>
</div>
<div id="footer">
<p>© Copyright 2011</p>
</div>
</body>
</html>
流体布局示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流体布局示例</title>
<style type="text/css">
*{
font-family: Arial, Verdana, sans-serif;
color: #665544;
text-align: center;}
body{
90%;
margin: 0 auto;}
#content{
overflow: auto}
#nav, #feature, #footer{
margin: 1%;}
.column1, .column2, .column3{
31.3%;
float: left;
margin: 1%;}
.column3{
margin-right: 0%}
li{
display: inline;
padding: 0.5em 0;}
#nav, #footer{
background-color: #efefef;
padding: 0.5em 0;}
#feature, .article{
height: 10em;
margin-bottom: 1em;
background-color: #efefef;}
</style>
</head>
<body>
<div id="header">
<h1>Logo</h1>
<div id="nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Products</a></li>
<li><a href="">Services</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="feature">
<p>Feature</p>
</div>
<div class="article column1">
<p>Column One</p>
</div>
<div class="article column2">
<p>Column Two</p>
</div>
<div class="article column3">
<p>Column Three</p>
</div>
</div>
<div id="footer">
<p>© Copyright 2011</p>
</div>
</body>
</html>
多个样式表@import
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多个样式表@import</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body>
<div id="page">
<h1>Central Park Bike Hire</h1>
<p class="intro">Rent a bicycle to ride around Central Park:</p>
<table>
<tr class="head">
<th></th>
<th>Per hour</th>
<th>Per day</th>
</tr>
<tr>
<th>Cruiser</th>
<td>$9</td>
<td>$45</td>
</tr>
<tr>
<th>21 Speed</th>
<td>$15</td>
<td>$50</td>
</tr>
</table>
<h2>Where and When</h2>
<h3>Loeb Boathouse</h3>
<p>From April to November bicycles are available on first come first serve basis for riding in Central Park.</p>
<h2>Deposits</h2>
<h3>Cash or credit card</h3>
<p>A $200 deposit is required for the hire of any of our bicycles.</p>
</div>
</body>
</html>
多个样式表： link
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多个样式表：link</title>
<link rel="stylesheet" type="text/css" href="css/site.css">
<link rel="stylesheet" type="text/css" href="css/tables.css">
<link rel="stylesheet" type="text/css" href="css/typography.css">
</head>
<body>
<div id="page">
<h1>Central Park Bike Hire</h1>
<p class="intro">Rent a bicycle to ride around Central Park:</p>
<table>
<tr class="head">
<th></th>
<th>Per hour</th>
<th>Per day</th>
</tr>
<tr>
<th>Cruiser</th>
<td>$9</td>
<td>$45</td>
</tr>
<tr>
<th>21 Speed</th>
<td>$15</td>
<td>$50</td>
</tr>
</table>
<h2>Where and When</h2>
<h3>Loeb Boathouse</h3>
<p>From April to November bicycles are available on first come first serve basis for riding in Central Park.</p>
<h2>Deposits</h2>
<h3>Cash or credit card</h3>
<p>A $200 deposit is required for the hire of any of our bicycles.</p>
</div>
</body>
</html>