css 布局之定位 相對/絕對/成比例縮放

標籤：根據   基礎上   bsp   使用方法   隱藏   hid   tom   效果   height   

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

歡迎一起討論！

 

css 布局之定位 相對/絕對/成比例縮放