css數值 百分比 負值

2021-10-11 16:22:01 字數 2787 閱讀 4594

今天為什麼要給大家講解這個東西呢，因為css這部分，尤其是數值這部分感覺非常簡單，但是尤其是簡單的，卻很多人根本就沒有弄懂。所以今天就來講一下css的數值問題吧。大家還是好好聽一下吧。

當元素的height、width設定為百分比時，分別基於包含它的塊級物件的高度、寬度。這個是常規百分比的含義。

注意這裡


我是分割線


.container


.inner


.divider
假設乙個塊級容器，寬 500px，高 300px，塊級子元素定義 margin:10% 5%;，你覺得 margin 的 top, right, bottom, left 計算值最終是多少？

我們來實際看一下

注意這裡


我是分割線


.container


.inner


.divider
結果出來了，50px 50px 50px 50px，並不是50px 30px 50px 30px

為什麼

css權威指南中的解釋：

我們認為，正常流中的大多數元素都會足夠高以包含其後代元素（包括外邊距），如果乙個元素的上下外邊距是父元素的height的百分數，就可能導致乙個無限迴圈，父元素的height會增加，以適應後代元素上下外邊距的增加，而相應的，上下外邊距因為父元素height的增加也會增加。

margin 的百分比值參照其包含塊的寬度進行計算。

當書寫模式變成縱向的時候，其參照將會變成包含塊的高度。我們改變一下上面例子中的 css 書寫模式：

.container
這時的結果為：30px 30px 30px 30px

也就是說書寫模式影響 margin 百分比的參照物件。

同上 î

舉個例子看看效果。注意，這是縱向排列的例子。

注意這裡

我是分割線

同上乙個例子相比， 左側元素佔位區域並沒有擴大，僅僅是由於margin 改為padding 導致背景區域擴大而已。

因此，padding的百分比不是相對於自身，而是當書寫模式為預設橫向排列時，相對最近父元素的寬度，書寫模式為writing-mode: vertical-lr; 縱向排列時，百分比相對于父元素高度

單用乙個很簡單，但如果聯合，可能就會有問題了。這裡我不禁要問一句：

兄弟，你聽過盒模型麼？

現在，我們來看個栗子，其中內部元素width設為100%， padding設為10%

注意這裡


我是分割線


.container


.inner


.divider


.text
在標準盒模型下，width: 100%; padding: 10% 10%; 會導致內部元素溢位，如果遇到這種情況，一般都會使用怪異盒模型，即設定box-sizing: border-box，這時候width的值是會包含padding的距離的。你可以自己開啟控制台試試，這裡就不舉例了。

還是看圖說話



.container


.inner
可以很明顯的看出，left相對于父元素寬度，top相對于父元素高度。同理可推出right相對于父元素寬度，bottom相對于父元素高度。

在translate 函式當中使用百分比是以該元素自身的寬高作為基準。

當子元素的width和height未知時，無法通過設定margin-left:-width/2和margin-top:-height/2來實現，這時候可以設定子元素的transform: translate(-50%,-50%)。



.container


.inner
translate 屬性和絕對定位、相對定位屬性加上 top、left 數值都可以使元素產生位移，但存在細微差別，表現在offsetleft 和 offsettop 屬性。

使用絕對定位、相對定位屬性加上 top、left ，會影響offsettop和 offsetleft 的值；

使用 translate 的offsettop和 offsetleft 與沒有產生位移的元素沒有區別，即無論translate 的值為多少，offsettop和 offsetleft 的值都是固定不變的。

margin-left,margin-right為負值

裡層的元素設定了margin-right:-100px


.container


.inner
裡層的元素設定了margin-left:-100px

.inner
裡層的元素設定了margin-left:-100px

margin-top為負值，不管是否設定高度，都不會增加高度，而是會產生向上的位移

.inner
裡層的元素設定了margin-top:-100px

margin-bottom為負值的時候不會位移,而是會減少自身供css讀取的高度.

裡層的元素設定了margin-bottom:-100px


這裡是下乙個元素


.inner
裡層的元素設定了margin-bottom:-100px

這裡是下乙個元素

## padding 為負值

很遺憾，padding不允許指定為負，指定了也無效～

css百分比定位和百分比尺寸

只有設定了定位的 relative,absolute,fixed 的元素才有left,top等屬性。子元素relative定位 百分比定位和百分比尺寸都是相對于父元素，無論父元素有沒有定位 子元素absolute定位 百分比定位和百分比尺寸都是相對於最近的定位了的祖先元素，如果沒有則相對於視窗。可以...

CSS百分比布局

曾經的 布局可能大家都有點陌生了吧，其實我也是基本上沒用過，自從web2.0的興起，重構的思想，這讓 布局就這樣消失了基本上，布局中有用到百分比布局的，在 布局 落下帷幕之後，基本上我們都是讓網頁固定為950 1000px，如果布局使用了百分比寬度 如90 耳邊很快就能聽到抱怨 我的顯示器上效果不太...

CSS百分比單位總結

css中的很多地方都是可以使用百分比單位的，之前一直理所當然的認為百分比就是相對於容器的寬高設定的，後來在自己實現垂直居中的多種寫法時，才意識到這個問題，遂收集資料進行整理。相對於容器的寬度的 相對於content box寬度 width max width min width margin pad...