这一章的学习,可以掌握通过块级元素的配置实现网页上面的内容居中,居左,居右显示。

整个网页居中,我们可以用一个div元素做配置,配合width、margin使用,margin的属性值为auto。块级元素的居左和居右,我们可以通过配置浮动来达到效果。在学会应用浮动之前,要明白浏览器对网页进行渲染的处理方式。通常默认的是正常流动,即按照元素在网页源代码中出现的顺序显示元素。那我们还可以利用嵌套块级元素来实现嵌套布局。正常流动,那么我们可以通过对div的位置的改变,做出嵌套样式。a4c26d1e5885305701be709a3d33442f.png

在如图的效果中,我们为导航栏做了左侧的浮动,并利用嵌套和浮动的综合应用,做出了双栏布局。

双栏布局时注意的有:右栏内容的margin-left的取值很重要,一定要大于左侧浮动导航的宽度。因为浮动是排除在正常流动之外的,所以我们需要清除浮动来更好的控制我们的布局。除了用clear,overflow也可以达到清除的效果。clear的属性值取决于要清除的类型,overflow的属性值取auto,并要配合width使用。

关于浮动和元素位置控制的知识点:

float:right在右侧浮动;

float:left在左侧浮动。在设置浮动的时候有几点是需要注意的:只有块级元素能够配置成浮动:我们在书中所学的div、段落,图片、块引用元素。图片设置浮动的时候,已经有了一个隐含的宽度,否则我们要为其他的浮动元素指定宽度。

除了正常流动的处理方式外,我们还可以利用对元素位置的更多控制来进行页面布局。例如相对定位、绝对定位、浮动。

相对定位(relative)和绝对定位(absolute)是position属性的两个属性值,连同left,right,top,bottom等属性使用,即可实现定位。相对定位用于小幅修改某个元素的位置,绝对定位用于元素在其容器元素中的确切位置。相对定位和绝对定位都是相对于网页的上下左右来定位的,那么当我们给他们的上下左右赋值的时候一定要注意数据的大小。在绝对定位的时候,他的像素赋值要根据网页的实际尺寸,按照自己的需求来设置。

我们通常使用的是float来设置浮动, margin,border属性,margin是配置图片和文本的距离。浮动元素配置成功,是排除在正常流动之外的。因为浮动,也可能导致整页面的不美观,所以我们需要清除浮动来更好的控制我们的布局。除了用clear,overflow也可以达到清除的效果。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐