家有沒有對 CSS 中的百分比是如何工作的感興趣?有沒有想過,為什么它有時會亂七八糟,沒啥頭緒?反正我是有,所以今天分享這篇文章,對自己來說是加深理解,同時也希望對大家有所幫助。
作為百分比,顯然應該有一個目標作為參考源,這個參考一般是父元素。這是正確的,但并不涵蓋所有情況。最正確的答案應該是包含塊(containing block),即包含我們元素的塊且它不必是直接的父元素。
看看下面的例子:
代碼:
<div class="grandparent">
<div class="parent">
<div class="child"></div>
</div>
</div>
.grandparent {
position: relative;
width: 200px;
height: 200px;
background: #eaeaea;
}
.parent {
width: 100px;
height: 100px;
background: #aaa;
}
.child {
position: absolute;
width: 50%;
height: 50%;
top: 25%;
left: 25%;
background: red;
}
在上面的例子中,我創建了 3 個嵌套 div,它們是具有以下特征的3個正方形
如果百分比單位以父級為來源,則子級的大小應該是它的 1/2,但上面的不是,子級的大小實際上等于父級,也就是祖父級的 1/2。原因是祖父級 div 是子級 div 的真正包含塊,因為子級具有 position: absolute ,對應于在祖父級中設置的 position:relative 。
因此,為了確定哪個是元素的實際包含塊,它完全基于元素本身的 position 屬性。
但是,對于某些屬性,百分比單元的引用源既不是父塊也不是包含塊,而是它本身—— 自身元素。
如上面的例子中看到的,當一個元素為其寬度分配一個百分比值時, width 是基于包含塊的width, height 是基于包含塊的 height。
對于 padding,垂直(padding-top/padding-bottom)或水平(padding-left/padding-right)都是基于包含塊的 wdith 來計算。
來個例子:
<div class="parent">
<div class="child"></div>
</div>
.parent {
background: #eaeaea;
width: 300px;
height: 200px;
}
.child {
display: inline-block;
background: red;
padding-top: 50%;
padding-left: 50%;
}
.parent {
position: relative;
}
線上地址:https://codepen.io/khangnd/pen/powbjEL
在這個例子中:
最后的結果是,子元素的大小相當于父級元素 1/2寬度,也就是一個 3x3 的正方形。
與 padding,margin 的百分比(垂直和水平)也是相對于包含塊的寬度來計算。
來個事例:
<div class="parent">
<div class="child"></div>
</div>
.parent {
background: #eaeaea;
width: 300px;
height: 200px;
}
.child {
display: inline-block;
background: red;
width: 50px;
height: 50px;
margin-top: 50%;
margin-left: 50%;
}
在這個例子中:
其結果是,子元素被定位在離父級元素的上邊距和左邊距3個單位的地方(父級寬度的1/2)。
top、bottom基于包含塊的height來計算,left、right 基于包含塊的width來計算。
來個例子:
<div class="parent">
<div class="child"></div>
</div>
.parent {
position: relative;
background: #eaeaea;
width: 300px;
height: 200px;
}
.child {
position: absolute;
background: red;
width: 16.67%;
height: 25%;
top: 50%;
left: 50%;
}
在這個事例中:
最終結果,子 div 被定位在離父 div 的頂部邊緣 2個單位的位置(父 div 高度的 1/2),并被定位在離父 div 的左側邊緣 3 個單位的位置(父 div 寬度的 1/2)。
一個用于動畫/過渡的不可思議的屬性,它也支持百分比值。然而,這個屬性并不指其包含的塊,而是指其自身。
來個例子:
<div class="parent">
<div class="child"></div>
</div>
.parent {
background: #eaeaea;
width: 300px;
height: 200px;
}
.child {
background: red;
width: 100px;
height: 50px;
transform: translate(50%, 50%);
}
在這個事例中:
最后結果,子 div 被定位在離父 div 的頂部邊緣 0.5 個單位的位置(自身高度的 1/2),并被定位在離父 div 的左側邊緣 1 個單位的位置(自身寬度的 1/2)。
background-size 屬性將百分比單元的復雜性提升到一個新的水平
此屬性的百分比值指的是背景定位區域,類似于包含塊,但添加了以下 3 個因素:
這三個值是由 background-origin 給出,具體看 MDN :https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-origin
來個例子:
<div class="parent">
<div class="child"></div>
</div>
.parent {
background: #eaeaea;
width: 300px;
height: 200px;
}
.child {
background-image: url(https://d2fltix0v2e0sb.cloudfront.net/dev-rainbow.png);
background-size: 50% 50%;
background-repeat: no-repeat;
background-color: red;
width: 50%;
height: 50%;
}
在這個例子中:
其結果是,背景圖像被拉伸為 1.5 x 1 的大小。
與 background-size 類似,background-position 屬性的百分比也依賴于背景定位區域。
在這個例子中:
<div class="parent">
<div class="child"></div>
</div>
css
.parent {
background: #eaeaea;
width: 300px;
height: 200px;
}
.child {
background-image: url(https://d2fltix0v2e0sb.cloudfront.net/dev-rainbow.png);
background-size: 50% 50%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-color: red;
width: 50%;
height: 50%;
}
在本例中,使用了與前面相同的圖像和布局。當我們改變background-position的值時,可以看到一些變化:
注意:background-position: 0 50% 是下面的縮寫
顯然,這個屬性的百分比背后有一些計算,而不僅僅是圖像的頂部和左側邊緣與孩子的距離。通過一些研究和測試,似乎 background-position 屬性在產生一個實際值之前依賴于以下計算。
offset X=(容器的寬度-圖像的寬度) * background-position-x offset Y=(容器的高度-圖像的高度) * background-position-y
在這種情況下:
對于 font-size ,百分比值僅指向它的直接父塊。
來個例子:
<div class="grandparent">
font-size: 13px
<div class="parent">
font-size: 26px
<div class="child">font-size: 50%
</div>
</div>
在這個例子中,我使用與第一個例子相同的布局,字體大小分配如下。
我們可以清楚地看到,child 的字體大小現在與 grandparent 一樣,是 parent 的1/2。
線上地址:https://codepen.io/khangnd/pen/MWoeXMO
~~ 完,最近一個禮拜都在趕項目,基本都要2點后才能睡,這篇文章是間斷整理好的,現在時間 是 9/20 深夜3點,睡了,感謝大家的觀看。
作者:Khang 譯者:前端小智 來源:dev 原文:https://dev.to/khgnd/understanding-css-percentage-44gd
際開發中,喜歡用百分比但是發現自己對百分比掌握的不夠,經常會出現一些出乎意料的效果,今天整理了CSS中有關百分比單位知識,如果對你有幫助的話請多多支持下小編哈!
效果:
要想理解百分比這樣的相對單位,首先要做的事就是找到某個元素的參照物,比如絕對定位的位置參照是已有定位(相對于 static 定位以外的第一個父元素進行定位),下面我們通過參考物的分類來詳細說明css中的百分比應用。
1.相對于參考物寬度的:A.[max/min-]widthB.paddingC.marginD.left(有定位情況)E.right(有定位情況)
效果:
寫這個例子的時候突然想試試border能不能用百分比,意料之中,不行。這里的.son元素的參考物是.parent1,而不是離她最近的.parent2。
到響應式css框架,你會想到哪些? bootstrap,pure.css ? 下面推薦的這塊比較特別,它的柵格系統是基于100%來構建的,類似于bootstrap的100%格子系統。
One% CSS Grid 是一款用來構建響應式排版的12列流暢的網格系統,支持1280px和1024px兩種寬度的選項,采用基于百分比的網格系統來完美適配各種屏幕。
One% CSS Grid是一款基于百分比的CSS響應式框架,這意味著布局的列尺寸控制是按照百分比來計算的,這一點大大方便了響應式設計。
如何使用:
One% CSS Grid有兩種模式,一個是基于1200px寬度來計算的,而另一個則是按照1000px寬度來計算。這是兩種不同的布局風格,前者是針對寬版的設計,而后者則是類似于960px的窄版設計。當我們開始設計網站時,首先就要確定自己使用的是哪一種設計風格。但不管使用哪一種設計,整個網頁將被劃分為N行12列。
One% CSS Grid主要依賴于CSS2當中的規范,但需要CSS3中的media query來針對不同的屏幕尺寸,因此在IE7、IE8當中需要額外配用JavaScript腳本;當然,IE6就不要想了。
官方網站:http://onepcssgrid.mattimling.com
-----
另外切圖網改版了,更精致,支持響應式。基于切圖網內部css柵格框架,不久后框架即將開源,敬請期待。 預覽:http://qietu.com/
*請認真填寫需求信息,我們會在24小時內與您取得聯系。