HTML+CSS+DIV网页设计与布局 作者 聂斌 第12章 控制元素布局.pptVIP

12.6 小结 本章主要讲解了如何控制元素的布局。详细讲解了元素布局中的定位、浮动、溢出与剪切、对象的显示与隐藏。其中，定位讲解了定位的方式、偏移量、以及定位元素的层叠顺序；浮动讲解了浮动的概念、如何设置浮动以及清除浮动的方法；溢出与剪切讲解了溢出内容的设置、设置水平方向超出范围的处理方式、设置垂直方向超出范围的处理方式和内容的剪切。 第12章 控制元素布局 在网页的设计中，元素布局的控制是非常重要的。好的网站，元素的布局一定也是非常漂亮的。只有在熟练掌握了元素的布局之后，在CSS的制作中才能如鱼得水。 在线教务辅导网： 教材其余课件及动画素材请查阅在线教务辅导网 QQ:349134187 或者直接输入下面地址： 12.1 块级元素和内联元素 在讲解定位之前，需要先来了解两个概念——块级元素和内联元素。在定位中，块级元素和内联元素它们定位的效果是不一样的。 12.1.1 块级元素和内联元素的概念 块级元素生成的是一个矩形框，并且和相邻的块级元素依次竖直排列，不会排在同一行。例如p元素、ul元素、h1元素、form元素等这些都是块级元素，它们总是以一个块出现，总是单独占据一行。 内联元素通俗点来说就是文本的显示方式，我们常用到的a、img、input都属于内联元素。内联元素的显示特点就是像文本一样的显示，各个元素之间横向排列，到最右端自动换行，不会独自占据一个行。 12.1.2 div元素和span元素 为了更好的理解块级元素和内联元素，这里重点介绍在CSS布局中经常使用的div元素和span元素。利用这两个元素，加上CSS对其样式的设计，可以很方便的实现各种效果。 1. div元素 div元素简单而言就是一个独立的对象，它是一个标准的块级元素，用它可以容纳各种元素，从而方便排版。在用CSS设置样式时只需要对div进行相应的控制，其中包含的各个元素都会随之改变。div元素语法如下所示。 div 各种元素或文字 /div 2.span元素 span元素与div元素一样，作为容器标记而被广泛应用在HTML语言中。在span和/span之间同样可以容纳各种HTML元素，从而形成独立的对象。span元素与div元素的区别在于，div元素是一个块级元素，它包围的元素会自动换行，而span元素是一个内联元素，它包围的元素不会自动换行。span元素语法如下所示。 span 各种元素或文字 /span 12.2 定位 CSS中的网页布局，使用的都是块形式，而块出现在网页中的哪个位置，所采用的就是定位的方式。定位（positioning）就是允许网页开发者精确定义元素出现的相对位置。这个相对位置可以是相对父级元素、另一个元素或浏览器窗口。 12.2.1 定位方式 在CSS中可以使用position属性来设置定位的模式，position属性的语法代码如下所示： position : static | relative | absolute| inherit; 12.2.2 偏移 在上一节中的定位模式里，有三种定位模式（relative、absolute和fixed）都需要使用偏移属性来指定定位的位置。在CSS中，偏移量有四个属性：left、right、top和bottom，分别代表左偏移量、右偏移量、上偏移量和下偏移量。其语法代码如下所示： left : 长度 | 百分比 | auto | inherit right : 长度 | 百分比 | auto | inherit top : 长度 | 百分比 | auto | inherit bottom : 长度 | 百分比 | auto | inherit 12.2.3 综合运用 学习了定位和偏移，知道了定位有四种不同的模式，下面我们结合偏移来分别介绍这几种模式的不同之处。 1.静态定位 静态定位模式是定位模式中的默认定位模式。在该模式中，对定位没有任何要求，完全是由浏览器自动生成，对于块级元素来说，通常是生成一个矩形框，如div层等。对于内联元素来说，则按正常的流生成，如b元素等。 将元素的position属性值设为static可以设置元素的静态定位。由于静态定位模式并没有对元素在定位方面指出任何要求，因此所有的偏移属性在该模式下都是不起作用的。 2.绝对定位 绝对定位，是相对于父级元素的四个边框而言的，通常可以把整个网页（或者说是body元素）看成是一张纸，而绝对定位就是将块放在网页的某个位置。至于具体将块放在网页的哪个位置，就由偏移量来决定的了。 将元素的position属性值设为absolute就可以设置元素的绝对定位。 3.相对定位 如果说绝对定位是相对网页的定位，那么相对定位就是相对元素自己的定位。所谓相对元素自己的定位是指元