当前位置: 网站建设 > 网页设计 > 建站经验 >

CSS绝对定位和浮动的分栏布局

时间:2013-03-02 03:46来源:未知 作者:admin 点击:

标签:CSS绝对定位和浮动的分栏布局 Tag(145)布局(72)定位(32)分栏(1)绝对(9)浮动(33)CSS(655)
Tag:CSS 绝对定位 浮动 CSS 绝对定位 浮动 相对定位或浮动都可能用来实现分栏后果。二者可以独破应用,也能够联合在一起,相辅相成。 绝对定位的上风在于,我们可以丝绝不差地准确把持任何元素的位置这里面没有什么需要猜想或者福气的成分, CSS给图片加边框
CSS绝对定位和浮动的分栏布局》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302334452013.htm
Tag:CSS   绝对定位   浮动   CSS   绝对定位   浮动  

相对定位或浮动都可能用来实现分栏后果。二者可以独破应用,也能够联合在一起,相辅相成。

绝对定位的上风在于,我们可以丝绝不差地准确把持任何元素的位置—这里面没有什么需要猜想或者福气的成分,CSS给图片加边框。因为利用了绝对定位的元素被不留痕迹地从常规文档流中完全移除,所以它也不会为其余元素带来任何的影响。

2、设定A、B、C的宽度,将A、B、C分辨向左浮动

幸好,在绝对定位模型中有个极为有用的特征,那就是:若某个绝对定位元素的容器也被定位过,那么该元素指定的top和left值将不会基于文档的根元素HTML(也就是阅读器窗口的左上角)计算,而是会基于其容器的左上角盘算这个偏移量。换句话说,CSS纯英文数字自动换行,也就是:被定位过的容器将表演其中所有元素绝对定位起始点的角色。

1、绝对定位

2、浮动

CSS实现分栏布局第一种方法是使用四种CSS定位选项(absolute 、static、relative和fixed)中的绝对定位(absolute positioning),它可以将文档中的某个元素从其底本位置上移除,并从新定位在盼望的任何地点之上。第二种则是使用CSS中的浮动(float)概念。

--> [网站建设之]CSS绝对定位和浮动的分栏布局

这时候,再用绝对定位布局就行不通了,因为绝对定位的元素会从文档流中完整移除,这时,页脚会紧挨着页头,显示在页头的下方,css类库收藏

这是一个三栏的布局,并且是居中显示的。其中,A栏是主体内容栏,B栏和C栏都是侧边栏。首先,我们不可能直接用绝对定位将A、B、C三栏定位到居中的位置,由于每个人显示器的分辩率是不同的,在1024X768分辨率的显示器上定位的居中效果,在别的辨别率的显示器上看到的效果确定不会是居中显示的,那么,CSS简写指南,该如何解决这个问题呢?

3、给页脚设置clear属性

所以,应用这个特性,我们给A、B、C栏的外部加上一个容器D,如下图:

但是,我们常用的布局并不这么简单,除了三栏之外,我们还需要一个页头和一个页脚,CSS简写总结,如下图:

浮动的语法固然简单,但却不那么轻易控制,下面让我们举例解释如何用浮动来进行布局。同样,我们要实现一个带页脚的三栏布局。如下图:

1、设定E的宽度,让E居中

然后,我们让容器D居中,并给它加上一个属性:position:relative,这样,再用绝对定位定位A、B、C的top和left值,CSS笔记-除了a标签外的hover属性的应用,A、B、C的位置就会基于容器D的左上角的位置来计算了,这样就可以实现我们冀望的三栏居中的效果了。

 ,CSS突破局限 制作框列表效果;如何用浮动实现这样的效果呢?实在很简单:

假如咱们必定要采取绝对定位的话,那么必需预先晓得这三栏中每一栏的高度,而后再依据其中最高的一栏定位页脚。若是任意一栏中的文本长度无奈断定的话,除了使用JavaScript,我们也只能废弃绝对定位的动机,转而投入到浮动布局的怀抱。

浮动的本意是要将插入到文章中的图片向左或者向右浮动,CSS相对定于与绝对定位的区别,使图片下方的文字主动围绕在它的四周,使图片的左边或者右边不会呈现一大块的留白。

须要阐明的是,浮动布局仍然遵守惯例文档流,css的语法,所以与绝对定位比拟,CSS的背景图像属性background,浮动定位时HTML源文件中元素申明的地位显得分外主要。 当然,解决这个问题的最简略的方法就是在源文件中交换左栏跟右栏的声明顺序,也有办法不必交流各栏的次序也可以实现同样的布局,然而,这就要用到一种比拟艰涩的使用负边距值的方式。个别情形下,人们十有八九会抉择交换源文件中左中两栏的声明顺序。

那么让我们试一试用绝对定位如何实现下面的布局。


(责任编辑:网站建设)
CSS绝对定位和浮动的分栏布局相关文章
上一篇:CSS给图片加边框 下一篇:CSS编辑器:TopStyle Pro使用技巧
回到顶部