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;
}

歡迎一起討論！