CSS 布局术语

这一节的知识非常重要，它关系到能否做出漂亮的网站。下面的概念、术语需要好好理解。

构建块：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>

<h2><a href="https://www.liyongzhen.com/">学编程，上利永贞网</a></h2>

<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>

<h2><a href="https://www.liyongzhen.com/">学编程，上利永贞网</a></h2>

<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>

<h2><a href="https://www.liyongzhen.com/">学编程，上利永贞网</a></h2>

<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>

<h2><a href="https://www.liyongzhen.com/">学编程，上利永贞网</a></h2>

<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>

<h2><a href="https://www.liyongzhen.com/">学编程，上利永贞网</a></h2>

<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>