吵吵   2013-03-21  阅读:2,284

从异步加载与更新技术被大量运用,到响应式设计,以及最近很流行的瀑布流,整页背景图片等等,可以看出前端开发也越来越被受到重视了,从事网站开发的朋友不知道有没有看到这样一个趋势。如果你还是单纯的认为:程序员是做程序开发的,只要做好程序开发就好,那么你就错了。由于目前整个中国的网站开发行业从业人员技能素质参差不齐,导致了企业难以招到满意的专业人才,另一方面,大量开源产品被广泛运用给一些中小企业节约了大量开发经费,以至于他们不愿意花重钱来聘请更专业的人才。因此现在我们可以看到的是很多中小企业,包括一些所谓的大企业在招聘网站开发人员时一般要求前端和后端都要熟练。

为此,我决定从近期开始发表一系列主题为“前端开必备技能”的文章,和同样对前端不是很熟悉的朋友一起来学习和重拾这些技术。希望熟悉前端开发的朋友们在阅读这些文章的时候,如果觉得写不对或者有异议,能给出宝贵的意见和建议。今天我就来和大家探讨一下CSS定位(positioning)技术。从CSS参考手册上可以很容易的看出,CSS定位语句是position,其主要有static,relative,absolute,fixed等四种方式,作用于它们的属性有z-index、top、right 、bottom、left等。下面就具体来讲一讲这四种定位方式。

css

static定位方式

使用static定位方式时,表示无特殊定位,HTML对象遵循正常文档流。top、right 、bottom、left不会被应用。position语句默认的取值就是static。对于此种定位方式,你也可以简单的理解为:这和没有定义任何定位方式的HTML文档是一样的,因此我也不在此列举实例了。

relative定位方式

relative翻译成中文就是相对的意思,那么我们就可以称此种定位为相对定位。应用相对定位时,HTML对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。这也就是说你可以通过设置以上四个属性的值,来确定HTML对象在浏览器中显示的位置。top,right,bottom,left有length(长度,可以为负值)、percentage(百分比)、auto(自动)三种属性值,默认的都是auto。relative方式定位实例如下:

.position{position:relative;right:100px;top100px;left:100px;width:200px;height:200px;
color:#fff;text-align:center}

<div class=”position”>我将出现在浏览器的左上角,请注意我与浏览器左边有顶部的距离</div>

使用relative方式定位,top,right,bottom,left的属性值为数值,当浏览器最小化时,被定位的对象的位置在浏览器中不会不发生变化。

absolute定位方式

absolute翻译成中文就是绝对的意思。使用此定位方式时,HTML对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位,而且还可以通过z-index属性来定义层叠结构。还是以一个具体的例子来说明该方式的用法,代码如下:

.absolute{position:absolute;top:50%;left:50%;width:50%;width:150px;height:40px;margin:-20px 0 0 -75px;padding:0 10px;background:#eee;line-height:2.4;}

<div class=”absolute”>对象水平垂直居中</div>

上面例子中,使用绝对定位方式,将一个div显示在浏览的正中间,由于top和left的属性值为百分比,所以当浏览器最小化时,该对象的位置会发生变化。

fixed定位方式

fixed中文有固定的意思,使用该方式定位时,HTML对象将脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动(IE6及以下不支持此参数值)。fixed定位和absolute定位基本相同,唯一的区别在于,使用fixed定位,无论top,right,bottom,left等属性的取值为数值还是百分比,当浏览器最小化时,被其定位的对象的位置不会发生变化。这里就不具体举例实例了,有兴趣的朋友可以自己去实践一下。

本文转载自:PHP学习博客 

吵吵微信朋友圈,请付款实名加入:

吵吵 吵吵

一条回应:“前端开发必备技能之CSS定位技术”

  1. 北京办证说道:

    北京办证
    北京发票
    印花税
    发票
    临沂办证
    办证
    常州办证

发表评论

电子邮件地址不会被公开。 必填项已用*标注