关于页面缩进

按F12去呈现源码的时候,有的页面的排版会乱掉,有的却能往一边缩进,排版仍然整齐。

做了几个试验,得出的结果是,无论是用left还是margin-left,absolute还是relative,关键是用百分数(%)设间距,而不是具体的px。还有一种就是设为页面居中,则F12出现时,排版不会乱掉。

设为中间的办法,水平居中的text-align:center(只针对字体) 和 margin:0 auto。

垂直居中的line-height。

还有万能的position大法

 首先给父元素写上positon:relative,这么做是为了给子元素打上position:absolute的时候不会被定位到外太空去。接下去,写上子元素的height和width,这个似乎是必须的(有时候不用也ok)
,某些浏览器在解析的时候如果没有这2个值的话会出现意想不到的错位。接着就是整个方法的核心,给子元素再打上top:50%;left:50%以及margin-top:一半的height值的的负数;
margin- left:一半的weight值的负数。整理一下之后,可能你会给你的子元素写上这样的css(当然,父元素也要先写上width和height)
{width:100px;height:80px;position:absolute;top:50%;left:50%;margin-left:50px;margin-top:40px}
 使用这个方法的好处在于无论你是什么形式的内容都可以马上居中,而缺点就是必须对元素有确定的宽高值。
 
还有一种是,如div里包含有几个img,则把每个img和div的宽高都设上,margin-left和margin-right都设为auto。
 
posted @ 2017-05-16 17:32  VielenDank  阅读(213)  评论(0编辑  收藏  举报