CSS包含塊規(guī)則的示例分析

這篇文章給大家分享的是有關(guān)CSS包含塊規(guī)則的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

一、確立包含塊

包含塊是一個(gè)非常重要的概念，通常包含塊是當(dāng)前元素的最近祖先元素的內(nèi)容區(qū)，包含塊的形成依賴(lài)于CSS position屬性。

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

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

二、百分比值計(jì)算規(guī)則

CSS中例如width、height、padding等屬性在設(shè)置百分比值時(shí)，瀏覽器會(huì)動(dòng)態(tài)計(jì)算實(shí)際的像素值，百分比的計(jì)算基數(shù)就是該元素的包含塊對(duì)應(yīng)的實(shí)際屬性值。

例如計(jì)算當(dāng)前元素的百分比值的height屬性

則其值為：包含塊height值 * 當(dāng)前元素height百分比值

三、包含塊原理的應(yīng)用場(chǎng)景

自己之前一直有個(gè)誤區(qū)，認(rèn)為padding、margin的百分比單位的計(jì)算基數(shù)是當(dāng)前元素矩形區(qū)域?qū)捀邅?lái)算，但是根據(jù)包含塊的規(guī)則，他們的計(jì)算基數(shù)應(yīng)該是包含塊的width值。

那么看看下面這個(gè)問(wèn)題

之前團(tuán)隊(duì)里大佬洪巖問(wèn)：“如何實(shí)現(xiàn)一個(gè)高度是自適應(yīng)寬度3倍的圖片?”

通過(guò)思考，大致有如下的實(shí)現(xiàn)方式，大家可以參考

實(shí)現(xiàn)方法1: 利用Chrome瀏覽器最新支持的aspect-ratio屬性，其問(wèn)題就是C端瀏覽器兼容性不好

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

aspect-ratio

實(shí)現(xiàn)方法2: 巧用包含塊規(guī)則(padding和width屬性百分比值的計(jì)算基數(shù)是包含塊的寬度)+ 背景圖實(shí)現(xiàn)

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

效果如下圖：

感謝各位的閱讀！關(guān)于“CSS包含塊規(guī)則的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！