标签：wheel 布局 two machine width front was CSS
1.CSS中包含以下定位机制
（1）普通流。每个块级元素都换行显示。
（2）相对定位。将一个元素从普通流所处的位置上移动。这种移动不会影响周围元素的位置。
（3）绝对定位。绝对定位的元素的位置相对于包含他的元素。完全脱离了普通流。不会影响到周围任何元素的位置。
使用绝对定位的元素随着页面的滚动而移动。
2.普通流 position:static
默认就是普通流。
<!DOCTYPE html>
<html>
<head>
<title>Normal Flow</title>
<style type="text/css">
body {
width: 750px;
font-family: Arial, Verdana, sans-serif;
color: #665544;}
h1 {
background-color: #efefef;
padding: 10px;}
p {
width: 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>
3.相对定位postion:relative
相对定位以其在普通流中所处的位置为起点进行移动。
<!DOCTYPE html>
<html>
<head>
<title>Relative Positioning</title>
<style type="text/css">
body {
width: 750px;
font-family: Arial, Verdana, sans-serif;
color: #665544;}
p {
width: 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>
4.绝对定位postion:absolute
如果一个盒子的Postion属性值为absolute，那么它就会脱离普通流，不再影响页面中其他元素的位置。
盒子的位移属性top,bottom left right用于指定元素应该显示在什么位置。
<!DOCTYPE html>
<html>
<head>
<title>Absolute Positioning</title>
<style type="text/css">
body {
width: 750px;
font-family: Arial, Verdana, sans-serif;
color: #665544;}
h1 {
position: absolute;
top: 0px;
left: 500px;
width: 250px;}
p {
width: 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>
5.固定定位
固定定位是绝对定位的一张类型。position:fiexed。
固定定位是指元素相对于浏览器窗口进行定位。因此，当用户滚动页面时，这类元素位置保持不变。
示例中用margin-top将p元素推至下方。
<!DOCTYPE html>
<html>
<head>
<title>Fixed Positioning</title>
<style type="text/css">
body {
width: 750px;
font-family: Arial, Verdana, sans-serif;
color: #665544;}
h1 {
position: fixed;
top: 0px;
left: 0px;
padding: 10px;
margin: 0px;
width: 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>
6.重叠元素z-index
当你使用相对定位，固定定位或者绝对定位时，盒子是可以重叠的，如果盒子出现重叠，那么在html代码中，后出现的元素将位于页面中先出现元素的上层。
z_index数值越大，元素的层次就越靠前。
<!DOCTYPE html>
<html>
<head>
<title>Z-Index</title>
<style type="text/css">
body {
width: 750px;
font-family: Arial, Verdana, sans-serif;
color: #665544;}
h1 {
position: fixed;
top: 0px;
left: 0px;
margin: 0px;
padding: 10px;
width: 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 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>
7.浮动元素float
float属性允许你将普通流中的元素在它的包含元素内尽可能的向左或向右排列。使用float属性的同时。你还应该使用width属性来指定浮动元素的宽度。
否则，显示效果就会不一致。浮动的盒子可能会占满其包含元素的整个宽度。
<!DOCTYPE html>
<html>
<head>
<title>Float</title>
<style type="text/css">
body {
width: 750px;
font-family: Arial, Verdana, sans-serif;
color: #665544;}
blockquote {
float: right;
width: 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>
8.使用浮动元素将元素并排
许多布局都将盒子并排到一起，通常利用float属性来完成这些布局。
当元素浮动时，相应盒子的高度就会对后面元素的位置产生影响。
<!DOCTYPE html>
<html>
<head>
<title>Using Float to Place Elements Side-by-Side</title>
<style type="text/css">
body {
width: 750px;
font-family: Arial, Verdana, sans-serif;
color: #665544;}
p {
width: 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>
标签：wheel,
布局,
two,
machine,
width,
front,
was,
CSS
From： https://www.cnblogs.com/zhongta/p/18458165