关于页面缩进

按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。

 

转载于:https://www.cnblogs.com/Isabel4u/p/6862494.html