XHTML+CSS利用浮动与定位进行网页布局

css|xhtml|浮动|网页

最近在做一篇文档,有关xhtml与css的,看了不少资料,这里先把总结的东西写一点出来。先说的是div+css的问题,最基本的,怎样使用它们来布局。

浮动

CSS允许任何元素浮动float,不论是图像,段落还是列表。无论先前元素是什么状态,浮动后都成为块级元素。浮动元素的宽度缺省为auto。

浮动有一系列控制它的规则。
1.浮动元素的外边缘不会超过其父元素的内边缘。
2.浮动元素不会互相重叠。
3.浮动元素不会上下浮动。
4.如果一个浮动元素在另一个浮动元素之后显示,而且会超出容纳块,则它下降到低于先前任何浮动元素的位置。说简单点就是没有空间的话,就另起一行。

下面是一个例子:

<div id="main">
  <div id="box1">box1</div>
  <div id="box2">box2</div>
  <div class="clear"></div>
</div>

#main{ width:100%; }
#box1{ float:left; width:40%;}
#box2{ float:right; width:60%;}
.clear{ clear:both;}

这是一个一行两列的例子,其中clear的作用是不让浮动元素下面的元素环绕在它周围。

定位

position,我们通常用到的是绝对(absolute)和相对(relative)定位,运用这些定义,同样可以进行布局,做出上面一行两列的例子。

<div id="main">
  <div id="box1">box1</div>
  <div id="box2">box2</div>
</div> 

#main{ position:relative;width:100%;}
#box1{ position:absolute; top:0; left:0; width:40%;}
#box2{position:absolute; top:0; right:0; width:60%;}

通常,做弹出菜单的时候,我会用到定位,父元素相对定位position:relative,其中的子元素绝对定位position:absolute,通过top,right,bottom,left的值来控制子元素的位置,要注意的是子元素的位置将相对于父元素,而不是整个页面。

浮动与定位的区别

通过定位虽然也可以进行布局,但是它的特点决定了它不适合做页面的布局,因为被定义的元素在普通文档中占有的任何空间都将被关闭,可以说,它是漂浮在整个页面上面的,所以,它可以和页面上其他的内容重叠显示。

这个特点可以方便的让我们做出其他特殊的效果,但是相对与浮动就布局来说,我们更多的还是用浮动。

时间: 2024-09-28 18:23:29

XHTML+CSS利用浮动与定位进行网页布局的相关文章

CSS清除浮动和定位

1.原来在一行中的两个块,会因为浏览器窗口的大小改变而改变其原来的位置(变成多行),浏览器窗口宽度不够容纳解决方法:加个父div,并且设置宽度 .father {width:500px;height:300px;}<div class="father">   <div class="left">左</div>   <div class="right">右</div></div>

xhtml+css(网页前端工作)的绩效考核

网页制作Webjx文章简介:前端开发中的量化与细节. 前端开发方面,员工所做的工作,很难量化到细节.各项目组和人员工作的可比性不强.项目的不确定因素太多.之前曾经尝试按设计稿的大小(1024*768分辨率)为单位,在规定时间内做好指定大小的页面,给予奖励. 技术人员的考核与激励一直是我们比较头疼的问题,具体到前端开发方面,员工所做的工作,很难量化到细节.各项目组和人员工作的可比性不强.项目的不确定因素太多. xhtml+css的绩效考核 之前曾经尝试按设计稿的大小(1024*768分辨率)为单位

CSS利用图片制作网页圆角图文教程

CSS利用图片制作网页圆角图文教程 背景图定位+全局的思维,一个清晰标准的制作方法就展现在眼前.看图: 

网页标准学习:XHTML+CSS调用样式表

css|xhtml|标准|网页|样式表    web标准设计网站,过渡的方法主要是采用XHTML+CSS,css样式表是必不可少的.这就要求所有网页设计师必须熟练掌握CSS,如果你以前不常用,那么现在就开始学习吧.要制作符合web标准的网站,不懂CSS是设计不出漂亮的页面的.    事实上,所有表现的地方都需要用CSS来实现.我们以前都习惯用table来定位和布局,现在要改用DIV来定位和布局.这是思维方式的变化,一开始有些不习惯.呵呵,任何变革都会有阻力的,为了享受标准带来的"益处"

利用JavaScript和CSS制作浮动menu

css|javascript|浮动 随着INTERNET的高速发展,越来越多的人拥有了个人主页,但以往的静态HTML语言,已经不能满足人们的要求.javascript和多层模式表单(Cascading Style Sheet, CSS)的出现使网页更加生动活泼,从而可以获得令人满意的效果.本文以javascript和CSS制作一种浮动菜单的方法为例,来说明其灵活性,同时也是抛砖引玉希望和广大网友共同切磋技术,制作出更好的家页(homepage).当我们浏览一个超过屏幕显示范围的一个页面时,为了回

分页-如何利用css print media打印样式对网页进行打印处理?固定页头和页脚?要求每页都要显示

问题描述 如何利用css print media打印样式对网页进行打印处理?固定页头和页脚?要求每页都要显示 求助?如何控制打印时分页,要求对列分页和对表格数据分页,打印时不要出现滚动条?路过的大神帮帮忙啊!不胜感激.打印界面如上图所示,数据界面 解决方案 这是数据界面,点击打印按钮,弹出打印界面,并渲染打印界面 解决方案二: fixed定位,不出现滚动条设置overflow:hidden @media print{ #top#foot{position:fixed;width;100%;lef

xhtml+css网页布局是否要注意CSS书写顺序?

css|xhtml|网页 我们运用xhtml+css网页布局,实现表现与结构的分离,表现部分的css文件非常重要,也比较繁杂,我们在书写CSS文件时有很多属性和值,我们就考虑到了书写顺序的问题. 有时候是先写了margin或color,然后再写width和height等等.我们有没有必要让我们的编码更加的工整,更加的科学呢?实践证明,书写工整.按一定的规则进行书写是很有好处的. 下面是Mozilla Firefox所建议的CSS书写顺序,对我们的代码书写很有参考价值: * mozilla.org

XHTML+CSS网页制作

  xhtml+css页面制作过程中问题的解决方案,说是解决方案应该有点过了,充其量只不过是给刚刚开始学标准页面制作的朋友们的一些小建议,如果讲得不对的地方请多多包涵,当然也可以提出你们更好的方法,大家相互学习交流,共同成长! 无论是谁,在制作页面的过程都是会碰到这样或者那样的问题,出了问题就肯定要解决.解决问题的前提是要知道问题出在什么地方,对于新手来说不一定一看到问题就知道问题出在哪里.比如在IE6中"多了一只猪"的问题,对于一些问题需要更多的经验交流分享吸收后才能更好的成长. 在

css利用clearfix方法清除浮动详解

一,什么是.clearfix 你只要到Google或者Baidu随便一搜"css清除浮动",就会发现很多网站都讲到"盒子清除内部浮动时可以用到.clearfix".  代码如下 复制代码 .clearfix:after {     content: " ";     display: block;     clear: both;     height: 0; } .clearfix {     zoom: 1; } <div class=