这一节的知识非常重要，它关系到能否做出漂亮的网站。下面的概念、术语需要好好理解。
构建块：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
>
1060
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
