css 布局之定位 相对/绝对/成比例缩放

给body添加 overflow: hidden; 可以将页面所有的 滚动条隐藏，但必须要给body 设置一个高度

overflow: hidden;
height:864px;

父元素必须要设置 position:relative

     必须设置 width 与 height 且不能用百分比

     父层如果是图片，要使用  background: url(bg.jpg) no-repeat;

     

子元素必须设置 position: absolute;

     必须设置 width 与 height

     定位使用 top left buttom right

     使用百分比子元素容易飞掉

 

实例：

<div class="warp">
     <img src="first.img" class="first-img" />
     <div class="sub-warp">
          <img src="sub-two.img" class="" />
          <img src="sub-three.img" class="" />
     </div>
</div>

/**结构说明
*  最外层 warp
*  sub-warp 是相对于 .first-img 绝对定位的，因此 sub-warp 必须是绝对定位且它的大小要和 .first-img 一样大小
*  子层 .sub-two  /  .sub-three  是相对于 sub-warp 进行绝对定位，值用百分比就可以，如果这里是相对定位，在某些手机上会出问题
*/

.warp {
     position:relative; /*最外层是相对定位*/
}
.warp img {
     //正常设置图片的格式就可以
}
.sub-warp {
     position:absolute;/*所有的子层都是绝对定位*/
     top:0;
     left:0;
     right:0;
     bottom:0;
}
.sub-warp img::nth-child(1){
     position:absolute;
     top:22%;
     left:5%;
}
.sub-warp img:nth-child(2){
     position:absolute;
     top:15%;
     left:22%;
}

如果子元素在父元素的一定范围内成比例缩放且居中显示，因此left:50%，需要用到一个定宽的值及一个margin-left的值与50%定位，top根据实际情况重新调整：

@media (max-width: 768px) {
     .sub-warp img:nth-child(2){
          position:absolute;
          top:15%;
          left:50%;
          width:290px;
          margin-left:-176px;
     }
}

为了解决撑破容器的问题，以前我们只能去计算div.box的宽度，用容器宽度减去padding和border的值，但有时候，我们苦于不知道元素的总宽度，比如说是自适应的布局，只知道一个百分值，但其他的值又是px之类的值，这就是难点，死卡住了。随着CSS3的出现，其中利用box-sizing来改变元素的盒模型类型实使实现效果，但今天我们学习的calc()方法更是方便，可以使用 calc()计算，calc()可以用在大尺寸在小屏幕上.

使用方法 ：

知道总宽度是100%，在这个基础上减去boder的宽度（5px * 2 = 10px）,在减去padding的宽度（10px * 2 = 20px），即"100% - (10px + 5px) * 2 = 30px" ，最终得到的值就是div.box的width值。

width: 90%;/*写给不支持calc()的浏览器*/
width:-moz-calc(100% - (10px + 5px) * 2);
width:-webkit-calc(100% - (10px + 5px) * 2);
width: calc(100% - (10px + 5px) * 2);

- 主容器的宽度是“100% - 20px * 2”,并且水平居中：

.wrapper {
  width: 1024px; /*写给不支持calc()的浏览器*/
  width: -moz-calc(100% - 40px);
  width: -webkit-calc(100% - 40px);
  width: calc(100% - 40px);
  margin: auto;
}

欢迎一起讨论！