这几天着手于CSS的研究，研究的原因主要是工作需要，最近发现如果做前端仅仅会javascript很难尽善尽美，当然懂样式和html在一定程度上可以让我们更近一步。

css较为简单，由于个人擅长编写代码，所以很少研究，偶然发现如果会做界面给自己带来的巨大好处，我开始了CSS的学习。
css三大选择器：id选择器，class选择器元素选择器，美工一般只用class选择器。所以我这里也只采用class选择器。（备注：id一般用于编程人员书写脚本，
在编程过程中尽量减少在代码通过class获取元素对象，相应的id选择器也应该尽量少的用于样式中，id的命名一般都属于编程人员分类的事）。
简单页面：

<body>
  <div id="left" class="left widhei">1</div>
  <div id="right" class="right widhei">2</div>
  <div id="down" class="down widhei">3</div>
 </body>

在布局开始时一般需要取出标签的边距，不知道为什么设计者会设计这个边框：
 body {color: #000;background: #fff;margin: 0;padding: 0;}这个可以理解为对页面的初始化
在html中默认标签布局为线性布局，从上而下，例如：

<style type="text/css">
  body {color: #000;background: #fff;margin: 0;padding: 0;}
 .left{ background:#606060;}
 .right{ background:#123456; left:70px;top:0px;}
 .down{background:#321321;left:100px;top:-40px;}
 .widhei{width:40px;height:40px}
  </style>
 </head>

 down widhei，其中样式可以叠加的功能在很大程度上减少了代码的冗余。以上的效果如下图：

  那么我们如何随心所欲的将各个div按照自己的想法进行布局呢？这里我们需要采用布局，布局有相对位置：relative，和绝对位置：absolute两种方式，
 相对布局是相对前一个div进行布局，绝对布局是对于整个body中而言，下面我们将结束一下相对布局的效果：

.right{ background:#123456; left:60px;top:10px;position:relative;}
 .down{background:#321321;left:120px;position:relative;}

 效果如下图：

  可以看出相对布局是相对于前一个元素，如果我们修改样式中的top元素将会更加明显.
 如果我们通过相对位置将所有div水平布局，那么我们只需要修改top属性：

.right{ background:#123456; left:60px;top:-40px;position:relative;}
 .down{background:#321321;left:120px;position:relative;top:-80px}

效果如图所示：

 关于绝对位置，需要改动的仅仅是position:absolute还需要将上面的top修改，在绝对位置中top和left,right等都是大于0的。（来自于个人总结）

.right{ background:#123456; left:60px;top:-20px;position:absolute;}
 .down{background:#321321;left:120px;position:absolute;top:-30px}

这种修改的结果是只能显示一个div原因在于top小于0的部分将被隐藏，效果图如：

 如果将top熟悉去掉，那么会出现什么样的效果呢，html中网页布局默认是相对布局的，也就是说结果就是后两个div的top属性是相对于div1而言,由于后
两个div被定义布局为relative所以他们的top默认为40，都是相对应div1而言的。效果如图：

 如果将top改为0那么三个div的效果与3.png一样,这就是类似于被强行放置于该位置。
最后再补充一下关于float的运用：float翻译为浮动层，不占据页面空间，很多广告都是使用的浮动层，也方便后台进行信息推送。

.left{ background:#606060;}
 .right{ background:#123456; float:left;top:0;position:absolute}
 .down{background:#321321;float:left;top:0;position:absolute}
 .widhei{width:40px;height:40px}

如果将样式修改为如上所示，将使得最后一个div覆盖前面的所有div,也可以通过left等属性将浮动层定位，那么浮动层将不受body影响。
当然要想做好一个网页界面还要改有很强的审美观，这点我是很难做到的。

 下面再写一个关于float的案例：

.left{ background:#606060;float:right;top:0;}
 .right{ background:#123456;left:0px;position:absolute}
 .down{background:#321321;left:60px;position:absolute}
 .widhei{width:40px;height:40px}

这样会看到div1显示在页面右边，其他两个div在其对应位置处。

 
关于css的学习很大程度需要实际操作，这个确实很简单，但是要做好一个看上去还行的页面并不是很容易，再此勉励

转：http://blog.163.com/wujicaiguai@126/blog/static/170171558201392201158263/

html中相对(relative)，绝对(absolute)位置以及float的学习和使用案例 （转）的更多相关文章

  1. position中多次用到了relative和absolute，能不能具体介绍一下这两者的区别？

    position中多次用到了relative和absolute,能不能具体介绍一下这两者的区别? 一个是相对定位,一个是绝对定位. absolute生成绝对定位的元素,相对于 static 定位以外的 ...

  2. 关于relative和absolute的总结

    对于定位这个性质我原理上来说自己是明白的,但是在实践的过程中,总会出现各种稀奇古怪的情况,加relative或是absolute就可以解决,但是遇到这些情况总是不明白为什么!!!难道是脑容量太小的原因 ...

  3. [转]关于position 的 static、relative、absolute、fixed、inherit

    本文转自:http://www.56770.com/faq/list/?id=410 position 有五个值:static.relative.absolute.fixed.inherit. sta ...

  4. relative、absolute和float

    relative.absolute和float   position:relative和position:absolute都可以改变元素在文档中的位置,都能激活元素的left.top.right.bo ...

  5. 细谈position属性:static、fixed、relative与absolute

    学习WEB有些时日了,对DOM中的定位概念有些模糊,特地花了一个下午的时间搜资料.整理写下这篇随笔. 首先,我们要清楚一个概念:文档流. 简单的讲,就是窗体自上而下分成一行一行,并在每行中按照从左到右 ...

  6. relative 和 absolute 定位关系

    问题: relative 和 absolute 之间的关系是什么?有什么区别? 那,答案呢? relative  相对定位, 以自己没有设置relative 属性之前的位置来定位,占用没有设置rela ...

  7. position的static、relative、absolute、fixed、inherit

    网上有很多关于position的讲解,也有很多他们属性之间的比较,但是比较全面的讲解还是比较少,每次看完过段时间就忘了,所以今天参考了很多网上现有的资源,自己整理一下,写下这篇文章. position ...

  8. position 有五个值：static、relative、absolute、fixed、inherit。

    position 有五个值:static.relative.absolute.fixed.inherit. static 是默认值.就是按正常的布局流从上到下从左到右布局,平常我们做网页时,没有指定 ...

  9. [转]Html position（static、relative、absolute、fixed）

    转自:http://blog.csdn.net/topviewers/article/details/21644305 讲解不错,转载备忘. position的四个属性值: 1.relative2.a ...

随机推荐

  1. 【其他】SAS key 获得办法【转载】

    小弟偶然得到了一个利用google得到SID的方法,经本人测试(9.4 64位)得到的SID可以用到2015年12月,从此之后再也不用改时间了.为了让更多的人看见,设定了回复可见.所有内容免费.路过的 ...

  2. jquery小效果：新浪游戏右侧导航菜单 （页面效果）

    偷盗:新浪游戏右侧导航菜单 http://games.sina.com.cn 效果: 随着页面的滚动,左侧页面的内容,和右侧的导航菜单的按钮文字对应: 点击右侧的导航按钮,左侧页面滚动到相应的内容 2 ...

  3. Spring Maven项目集成Springboot

    Maven管理的Spring项目,准备集成Springboot做接口 1.Springboot对Spring有版本要求 我用的Springboot版本:1.4.5.RELEASE,对应Spring的版 ...

  4. js处理数据库时间格式/Date(1332919782070)/

    js处理数据库时间格式 数据库返回时间格式:/Date(1332919782070)/ 方法: function ChangeDateFormat(val) { if (val != null) { ...

  5. leetcode989

    class Solution: def addToArrayForm(self, A, K): i = len(A) - 1 while i >= 0 and K > 0: A[i] += ...

  6. 用JS 和 jQery获取屏幕的高度和宽度

    用的时候,网上找了下,放在一起,方便以后查阅 document.body.clientWidth document.body.offsetWidth(包括线宽)//网页可见区域宽 document.b ...

  7. as3调用外部应用程序 as调用外部exe文件as3调用bat文件 未测试

    private function callTest(event: Event): void{callExe("d:/a.exe");callBat("d:/a.bat&q ...

  8. Unity 菜单拓展

    添加自定义菜单项 [MenuItem("test/item1 %g")] public static void haha() { Debug.Log("this is a ...

  9. TCP/IP网络协议的通俗理解，SOCKET，HTTP，SOAP

    TCP/IP,HTTP,SOAP等协议之区别   术语TCP/IP代表传输控制协议/网际协议,指的是一系列协议.“IP”代表网际协议,TCP和UDP使用该协议从一个网络传送数据包到另一个网络.把IP想 ...

  10. openwrt多wan限上下行速脚本,基于qosv4,imq模块替换成ifb模块[ZT]

    转自: http://www.right.com.cn/forum/thread-169414-1-1.html ,本人未经测试,转来自已备用 由于树莓派2装openwrt官方没有imq模块, 好像说 ...