html居中为什么不能重叠

一、首先是一个盒子的垂直水平居中：

*{

margin:0

padding: 0

box-sizing: border-box

}

.parent{

border:1px solid red

width:100%

height: 300px

font-size: 16px

text-align: center

}

.box{

border: 1px solid black

display: inline

padding-left:100px

padding-bottom:80px

line-height: 220px

}

这里设置了display:inline出现了几个问题：

1.长宽高不能设置了，margin-top/bottom不能设置

解决办法：将盒子设置会border-box,用padding来撑开

2.元素的高度是跟随这当前元素的font-size来变化的

解决办法：每个元素设置一个font-size(这样有一点冗余)

3.line-height：父元素的高度这样设置会出现偏移

解决办法：line-height的值 = 父元素的高度 - padding-bottom的值

一个盒子居中了，那么两个怎么弄呢，并且他们相隔的距离要一样的

1.一开始我的思路使用margin-left:百分比的方法，但是他这百分比不会随着父元素的大小变化而变化。

2.然后我换了一种思路：用rem来动态设置距离的值

首先通过JS代码设置根元素的font-size大小

然后再设置盒子的margin-left的值

JS代码：

var rootSize = document.querySelector("body").clientWidth / 7.5

document.querySelector("html").style.fontSize = rootSize + "px"

css代码：

.parent{

border:1px solid red

width:100%

height: 300px

font-size: 16px

}

.box{

font-size: 16px

border: 1px solid black

display: inline

padding-left:100px

padding-bottom:80px

margin-left: 2rem

line-height: 220px

}

只要根据盒子的数量来调整margin-left的大小就可以了。

这里设置了根元素html的font-size值后出现了一个问题：就是

原因：因为这些值是根据当前元素的font-size来设置的，所以只要把父元素的font-size设置为浏览器的默认值就可以了。

多个img叠加用css样式控制即可：

如果是背景的话，background 属性可以指定多个图片。

示例如下：

background: url("haoroomsCSS1_s.jpg") 0 0 no-repeat,

url("haoroomsCSS2_s.jpg") 200px 0 no-repeat

就同时指定了两个图片，两个图片的位置可以通过后面的 位置参数调整。

如果是img元素，可以通过给img指定绝对定位的样式，通过绝对定位让两个img按照

要求的方式重叠。

比如：

img#id1 {position:absolutetop:0left:0width:100%display:block}

mg#id2 {position:absolutetop:20pxleft:0width:100%display:block}

如果要使用绝对定位，img的父元素的样式需要加上 position:relative

---