position替代部分float进行定位

标签: 前端开发 CSS HTML 定位 浮动 | 发表时间:2011-11-25 08:30 | 作者:祝 君
出处:http://ued.ctrip.com/blog

CSS 定位机制

CSS 有三种基本的定位机制:普通流、浮动和绝对定位。

position 属性值的含义:

static
元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。

relative
元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。

absolute
元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

fixed
元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。 (ie6秀逗了)

(以上文字纯为凑字数,来自http://www.w3school.com.cn/css/css_positioning.asp)

————————————-
为什么使用定位

1.html代码结构简单;
2.思路清晰;
3.减少reflow;

可能存在的问题

1.有人说耗性能;(没觉得,也没官方说明。)
2.经常出现bug; (因人而异。)

写代码的时候,思路是非常重要的,整理好思路,然后写代码,效率会提高很多。

相反,你看到一堆东西要写,思路不清晰,容易烦躁,写出来的东西就跟那什么什么一样,自己都看不下去,关键问题是,自己还懒的改,这就是传说中的坑。

网页制作 —> 前端重构

一个是代码上的重构,还有一个是人自己思想上的重构,
对于每个元素有自己的理解和感情。

如果千篇一律,写着一样的代码,就跟一个没感情的机器人一样,
本来前端的工作就比较枯燥,
自己再不找个乐子,那就对不起自己了。

相关 [position float] 推荐:

position替代部分float进行定位

- - 携程UED
CSS 有三种基本的定位机制:普通流、浮动和绝对定位. position 属性值的含义:. 块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中. 元素仍保持其未定位前的形状,它原本所占的空间仍保留. 元素框从文档流完全删除,并相对于其包含块定位. 包含块可能是文档中的另一个元素或者是初始包含块.

CSS之Position详解

- - CSDN博客Web前端推荐文章
CSS之Position详解. CSS的很多其他属性大多容易理解,比如字体,文本,背景等. 有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍,而偏偏忽略了对一些难缠的属性讲解,有避重就轻的嫌疑. CSS中主要难以理解的属性包括盒型结构,以及定位. 正如positioniseverything,本文将主要讲述关于position的理解,力求让您看完本文后对position有着最全面的认识.

经验分享:CSS浮动(float,clear)通俗讲解

- - 博客园_首页
       很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程.        前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家.        由于CSS内容比较多,小菜没有精力从头到尾讲一遍,只能有针对性的讲解.        如果读者理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以帮助你.