如何在css中使用位置属性?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
<强>
<强>静态
元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
<强>相对
元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
<强>绝对
元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
<强>固定
元素框的表现类似于将位置设置为绝对不过其包含块是视窗本身。
事实上默认的静态和固定这两种情况是比较容易辨别的,而容易混淆的是相对和绝对的。
用更简单的说法就是绝对是将原本在文档流中所占的位置去掉,并以第一个非静态的定位的父元素进行定位,一般这样我们都会用,左等来控制位置,这就是绝对定位。
而相对这种定位方式则是,在原有的文档流位置(也就是未设置位置属性的时候的位置)基础上移动。
所以当我们一般需要让某些元素随父元素移动而不会因为浏览器窗口大小变动而变形时,一般我们会把父元素定义为相对的,而子元素定义为绝对的,也就是说绝对是以第一个非静态的定位的父元素作为参考对象。
而一般我们会让内容居中,让保证金:0汽车;就好了。
至于顶部和margin-top的区别,有些人可能分不清什么时候用,经常会用margin-top来实现定位,事实上这种做法是错误的,保证金它是外边距,是占内容的,往往用这个来勉强实现定位都会使其他元素位置改变或导致其他效果,而这个效果并非我们想要的。
所以要认清绝对和相对的区别和用法,加上左上右底部来定位就可以减少错误了。
顺带一提,CSS3之后多了挺多新属性的,自己还没一个个看,暂时记一下,background-size:封面;这个是本身就有还是后来才有的?我用DW8的时候并没有这个属性提示;
另外CSS3有很多属性即是不能支持的,即使有那也甚是9至10以上才能兼容,所以在写的时候要注意浏览器的判断,根据不同浏览器设计不同的样式
& lt; !——(如果! IE)祝辞& lt; !——比;除IE外都可识别& lt;——& lt; ! [endif]——在
& lt; !——(如果IE)比;所有的IE可识别& lt; ! [endif]——在
& lt; !——(如果IE 6)比;仅IE6可识别& lt; ! [endif]——在
& lt; !——(如果lt IE 6)比;IE6以及IE6以下版本可识别& lt; ! [endif]——在
& lt; !——(如果gte IE 6)比;IE6以及IE6以上版本可识别& lt; ! [endif]——在
& lt; !——(如果IE 7)比;仅IE7可识别& lt; ! [endif]——在
& lt; !——(如果lt IE 7)比;IE7以及IE7以下版本可识别& lt; ! [endif]——在
& lt; !——(如果gte IE 7)比;IE7以及IE7以上版本可识别& lt; ! [endif]——在
& lt; !——(如果IE 8)比;仅IE8可识别& lt; ! [endif]——在
& lt; !——(如果IE 9)比;仅IE9可识别& lt; ! [endif]——在
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注行业资讯频道,感谢您对的支持。
