亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

實(shí)例講解如何使用CSS保持頁(yè)面內(nèi)容寬高比

cnblogs   發(fā)布時(shí)間：2016-02-04 11:52:38   作者：floralam   我要評(píng)論
這篇文章主要介紹了如何使用CSS保持頁(yè)面內(nèi)容寬高比的方法,作者舉了偽元素和vw單元等不同方法下的例子,需要的朋友可以參考下

需求描述：移動(dòng)端實(shí)現(xiàn)橫跨頁(yè)面半圓。（類似問(wèn)題，實(shí)現(xiàn)4x4的正方形網(wǎng)格）
201624114416211.jpg (433×305)

簡(jiǎn)化問(wèn)題，我們可以理解為實(shí)現(xiàn)一個(gè)高度和寬度比為1:2的塊。

需要解決問(wèn)題：

　　　　　　　1，高度和寬度按照一定比例。

　　　　　　　2，外容器高度和寬度不確定。

　　　　　　　3，盡量不使用圖片和腳本替代。

　　　　　　　4，兼容移動(dòng)端。

編寫html

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class = "semicircle"></div>  

　

思考一，使用height：100%，

CSS Code復(fù)制內(nèi)容到剪貼板
  1. body{   
  2.     margin:0;   
  3.     width: 100%;   
  4.     background: lightblue;   
  5. }   
  6.     
  7. .semicircle {   
  8.     width: 100%;   
  9.     height: 100%;   
  10.     border-top:5px solid #fff;   
  11.     border-radius: 100%;   
  12. }  

　　存在問(wèn)題，height的百分比是根據(jù)父容器計(jì)算的，不是當(dāng)前容器，根本滿足不了我們的需求。效果如下：
201624114439239.jpg (423×143)

父容器body的高度百分比為其子容器所填充的高度關(guān)聯(lián)，即便設(shè)置body高度100%，由于子容器即semicircle所填充的實(shí)際高度為邊界的5，無(wú)法將父容器“全部撐開”，因此無(wú)法通過(guò)設(shè)定父容器的高度為百分比指定寬高按照一定比例的容器。

思考二，設(shè)定padding-top或padding-bottom為100%
The percentage is calculated with respect to the width of the generated box's containing block [...] (source: w3.org, emphasis mine)

百分比寬度的計(jì)算與所生成盒子的包含塊寬度有關(guān)。padding-top、padding-bottom的百分比是根據(jù)父容器的width（寬度）計(jì)算的，而不是height（高度）。其他比例實(shí)現(xiàn)對(duì)照表

aspect ratio padding-bottom value
16:9 56.25%
4:3 75%
3:2 66.66%
8:5 62.5%

CSS Code復(fù)制內(nèi)容到剪貼板
  1.   
  2. body{   
  3.     margin:0;   
  4.     width: 100%;   
  5.     background: lightblue;   
  6. }   
  7.   
  8. .semicircle {   
  9.     width: 100%;   
  10.     height: 0;   
  11.   
  12.     padding-bottom: 100%;   
  13.     border-top:5px solid #fff;   
  14.     border-radius: 100%;   
  15. }  

思考三，使用vw單元
使用vw單元設(shè)定元素高度和寬度，vm的大小是通過(guò)viewport的寬度設(shè)定的，因此可以通過(guò)該方法保持容器按照一定比例顯示。一單位的vw等于百分之一的viewport寬度，即100vw等于100%viewport寬度。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. body{   
  2.     margin:0;   
  3.     width: 100%;   
  4.     background: lightblue;   
  5. }   
  6.   
  7. .semicircle {   
  8.      width: 100vw;   
  9.       height:100vw;   
  10.     border-top:5px solid #fff;   
  11.     border-radius: 100%;   
  12. }  

對(duì)照表

aspect ratio multiply width by
1:1 1
1:3 3
4:3 0.75
16:9 0.5625


思考四，使用偽元素和inline-block布局

CSS Code復(fù)制內(nèi)容到剪貼板
  1. body {   
  2.     width: 100%;   
  3.     font-size: 0;   
  4.     text-align: center;   
  5.     background: lightblue;   
  6. }   
  7. .semicircle {   
  8.     border-top:5px solid #fff;   
  9.     border-radius: 100%;   
  10. }   
  11.   
  12. .semicircle:before {   
  13.     content:"";   
  14.     display: inline-block;   
  15.     padding-bottom: 100%;   
  16. }  

雖然代碼有點(diǎn)復(fù)雜，但是靈活性強(qiáng)，可以實(shí)現(xiàn)更多類似的效果。

當(dāng)需求改成實(shí)現(xiàn)一個(gè)橫跨屏幕80%的寬度的半圓，我們只需要在.semicircle中添加屬性width:80%;，順便也把容器居中實(shí)現(xiàn)了。

該方法的原理很清晰：

參考思考一，無(wú)法通過(guò)高度100%來(lái)擴(kuò)充外容器高度，那么可以通過(guò)偽元素，插入一個(gè)高度和寬度一致的元素，將容器撐開成一比一高度的容器。注意，該方法實(shí)現(xiàn)半圓，實(shí)際需要寬高為一比一的容器，即占用空間為上述方法的兩倍。

設(shè)置:before元素邊界，解析原理：
201624114500101.jpg (423×491)

思考五，使用圖片，兼容低檔次移動(dòng)設(shè)備。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .semicircler img {   
  2.   width: 100%;   
  3.   background-repeat: no-repeat;   
  4.   background-size: 100% 100%;   
  5.   background-image: url(../img/autoresized-picture.jpg);   
  6. }  

使用腳本，css更加簡(jiǎn)潔明了，目標(biāo)清晰。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. div.style.height=div.offsetWidth+"px";  

 

對(duì)于實(shí)現(xiàn)2*2正方形網(wǎng)格
201624114515193.jpg (421×766)

CSS Code復(fù)制內(nèi)容到剪貼板
  1. *------main code-------*/   
  2.         body {   
  3.           width: 100%;   
  4.           margin:0;   
  5.           text-align: center;   
  6.         }   
  7.         div{   
  8.           display: inline-block;   
  9.           width: 50%;   
  10.           background: lightblue;   
  11.           font-size: 12px;   
  12.           position: relative;   
  13.           vertical-align: middle;   
  14.         }   
  15.   
  16.         div:before {   
  17.             content:"";   
  18.             display: inline-block;   
  19.             padding-bottom: 100%;   
  20.             vertical-align: middle;   
  21.   
  22.         }   
  23.   
  24.         /*------other code-------*/  
  25.         div:nth-child(2),div:nth-child(3){   
  26.             background: pink;   
  27.         }   
  28.   
  29.   
  30.         span {   
  31.             display: inline-block;   
  32.             vertical-align: middle;   
  33.             font-size: 6em;   
  34.             color: #fff;   
  35.         }          

       

相關(guān)文章

最新評(píng)論