《HTML+CSS+DIV网页设计与布局 教学课件 ppt 作者 聂斌 1_ 第12章 控制元素布局》由会员分享，可在线阅读，更多相关《HTML+CSS+DIV网页设计与布局 教学课件 ppt 作者 聂斌 1_ 第12章 控制元素布局（26页珍藏版）》请在金锄头文库上搜索。
1、第12章 控制元素布局,在网页的设计中，元素布局的控制是非常重要的。好的网站，元素的布局一定也是非常漂亮的。只有在熟练掌握了元素的布局之后，在CSS的制作中才能如鱼得水。,12.1 块级元素和内联元素,在讲解定位之前，需要先来了解两个概念块级元素和内联元素。在定位中，块级元素和内联元素它们定位的效果是不一样的。,12.1.1 块级元素和内联元素的概念,块级元素生成的是一个矩形框，并且和相邻的块级元素依次竖直排列，不会排在同一行。例如元素、元素、元素、元素等这些都是块级元素，它们总是以一个块出现，总是单独占据一行。 内联元素通俗点来说就是文本的显示方式，我们常用到的、都属于内联元素。内联元素的显
2、示特点就是像文本一样的显示，各个元素之间横向排列，到最右端自动换行，不会独自占据一个行。,12.1.2 元素和元素,为了更好的理解块级元素和内联元素，这里重点介绍在CSS布局中经常使用的元素和元素。利用这两个元素，加上CSS对其样式的设计，可以很方便的实现各种效果。,1. 元素,元素简单而言就是一个独立的对象，它是一个标准的块级元素，用它可以容纳各种元素，从而方便排版。在用CSS设置样式时只需要对进行相应的控制，其中包含的各个元素都会随之改变。元素语法如下所示。 各种元素或文字 ,2.元素,元素与元素一样，作为容器标记而被广泛应用在HTML语言中。在和之间同样可以容纳各种HTML元素，从而形成
3、独立的对象。元素与元素的区别在于，元素是一个块级元素，它包围的元素会自动换行，而元素是一个内联元素，它包围的元素不会自动换行。元素语法如下所示。 各种元素或文字 ,12.2 定位,CSS中的网页布局，使用的都是块形式，而块出现在网页中的哪个位置，所采用的就是定位的方式。定位（positioning）就是允许网页开发者精确定义元素出现的相对位置。这个相对位置可以是相对父级元素、另一个元素或浏览器窗口。,12.2.1 定位方式,在CSS中可以使用position属性来设置定位的模式，position属性的语法代码如下所示： position : static | relative | absolu
4、te| 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 综合
5、运用,学习了定位和偏移，知道了定位有四种不同的模式，下面我们结合偏移来分别介绍这几种模式的不同之处。,1.静态定位,静态定位模式是定位模式中的默认定位模式。在该模式中，对定位没有任何要求，完全是由浏览器自动生成，对于块级元素来说，通常是生成一个矩形框，如div层等。对于内联元素来说，则按正常的流生成，如b元素等。 将元素的position属性值设为static可以设置元素的静态定位。由于静态定位模式并没有对元素在定位方面指出任何要求，因此所有的偏移属性在该模式下都是不起作用的。,2.绝对定位,绝对定位，是相对于父级元素的四个边框而言的，通常可以把整个网页（或者说是body元素）看成是一张纸，而
6、绝对定位就是将块放在网页的某个位置。至于具体将块放在网页的哪个位置，就由偏移量来决定的了。 将元素的position属性值设为absolute就可以设置元素的绝对定位。,3.相对定位,如果说绝对定位是相对网页的定位，那么相对定位就是相对元素自己的定位。所谓相对元素自己的定位是指元素相对于没有设置position属性之前的位置。 将元素的position属性值设为relative可以设置元素的相对定位。,12.2.4 定位元素的层叠次序,当一个页面内有多个层的时候，就需要设置这些层的层叠顺序，这样才不会将页面中需要显示的内容遮挡住。一般情况下，越晚添加的层，位置也越靠上。设置层叠顺序的语法是：
7、z-index:顺序号,12.3 浮动,通常在一个网页文档里，文档流都是从上到下、由左而右流动的。对于内联元素而言，创建了一个元素之后，会在其右接着创建其他元素；对于块级元素而言，在创建了一个元素之后，会在其下方接着创建其他元素。CSS中的浮动可以让某些元素脱离这种文档流的方式。,12.3.1 浮动的概念,相信读者对于浮动的概念应该是不会太陌生，在介绍图片和表格时都曾介绍过图片和表格的对齐方式，这种对齐方式其实上就是“浮动”。 例如“”会让图片向右方浮动，并且其他元素都会围绕着图片“流动” 。在HTML中只有图片与表格可以浮动，而使用CSS可以让所有元素都浮动起来。,12.3.2 设置浮动,在
8、CSS中使元素浮动的属性为float，其语法代码为： float : left | right | none,12.3.3 清除浮动,当一个元素被设为浮动之后，如果没有特别指示，这个元素之后的所有内容都会围绕该元素流动，如下图所示，很明显，“武林外传游戏”与图片是两个不同的内容，但是该内容还是围绕着图片显示的。,12.3.3 清除浮动,在这种情况下，应该在“武林外传游戏”标题处停止围绕图片显示，这就需要清除图片的浮动。在CSS里可以使用clear属性来清除浮动效果，其语法代码为： clear : none | left | right | both,12.4 溢出与剪切,当一个元素的大小无法容
9、纳其中的内容时，就会产生溢出的情况，也就是元素中的内容已经显示在元素外面了。而剪切的作用是只显示元素中的某一部分，把其余部分都剪切掉。,12.4.1 溢出内容的设置,在CSS中可以通过overflow属性来处理溢出情况，overflow属性的语法代码如下所示： overflow : visible | hidden | scroll | auto | inherit,12.4.2 设置水平方向超出范围的处理方式,使用overflow属性可以设置超出范围时的内容处理方式，但是一旦设置了，则对水平方向和垂直方向同时起作用。如果只需要设置其中一个方向，可以单独进行设置。使用overflow-x可以设
10、置水平方向上的处理方式，其语法是： overflow-x: visible / auto / hidden / scroll,12.4.3 设置垂直方向超出范围的处理方式,使用overflow-y可以设置当内容超出元素的范围时，在垂直方向上的处理方式，其设置的语法是： overflow-y: visible / auto / hidden / scroll,12.4.4 内容的剪切,在CSS中可以使用clip属性来剪切对象，所谓“剪切”只是在对象上划分一个矩形的区域，属性该区域中的部分则显示出来，不属于该区域的部分则隐藏。clip属性的语法代码为： clip : auto | rect ( 上
11、 右 下 左 ) | inherit,12.5 对象的显示与隐藏,对于块状对象而言，除了可以设置溢出与剪切之外，还可以对整个块设置显示或隐藏。显示、隐藏与溢出、剪切不同，溢出与剪切所影响的只是对象的局部那显示与隐藏影响的是整个对象。在CSS中可以使用visibility来设置对象是否可见。visibility属性的语法代码为： visibility : visible | hidden | collapse,12.6 小结,本章主要讲解了如何控制元素的布局。详细讲解了元素布局中的定位、浮动、溢出与剪切、对象的显示与隐藏。其中，定位讲解了定位的方式、偏移量、以及定位元素的层叠顺序；浮动讲解了浮动的概念、如何设置浮动以及清除浮动的方法；溢出与剪切讲解了溢出内容的设置、设置水平方向超出范围的处理方式、设置垂直方向超出范围的处理方式和内容的剪切。,
