字節(jié)前端都知道的CSS包含塊規(guī)則
你是否曾對(duì)CSS中的百分比單位非常疑惑?是否簡(jiǎn)單認(rèn)為百分比的基準(zhǔn)值就是所在元素的寬高?本文將從包含塊角度幫助大家理解記憶百分比單位的計(jì)算規(guī)則，便于巧妙運(yùn)用包含塊規(guī)則解決實(shí)際開(kāi)發(fā)中的布局問(wèn)題!
一、確立包含塊
包含塊是一個(gè)非常重要的概念，通常包含塊是當(dāng)前元素的最近祖先元素的內(nèi)容區(qū)，包含塊的形成依賴于CSS position屬性。
在我們常用的場(chǎng)景中，position的值有relative、absolute、fixed、static，且這四種屬性為代表，瀏覽器對(duì)于這四種屬性的包含塊確立規(guī)則如下：
根元素()所在的包含塊是一個(gè)被稱為初始包含塊的矩形。他的尺寸是視口 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%;
- }
效果如下圖：
1比3的實(shí)現(xiàn)
CodePen地址: https://codepen.io/DYBOY/pen/JjbZgeE
四、總結(jié)熟記包含塊規(guī)則，有利于在實(shí)際開(kāi)發(fā)中解決一些“小塊”的布局問(wèn)題。
