网页元素定位的设置

这一节中，我们将带领大家来学习网页设计中元素定位的设置。主要讲解两个知识点，一个是positon定位，一个是浮动定位。

在这一节中，理解的东西是重点，而且是难点。定位这个概念相对抽象，但在整个网页排版布局中却是十分重要的。然而，同学们有了本节慕课网 WIKI 的讲解，大可打消恐惧的心理。

一方面本节我们介绍的内容并不多，并不会像传统培训机构一样一次性填鸭式教学讲授很多内容，另一方面，老师在本节中也会为大家讲述的特别清晰。在认真研读学习的基础上，相信大家一定能在本篇 WIKI 的引导下充分掌握页面中基础的位置布局本领。下面就请大家跟随老师的脚步一起来学习网页元素定位的设置相关内容吧！

1. 网页的 position 定位

1.1 定位在网页设计中的作用

众所周知，现在的网页中每个元素都是相对固定的，意思是每个网页元素都有其相对其他元素较为固定的位置。从主观的角度来思考，网页中的定位应该至少分为两种：

• 一种是以固定不动的东西作为基准去定位自己的位置；
• 一种应该是以某个已有元素的位置去定位自己的位置。

那么，掌握了这两种定位思路，大家就不难掌握今天的知识点了。首先，网页定位。一个合理的定位几乎决定了我们网页的用户查看网页的整个观感效果。因此，学好定位在网页设计中是很重要的。

1.2 网页中的 position

position，英文较好的同学们或许早已明白，它的中文译为位置。在网页设计中，它是很多元素都有的一个属性，那么这个属性有哪些可能的值？这一点我们要有个基本的认知：

static

首先，我们来了解它的默认值 static。static 是静态的，静止的意思。所有支持 position 属性的 HTML 元素在一上来的属性值都是这个值 static。它是一个默认值，在网页设计中可不是说这个元素的位置是静止的，而是说明这个元素是没有定位的。 元素会按照它不设置任何定位的时候的模样展示。具体的模样在这里不做详细说明，后面我们会有更深入的课程讲解。

absolute

其次，我们来看几个position属性常见的取值。第一个是 absolute ，它的意思是绝对定位，当一个元素的 position 属性的值为 absolute 的时候，意味着它是一个采用绝对定位的元素。 也就是我们本节1.1 中描述的第二种定位方式。大多数情况下，这种设置下元素的位置是通过上，下，左，右属性进行的定位的。

fixed

第二个常见的值就是 fixed ，当元素的 position 属性被赋予 fixed 的值后，元素和 absolute 一样，也是一个绝对定位的元素。定位方式也完全一致，即通过上下左右来实现自己的定位。

但同学们肯定会有疑问：那么 absolute 和 fixed 两种设置有什么区别呢。这里就要重点提一下：二者的区别是在定位的时候参照的东西不同。 absolute 定位的方式是相对于 static 定位以外的第一个父元素进行定位的。而 fixed 指的是相对于浏览器窗口进行的定位。但同学们仍旧不要忘了它们都是绝对定位的方式。

relative

第三个常见的值就是 relative ，这个是我们第一个见到的相对定位取值吧，也就是 1.1 中描述的第一种定位方式。这种定位的方式呢，往往是相对于正常位置去定位，也会用到上下左右来辅助定位。

好了，以上的介绍呢就是我们在这个小节中关于 position 定位的介绍。由于多数是给大家总结干货，就少了些详细的内容，大家如果想今后学习更详细的内容，请大家去相关标准的官网去下载相应的文档，那里面会有最全面，最标准的介绍。同时在这里，老师也要提醒大家，官方文档固然官方，但毕竟学习的出，远大于学习的入，大家做出来的样式才算大家所学，文档上的知识没有必要逼迫自己填鸭式全部记住，也不可能记住。把文档当工具，才是学习这一门学问的正常现象。

2. 设置浮动定位

2.1 定位方式的分类

刚刚说到了定位方式，其实常见的定位体系大致上只有三种：

• 第一种是常规的根据文档流进行元素的排布定位，我们称之为流式定位；

• 第二种是绝对定位，就是我们上面提到的某些定位方式；

• 第三种定位方式，就是我们这回要讲解的浮动定位。

在 HTML中，浮动定位是使用一个名为 float 的属性来约束元素的位置，下面我们就来仔细讨论学习一下这个 float。

2.2 float 的取值

floa t的取值有三种：左浮动，右浮动，和不浮动。原则上讲，任何元素都可以浮动，比如 DIV，比如ul 等。这里需要强调一点：凡是被声明为 float 的元素都会自动地被设置为块元素。

Tips：块元素是一种可以设置宽高，设置内外边距的元素。

2.3 清除浮动

有的时候网页发生一些布局错误的时候，浮动的效果并非我们想要，这个时候就需要清除浮动。那么常见的清除浮动方式有哪些呢？

首先是：不清除浮动 clear：none 。再有就是清除左/右浮动其中之一 cleat ： left/right 。最后就是清除所有的浮动 clear：both 这样大家就基本掌握了所有清除浮动的方式。

3.本节小结

通过本节知识点的学习，我们可以清晰地了解到网页中设置布局位置的重要性，学会了相对定位和绝对定位当中的一些常识，学习 position 属性在网页设计中的重要性。

在第二个较大的知识点中，我们还学习了浮动定位，了解了元素原来是可以浮动的，这个需要我们具备一定的想象能力，也需要大家实际的去电脑上敲击一下相关的代码。

由于 Dreamweaver CC 2018的设置元素属性的基本操作大家都已经学习过不止一遍了，因此，这一次的学习就以知识点的讲解为主，深入浅出，希望大家能在文档之外的学习生活中多多练习。

本节的重点是： position 的几种取值以及它们对应的效果含义。
本节的难点是： 对浮动定位的理解。