HTML之控制元素布局

在网页的设计中,元素布局的控制是非常重要的。好的网站,元素的布局一定也是非常漂亮的。只有在熟练掌握了元素的布局之后,在CSS的制作中才能如鱼得水。

块级元素和内联元素

在讲解定位之前,需要先来了解两个概念----块级元素和内联元素。在定位中,块级元素和内联元素定位的效果是不一定的。

块级元素的内联元素的概念
块级元素生成的是一个矩形框,并且和相邻的块级元素依次竖直排列,不会排在同一行。例如<p>元素、<ul>元素、<h1>元素、<form>元素等这些都是块级元素,它们总是以一个块出现,总是单独占据一行。
内联元素通俗来说就是文本的显示方式,我们常用到<a>、<img>、<input>都属于内联元素。内联元素的显示特点就是像文本一样的显示,各个元素之间横向排列,到最右端自动换行,不会独自占据一行。当然块级元素也能变成内联元素,这就是用到我们下面所说的定位和浮动了。

<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>元素语法如下所示。

<span>
各种元素或文字
</span>

定位

CSS中的网页布局,使用的都是块形式,而块出现在网页中的哪个位置,所采用的的就是定位的方式。定位(positioning)就是允许网页开发者精确定义元素出现的相对位置。这个相对位置可以是相对父级元素、另一个元素或浏览器窗口。

定位方式
在CSS中可以使用position属性来设置定位的模式,position属性的语法代码如下所示:

position : static | relative | absolute | inherit;

以上代码的属性值所代表的含义如下:
static:静态定位模式,即无特殊定位。块以普通方式生成,块级元素生成的是一个矩形框,是文档流中的一个部分。而内联级框是由一个或多个行框的上下文生成。这些行框流动于父级元素中。该值为默认值。
relative:这是一个相对定位模式。使用该模式的块可以偏移一定的距离,块偏移的方向和幅度可以由top、left、right和bottom四个偏移属性联合指定。这是一个相对定位的模式,其产生是先用static方式生成一个块,再移动这个块到指定的相对位置。
absolute:这是一个绝对定位模式。同样也是使用top、left、right和bottom四个属性来决定块的位置。
inherit:继承父级样式
由于定位模式通常与偏移量有关,因此在下面介绍完偏移量之后再介绍这四种定位模式的区别。

偏移
在上面介绍的定位模式中,有三种定位模式(relative、absolute和fixed)都需要使用偏移属性来制定定位的位置。在CSS中,偏移量有四个属性:left、right、top、和bottom,分别代表左偏移量、右偏移量、上偏移量和下偏移量。其语法代码如下所示:
left : 长度 | 百分比 | auto | inherit
right : 长度 | 百分比 | auto | inherit
top :长度 | 百分比 | auto | inherit
bottom :长度 | 百分比 | auto | inherit
以上代码的属性值所代表的含义为:
长度:可以是绝对单位数值,也可以是相对单位数值,用于指明偏移的幅度。
百分比:以百分比的形式指定偏移幅度,这个百分比为父级元素的宽度和高度的百分比。
auto:无特定的偏移量,由浏览器自己分配,该值为默认值。
inherit:继承父级样式。
当一个元素被设置了偏移之后,这个元素的所以部分都会跟着一起偏移,如边框、边距、填充等。

综合运用
学习了定位和偏移,知道了定位有四种不同的模式,下面我们结合偏移来分别介绍这几种模式的不同之处
1.静态定位
静态定位模式是定位模式中的默认定位模式。在该模式中,对定位没有任何要求,完全是由浏览器自动生成的,对于块级元素来说,通常是生成一个矩形框,如div层等。对于内联元素来说,则按正常的流生成,如b元素等。
块级元素是能引起换行的元素,如p、div、hr等,内联元素是不能引起换行的元素,如b、sup等。
将元素的position属性值设为static可以设置元素的静态定位。由于静态定位模式并没有对元素在定位方面指出任何要求,因此所有的偏移属性在该模式下都是不起作用的。
2.绝对定位
绝对定位,是相对于父级元素的四个边框而言的,通常可以把整个网页(或者说是body元素)看成是一张纸,而绝对定位就是将块放在网页的某个位置。至于具体将块放在网页的哪个位置,有偏移量来决定。将元素的position属性值设为absolute就可以设置元素的绝对定位。
3.对定位
如果说绝对定位是相对网页的定位,那么相对定位就是相对元素自己的定位。所谓相对元素自己的定位是指元素相对于没有设置position属性之前的位置。将元素的position属性值设为relative可以设置元素的相对定位。

定位元素的层叠次序
当一个页面内有多个层的时候,就需要设置这些层的层叠顺序,这样才不会将页面中需要显示的内容遮挡住。一般情况下,越晚添加的层,位置也越靠上。设置层叠顺序的语法是:
z-index:顺序号
在这里,层叠顺序是通过设置其所在的层顺序号来实现的。一般情况下,取值为1,表示该层位于最上层,也就是没有其他层会覆盖该层。顺序号越大,层越靠下,被覆盖的几率也越大。

浮动

通常在一个网页文档里,文档流都是从上到下、右左而右流动的。对于内联元素而言,创建了一个元素之后,会在其右接着创建其他元素;对于块级元素而言,在创建了一个元素之后,会在其下方接着创建其他元素。CSS中浮动可以让某些元素脱离这种文档流的方式。

浮动的概念
例如"img src=“a.jpg” align=“right”>“会让图片向右方浮动,并且其他元素都会围绕着图片"流动”。在HTML中只有图片与表格可以浮动,而使用CSS可以让所有元素都浮动起来。

设置浮动
在CSS中使元素浮动的属性为float,其语法代码为:

float : left | right | none

以上代码的属性值所代表的含义为:
left : 对象居左浮动,文本流向对象的右侧。
right : 对象居右浮动,文本流向对象的右侧。
none : 对象不浮动,该值为默认值。

清除浮动
当一个元素被设为浮动之后,如果没有特别指示,这个元素之后的所有内容都会围绕该元素流动。
清除图片的浮动。在CSS里可以使用clear属性来清除浮动效果,其语法代码为:

cleat : none | left | right | both

以上代码的属性值所代表的含义为:
none:不清除浮动,该值为默认值。
left : 不允许左边有浮动的元素。
right:不允许右边有浮动的元素。
both:左右两侧都不允许有浮动的元素。

溢出与剪切
当一个元素的大小无法容纳其中的内容时,就会产生溢出的情况,也就是元素中的内容已经显示在元素外面了。而剪切的作用是只显示元素中的某一部分,把其余部分都剪切掉。

溢出内容的设置
在CSS中可以通过overflow属性来处理溢出的情况,overflow属性的语法代码如下所示:

overflow : visible | hidden | scroll | auto | inherit

visible : 不剪切溢出的内容,也不添加滚动条。对于IE浏览器来说,会自动调整对象大小,以容纳其中内容,对于其他三大浏览器来说,会让溢出的内容显示在对象之外。该值为默认值。
hidden : 隐藏溢出的内容,用户将看不到溢出部分的内容。
scroll : 添加横向与纵向滚动条,用户可以通过拖滚动条来查看溢出部分的内容。
auto : 由浏览器来决定使用哪个方法处理溢出的内容,通常是在必要的时候显示滚动条。

设置水平方向超出范围的处理方式
使用overflow属性可以设置超出范围时的内容处理方式,但是一旦设置了,则对水平方向和垂直方向同时起作用。如果只需要设置其中一个方向,可以单独进行设置。使用overflow-x可以设置水平方向上的处理方式,其语法是:

overflow-x: visible / auto / hidden / scroll

在这里同样包含4个取值:
visible 表示可见,即使内容超出了范围依然完整显示。
auto则 表示自动根据情况显示滚动条。
hidden 表示裁切超出范围的内容。
srcoll 则表示显示滚动条。

设置垂直方向超出范围的处理方式
使用overflow-y可以设置当内容超出元素的范围时,在垂直方向的处理方式,其设置的语法是:

overflow-y : visible / auto / hidden / scroll

在这里同样包含4个取值:
visible表示可见,即使内容超出了范围依然完整显示。
auto则表示自动根据情况显示滚动条。
hidden表示裁切超出范围的内容。
scroll则表示显示滚动条。

内容的剪切
在CSS中可以使用clip属性来剪切对象,所谓"剪切"只是在对象划分一个矩形的区域,属于该区域中的部分则显示出来,不属于该区域的部分则隐藏。clip属性的语法代码为:

clip : auto | rect (上 右 下 左) | inherit

以上代码的属性值所代表的含义为:
auto : 不剪切。该值为默认值。
rect :根据上、右、下、左的次序划分一个区域,属于该区域内的部分则显示,不属于该区域内的部分则隐藏。rect的四个参数分别代表上、右、下、左四个边距。需要主要的是,这四个边距并不是指与上边框、右边框、下边款、左边框之间的距离,而是相对该对象的左上角坐标而言的距离。

clip属性可以作用在任何对象上,但该对象必须是使用position属性定位的对象,并且position属性值不能为static或relative。

对象的显示与隐藏

对于块状对象而言,除了可以设置溢出与剪切之外,还可以对整个块设置显示或隐藏。显示、隐藏与溢出、剪切不同,溢出与剪切所影响的只是对象的局部(当然也可以将局部扩大到全部),而显示与隐藏影响的是整个对象。在CSS中可以使用visibility(可见性)来设置对象是否可见。visibility属性的语法代码为:

visibility : visible | hidden | collapse

以上代码的属性值所代表的含义为:
visible : 对象为可见的。
hidden : 对象为不可见的。