css中居右,第八章 css实现div的居中,居左,居右
这一章的学习,可以掌握通过块级元素的配置实现网页上面的内容居中,居左,居右显示。整个网页居中,我们可以用一个div元素做配置,配合width、margin使用,margin的属性值为auto。块级元素的居左和居右,我们可以通过配置浮动来达到效果。在学会应用浮动之前,要明白浏览器对网页进行渲染的处理方式。通常默认的是正常流动,即按照元素在网页源代码中出现的顺序显示元素。那我们还可以利用嵌套块级元素来
这一章的学习,可以掌握通过块级元素的配置实现网页上面的内容居中,居左,居右显示。
整个网页居中,我们可以用一个div元素做配置,配合width、margin使用,margin的属性值为auto。块级元素的居左和居右,我们可以通过配置浮动来达到效果。在学会应用浮动之前,要明白浏览器对网页进行渲染的处理方式。通常默认的是正常流动,即按照元素在网页源代码中出现的顺序显示元素。那我们还可以利用嵌套块级元素来实现嵌套布局。正常流动,那么我们可以通过对div的位置的改变,做出嵌套样式。
在如图的效果中,我们为导航栏做了左侧的浮动,并利用嵌套和浮动的综合应用,做出了双栏布局。
双栏布局时注意的有:右栏内容的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也可以达到清除的效果。
更多推荐
所有评论(0)