这一节的知识非常重要，它关系到能否做出漂亮的网站。下面的概念、术语需要好好理解。
构建块：CSS采用盒子模型来处理每个HTML元素。盒子可以是一个“块级”盒子，也可以是一个“内联”盒子。
包含元素：包含元素也叫父级元素。如果一个块级元素位于另一个块级元素内部，那么这个外部的框就称为包含元素或父级元素。
块级元素：块元素换行显示，它的实例包括<h1>~<h6>、<p>和<div>元素等。
内联元素：内联元素流动于文本中并且不会换行，它的实例包括<b>、<i>、<img>、<em>和<span>
控制元素位置3大法宝：position z-index float.
一流四定位
普通流
每个块级元素都换行显示，以至于页面中的每个项目都显示在前一个项目的下面。
即使你指定了盒子的宽度，并且也有足够的空间让两个元素并排显示，它们也还是不会出现在一起。
浏览器默认是普通流显示。
普通流在CSS里使用属性 position 值为static。默认就是普通流，因此可以不用指定属性 position:staic
<!DOCTYPE html><html> <head> <title>普通流</title> <meta charset="UTF-8"> <style type="text/css"> body { width: 750px; color: #665544;} h1 { padding: 10px;} p { width: 500px;} </style> </head> <body> <h1>软件开发，成就梦想</h1> <p>每个块级元素都换行显示，以至于页面中的每个项目都显示在前一个项目的下面。即使你指定了盒子的宽度， 并且也有足够的空间让两个元素并排显示，它们也还是不会出现在一起。浏览器默认是普通流显示。</p> </body></html>相对定位
相对定位将一个元素从它在普通流中所处的位置上移动，在它原来的位置向上、向下、向左、向右移动。
这种移动不会影响到周围元素的位置，周围元素还是位于普通流中所处的位置。
相对定位在CSS里使用属性 position 值为relative。
<!DOCTYPE html><html> <head> <title>相对定位</title> <meta charset="UTF-8"> <style type="text/css"> body { width: 750px; color: #665544;} h1 { padding: 10px;} p { width: 500px;} p.example { position: relative; top: 10px; left: 100px; </style> </head> <body> <h1>软件开发，成就梦想</h1> <p>这一节的知识非常重要，它关系到能否做出漂亮的网站。下面的概念、术语需要好好理解。</p> <p class="example">相对定位将一个元素从它在普通流中所处的位置上移动，在它原来的位置向上、向下、向左、向右移动。 这种移动不会影响到周围元素的位置，周围元素还是位于普通流中所处的位置。 顶部座标从10px开始，左边坐标从100px开始 </p> <p>教程中的术语、名词、概念、原理，不需要死死记住，了解，再了解，能用自己的复述出来即可。 教程中的示例，刚刚学，有些地方可能不懂，这没关系，不会影响后面的学习，过一阵子回过送来，你会豁然开朗，原来如此呀。</p> </body></html>绝对定位
绝对定位的元素的位置相对于它的包含元素。它完全脱离了普通流，它不会影响到周围任何元素的位置（就像是直接忽略掉它所占据的空间）。
使用绝对定位的元素随着页面的滚动而移动，它就像是固定在页面上。
相对定位在CSS里使用属性 position 值为absolute。
<!DOCTYPE html><html> <head> <title>相对定位</title> <meta charset="UTF-8"> <style type="text/css"> body { width: 750px; color: #665544;} h1 { position: absolute; top: 0px; left: 500px; width: 300px;} p { width: 400px;} </style> </head> <body> <h1>软件开发，成就梦想</h1> <p>这一节的知识非常重要，它关系到能否做出漂亮的网站。下面的概念、术语需要好好理解。</p> <p>绝对定位的元素的位置相对于它的包含元素。它完全脱离了普通流，它不会影响到周围任何元素的 位置（就像是直接忽略掉它所占据的空间）。 使用绝对定位的元素随着页面的滚动而移动，它就像是固定在页面上。 </p> <p>教程中的术语、名词、概念、原理，不需要死死记住，了解，再了解，能用自己的复述出来即可。 教程中的示例，刚刚学，有些地方可能不懂，这没关系，不会影响后面的学习， 过一阵子回过送来，你会豁然开朗，原来如此呀。</p> </body></html>固定定位
固定定位是绝对定位的一种形式，也相对于包含元素定位不同，它是将元素相对于浏览器窗口进行定位。
固定定位是指元素相对于浏览器窗口进行定位。固定的元素不会影响到周围的元素位置，而且当页面上下滚动时，它不会移动。
相对定位在CSS里使用属性 position 值为fixed。
<!DOCTYPE html><html> <head> <title>相对定位</title> <meta charset="UTF-8"> <style type="text/css"> body { width: 750px; color: #665544;} h1 { position: fixed; top: 0px; left: 0px; padding: 10px; margin: 0px; width: 100%; } p { width: 400px;} </style> </head> <body> <h1>软件开发，成就梦想</h1> <p>这一节的知识非常重要，它关系到能否做出漂亮的网站。下面的概念、术语需要好好理解。</p> <p>固定定位是绝对定位的一种形式，也相对于包含元素定位不同，它是将元素相对于浏览器窗口进行定位。 固定定位是指元素相对于浏览器窗口进行定位。固定的元素不会影响到周围的元素位置， 而且当页面上下滚动时，它不会移动。相对定位在CSS里使用属性 position 值为fixed。 </p> <p>教程中的术语、名词、概念、原理，不需要死死记住，了解，再了解，能用自己的复述出来即可。 教程中的示例，刚刚学，有些地方可能不懂，这没关系，不会影响后面的学习， 过一阵子回过送来，你会豁然开朗，原来如此呀。</p> <p>这一节的知识非常重要，它关系到能否做出漂亮的网站。下面的概念、术语需要好好理解。</p> <p>固定定位是绝对定位的一种形式，也相对于包含元素定位不同，它是将元素相对于浏览器窗口进行定位。 固定定位是指元素相对于浏览器窗口进行定位。固定的元素不会影响到周围的元素位置， 而且当页面上下滚动时，它不会移动。相对定位在CSS里使用属性 position 值为fixed。 </p> <p>教程中的术语、名词、概念、原理，不需要死死记住，了解，再了解，能用自己的复述出来即可。 教程中的示例，刚刚学，有些地方可能不懂，这没关系，不会影响后面的学习， 过一阵子回过送来，你会豁然开朗，原来如此呀。</p> <p>这一节的知识非常重要，它关系到能否做出漂亮的网站。下面的概念、术语需要好好理解。</p> <p>固定定位是绝对定位的一种形式，也相对于包含元素定位不同，它是将元素相对于浏览器窗口进行定位。 固定定位是指元素相对于浏览器窗口进行定位。固定的元素不会影响到周围的元素位置， 而且当页面上下滚动时，它不会移动。相对定位在CSS里使用属性 position 值为fixed。 </p> <p>教程中的术语、名词、概念、原理，不需要死死记住，了解，再了解，能用自己的复述出来即可。 教程中的示例，刚刚学，有些地方可能不懂，这没关系，不会影响后面的学习， 过一阵子回过送来，你会豁然开朗，原来如此呀。</p> </body></html>浮动元素
浮动元素脱离了普通流，并定位到其包含盒子的最左边或最右边的位置。
这个浮动的元素会成为一个周围可以浮动其它内容的块级元素。
浮动元素属性float属性，它有两个值：
left 元素在左边
right 元素在右边
<!DOCTYPE html><html> <head> <title>浮动元素</title> <meta charset="UTF-8"> <style type="text/css"> body { width: 750px; color: #665544;} blockquote { float: right; width: 275px; font-size: 130%; font-style: italic; margin: 0px 0px 10px 10px; padding: 10px; border-top: 1px solid #665544; border-bottom: 1px solid #665544;} </style> </head> <body> <h1>软件开发，成就梦想</h1> <p>这一节的知识非常重要，它关系到能否做出漂亮的网站。下面的概念、术语需要好好理解。</p> <blockquote>浮动元素脱离了普通流，并定位到其包含盒子的最左边或最右边的位置。这个浮动的元素会成 为一个周围可以浮动其它内容的块级元素。浮动元素属性float属性，它有两个值：left 元素在左边; right 元素在右边 </blockquote> <p>教程中的术语、名词、概念、原理，不需要死死记住，了解，再了解，能用自己的复述出来即可。 教程中的示例，刚刚学，有些地方可能不懂，这没关系，不会影响后面的学习， 过一阵子回过送来，你会豁然开朗，原来如此呀。</p> <p>这一节的知识非常重要，它关系到能否做出漂亮的网站。下面的概念、术语需要好好理解。</p> <p>固定定位是绝对定位的一种形式，也相对于包含元素定位不同，它是将元素相对于浏览器窗口进行定位。 固定定位是指元素相对于浏览器窗口进行定位。固定的元素不会影响到周围的元素位置， 而且当页面上下滚动时，它不会移动。相对定位在CSS里使用属性 position 值为fixed。 </p> <p>教程中的术语、名词、概念、原理，不需要死死记住，了解，再了解，能用自己的复述出来即可。 教程中的示例，刚刚学，有些地方可能不懂，这没关系，不会影响后面的学习， 过一阵子回过送来，你会豁然开朗，原来如此呀。</p> <p>这一节的知识非常重要，它关系到能否做出漂亮的网站。下面的概念、术语需要好好理解。</p> <p>固定定位是绝对定位的一种形式，也相对于包含元素定位不同，它是将元素相对于浏览器窗口进行定位。 固定定位是指元素相对于浏览器窗口进行定位。固定的元素不会影响到周围的元素位置， 而且当页面上下滚动时，它不会移动。相对定位在CSS里使用属性 position 值为fixed。 </p> <p>教程中的术语、名词、概念、原理，不需要死死记住，了解，再了解，能用自己的复述出来即可。 教程中的示例，刚刚学，有些地方可能不懂，这没关系，不会影响后面的学习， 过一阵子回过送来，你会豁然开朗，原来如此呀。</p> </body></html>