dw css定位,css关于position属性的用法详解(绝对定位和相对定位的混淆)

挺久没用，有点忘了关于position这个属性的用法，导致在练手的时候又犯了跟最开始新手才会犯的错误，那就是absolute和relative的用法。

在此首先看一下官方对这两个属性值的解释：

position 属性值的含义：

static

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

relative

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

absolute

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

fixed

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

事实上默认的static和fixed这两种情况是比较容易辨别的，而容易混淆的是relative和absolute。

用更简单的说法就是absolute是将原本在文档流中所占的位置去掉，并以第一个非static定位的父元素进行定位，一般这样我们都会用top,left等来控制位置，这就是绝对定位。

而relative这种定位方式则是，在原有的文档流位置(也就是未设置POSITION属性的时候的位置)基础上移动。

所以当我们一般需要让某些元素随父元素移动而不会因为浏览器窗口大小变动而变形时，一般我们会把父元素定义为relative，而子元素定义为absolute，也就是说absolute是以第一个非static定位的父元素作为参考对象。

而一般我们会让内容居中，让margin：0 AUTO；就好了。

至于top和margin-top的区别，有些人可能分不清什么时候用，经常会用margin-top来实现定位，事实上这种做法是错误的，margin它是外边距，是占内容的，往往用这个来勉强实现定位都会使其他元素位置改变或导致其他效果，而这个效果并非我们想要的。

所以要认清absolute和relative的区别和用法，加上TOP LEFT RIGHT BOTTOM来定位就可以减少错误了。

顺带一提，CSS3之后多了挺多新属性的，自己还没一个个看，暂时记一下，background-size:cover;这个是本身就有还是后来才有的？我用DW8的时候并没有这个属性提示；

另外CSS3有很多属性IE是不能支持的，即使有那也是9甚至10以上才能兼容，所以在写的时候要注意浏览器的判断，根据不同浏览器设计不同的样式

以上这篇css关于position属性的用法详解(绝对定位和相对定位的混淆)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

dw css定位,css关于position属性的用法详解(绝对定位和相对定位的混淆)相关推荐

CSS3中font-face属性的用法详解
CSS3中font-face属性的用法详解 @font-face是CSS3中的一个模块,主要是把自定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕 ...
教程-Delphi中Spcomm使用属性及用法详解
Delphi中Spcomm使用属性及用法详解 Delphi是一种具有功能强大.简便易用和代码执行速度快等优点的可视化快速应用开发工具,它在构架企业信息系统方面发挥着越来越重要的作用,许多程序员愿意选 ...
python控制画笔尺寸,Python画笔的属性及用法详解
画笔有颜色.画线的宽度等属性. 1.turtle.pensize():设置画笔的宽度: 2.turtle.pencolor():没有参数传入返回当前画笔颜色:传入参数设置画笔颜色,可以是字符串如&qu ...
highlight.js css,JS库之Highlight.js的用法详解
下载到本地后,新建个页面测试 1.在head中加入css和js的引用 highlight hljs.initHighlightingOnLoad(); 2.添加对应要显示的内容 # 读取文件内容 de ...
CSS2中display:table属性的用法详解
想必大家都已经知道了css属性display的一些常见属性值,比如none,block,inline-block等等,今日我在看一个效果代码的时候,碰到一个之前从未使用过的属性值,就是它了,displ ...
html中auto是设置什么的,css中margin：auto什么意思？margin：auto属性的用法详解
我们都知道使用margin:auto可以让元素水平居中的.但你有没有想过使用margin:auto可以让元素水平居中的原因,要回答这个问题,我们首先需要看一下margin:auto的工作原理.auto ...
HTML中z index属性是用来,css中z-index 属性与用法详解
Z-index属性决定了一个HTML元素的层叠级别.元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言.一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部.这个层叠顺序沿着垂 ...
Spcomm使用属性及用法详解
目前,利用 Delphi实现串口通信的常用的方法有 3种:一是利用控件,如 MSCOMM控件和 SPCOMM控件:二是使用 API函数:三是调用其他串口通信程序.其中利用 API编写串口通信程序较为复 ...
Android 搜索框：SearchView 的属性和用法详解
转载请标明出处: http://blog.csdn.net/airsaid/article/details/51087226 本文出自:周游的博客 SearchView简介 SearchView属性 ...

dw css定位,css关于position属性的用法详解(绝对定位和相对定位的混淆)

dw css定位,css关于position属性的用法详解(绝对定位和相对定位的混淆)相关推荐

最新文章

热门文章