手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >position替代部分float进行网页元素定位
position替代部分float进行网页元素定位
摘要:CSS定位机制CSS有三种基本的定位机制:普通流、浮动和绝对定位。position属性值的含义:static元素框正常生成。块级元素生成一个...

CSS 定位机制

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

position 属性值的含义:

static

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

relative

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

absolute

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

fixed

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

为什么使用定位

1.html代码结构简单;

2.思路清晰;

3.减少reflow;

可能存在的问题

1.有人说耗性能;(没觉得,也没官方说明。)

2.经常出现bug; (因人而异。)

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

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

position替代部分float进行网页元素定位1

position替代部分float进行网页元素定位2

网页制作 —> 前端重构

一个是代码上的重构,还有一个是人自己思想上的重构,

对于每个元素有自己的理解和感情。

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

【position替代部分float进行网页元素定位】相关文章:

C#中List怎么用?List基础用法汇总

CSS教程:使用ul进行网页的多列布局

CSS设计网页头部的写法

使用css3仿造window7的开始菜单

通过position定位实现div底端对齐

利用纯CSS创建一个三角形

去除链接元素的虚线框(兼容IE7、IE6、FF)

CSS Overflow 属性

图片轮换的两边按钮的加载与控制如何通过像素定位

css样式命名规范

精品推荐
分类导航