CSS包含塊規則的示例分析

這篇文章給大家分享的是有關CSS包含塊規則的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

一、確立包含塊

包含塊是一個非常重要的概念，通常包含塊是當前元素的最近祖先元素的內容區，包含塊的形成依賴于CSS position屬性。

在我們常用的場景中，position的值有relative、absolute、fixed、static，且這四種屬性為代表，瀏覽器對于這四種屬性的包含塊確立規則如下：

根元素()所在的包含塊是一個被稱為初始包含塊的矩形。他的尺寸是視口 viewport (for continuous media) 或分頁媒體 page  media (for paged media).

二、百分比值計算規則

CSS中例如width、height、padding等屬性在設置百分比值時，瀏覽器會動態計算實際的像素值，百分比的計算基數就是該元素的包含塊對應的實際屬性值。

例如計算當前元素的百分比值的height屬性

則其值為：包含塊height值 * 當前元素height百分比值

三、包含塊原理的應用場景

自己之前一直有個誤區，認為padding、margin的百分比單位的計算基數是當前元素矩形區域寬高來算，但是根據包含塊的規則，他們的計算基數應該是包含塊的width值。

那么看看下面這個問題

之前團隊里大佬洪巖問：“如何實現一個高度是自適應寬度3倍的圖片?”

通過思考，大致有如下的實現方式，大家可以參考

實現方法1: 利用Chrome瀏覽器最新支持的aspect-ratio屬性，其問題就是C端瀏覽器兼容性不好

.box {     aspect-ratio: 1/3; // width/height 寬高比 }

aspect-ratio

實現方法2: 巧用包含塊規則(padding和width屬性百分比值的計算基數是包含塊的寬度)+ 背景圖實現

<div class="box"> 
  <div class="bg-box"></div> 
</div> 

.box {     width: 100px;     margin: 100px auto;     position: relative;     background-color: #00abef; } .bg-box {     width: 100%;     padding-top: 300%;     background-image: url('https://ww3.sinaimg.cn/large/006pGbWsly1go7xqwfjw0j30ef0fewfp.jpg');     background-repeat: no-repeat;     background-size: 100% 100%; }

效果如下圖：

感謝各位的閱讀！關于“CSS包含塊規則的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！