Margin和Padding值設定成百分數的佈局
Margin和Padding是我們在網頁設計經常使用到的CSS樣式,他們分別是間距和填充,一個作用於盒子外面,一個作用於盒子裡面,預設的情況下,這些屬性的值都會被計算在盒子的面積裡面,在網頁開發中的流體佈局或者是響應式佈局中,經常將Margin和Padding設定成百分數,那麼到底這個百分數是多少,他是如何計算的呢?
Margin
假設我們有這樣的一段HTML程式碼,外面一個DIV寬度980px,高度500px,裡面有一個子元素DIV,寬度和高度都不設定,然後給他設定margin:10% 5%
,這個屬性相當於margin:10%
5% 10% 5%
。
HTML程式碼
<div class="demo1"> <div>這個div設定:margin:10% 5%</div> </div>
CSS程式碼
.demo1{ height:500px; width:980px; margin:0 auto; background:#EEE; overflow:hidden;} .demo1 div{margin:10% 5%; background:#666;}
為了方便檢視效果,我們還分別為他們設定了不同的背景。
這裡還出現了一個小的hack,就是demo1盒子不會緊挨著body,也就是不會定格佈局,而且body元素上面還有一段空白,這段空白的高度剛好是.demo1 div元素的margin-top,demo1和.demo1 div元素都是頂格對其的,只要給demo1元素設定overflow:hidden,即可解決這個問題,點選這裡
我們根據以往的理解,.demo1 div
的margin
應該是:50px
49px 50px 49px
,但是執行以後,通過檢視盒模型示意圖,卻發現是:98px 49px 98px 49px
,這是怎麼回事呢
這個98px
是如何得到的呢,其實就是寬度的10%,等等,我們設定TOP為10%,不是應該參考元素的高度麼,不信你可以點選這個示例頁面看看效果。
總結
從上面的示例和程式碼,我們可以發現當margin
設定成百分數的時候,其top
right bottom left
的值是參照父元素盒子的寬度進行計算,在w3c的規範中也是這樣描述的: margin
的百分比值參照其包含塊的寬度進行計算,同樣的padding如果設定成百分數的話,其盒子模型和margin是一樣的。
這隻發生在預設的 writing-mode: horizontal-tb;
和 direction:
ltr;
的情況下,當書寫模式變成縱向的時候,其參照將會變成包含塊的高度。
為什麼要選擇寬度做參照而不是高度呢?
這其實更多的要從CSS設計意圖上去想,因為CSS的基礎需求是排版,而通常我們所見的橫排文字,其水平寬度一定(仔細回想一下,如果沒有顯式的定義寬度 或者強制一行顯示,都會遇到邊界換行,而不是水平延展),垂直方向可以無限延展。但當書寫模式為縱向時,其參照就變成了高度而不再是寬度了。
相關推薦
淺談Margin和Padding值設定成百分數的佈局
之前一直有一個誤區,以為margin和Padding在取百分比的時候,以為margin是父盒子的寬度,padding是自身的寬度百分比,實際是有誤區的 Margin和Padding是我們在網頁設計經常使用到的CSS樣式,他們分別是間距和填充,一個作用於盒子外面,一個作用
Margin和Padding值設定成百分數的佈局
Margin和Padding是我們在網頁設計經常使用到的CSS樣式,他們分別是間距和填充,一個作用於盒子外面,一個作用於盒子裡面,預設的情況下,這些屬性的值都會被計算在盒子的面積裡面,在網頁開發中的流體佈局或者是響應式佈局中,經常將Margin和Padding設定成百分數
margin與padding值設定為百分數時,其值的計算參照最近父級元素width
在前端開發過程中,設定樣式引數margin 與 padding 值為百分數時,其具體值的計算方法需參照最近父級的width計算。 1)exp1: margin-top 為百分數 其中標籤的巢狀關係為: <div class="boxparent">
關於IE處理margin和padding值超出父元素高度的問題
兩個div,父div有padding值,子div有margin-top值,瀏覽器在解析實際父子位置關係時,他們之間的距離是父padding+子margin-top。現在把父div設定固定高度,並有意讓父padding+子margin-top的值大於父div的高度。這時,ch
五·使用盒子定位佈局時margin和padding使用
首先說的是區別: 如圖所示,黃色padding,綠色margin,中間的content是內容,margin和padding的值是不計算在內容高寬的。這裡補充的是在實際情況中邊框寬度也是不計算在內的。這裡以border邊框為分界線說:margin是盒子
當margin和padding的值是百分比時,應該如何計算的?
對元素的margin設定百分數時,百分數是相對於父元素的width計算,不管是margin-top/margin-bottom還是margin-left/margin-right。當然,padding
android 如何動態設定View的margin和padding
1.動態設定padding,拿ImageView為例:ImageView imageView = new ImageView(this); imageView.setPadding(5,5,5,5)2.動態設定margin 拿LinearLayout裡邊放ImageVIew
為什麽css一開始需要設定margin和padding為 0px?
有一點 ros 做了 清除 adding 過多 事情 塊元素 ont 我們在寫HTML的時候,通常會在樣式裏先寫上一些像body、a、ul li等這些標簽的全局的一些樣式。之所以有這樣的習慣,主要是是因為以下幾點: 首先:瀏覽器兼容。我們做的網頁是給用戶看的,我們只負責
CSS中margin和padding的區別
ng- str 技術分享 gin es2017 alt bsp 繼承 單位 padding margin都是邊距的含義,關鍵問題得明白是什麽相對什麽的邊距.padding是控件的內容相對控件的邊緣的邊距.margin是控件邊緣相對父空間的邊距. 在CSS中margin是指從
有關於margin和padding的練習
itl tle 容器 tex -- gre set com order ---恢復內容開始--- margin指的是邊框與邊框之間的距離指的是容器外距離。padding指的是自身邊框到自身內部另一個容器邊框之間的距離指的是容器內距離。所以我進行了以下一個練習: 將
margin和padding的用法與區別--以及bug處理方式
使用 滿足 左右 ron 相互 一段 布局 方式 ont margin和padding的用法: (1)padding (margin) -left:10px; 左內 (外) 邊距(2)padding (margin) -right:10px;
我眼中的margin和padding
web padding margin 俗話說得好,一千個小怪獸裏眼裏就有一千個凹凸曼,一千個碼農眼中的padding和maigin就有一千個。對於剛入行的‘菜農’鄙人來說對於padding和margin著兩個元素來說也有一些小的見解,做一分享,歡迎探討。 1.padding和margin的自我介紹。
WPF Margin 和Padding
在介面設計時,Margin 和Padding都是對邊距進行限制的,其區別在於“一個主外,一個主內”。 Margin (邊緣)是約束控制元件與容器控制元件的邊距,設定值分別代表左上右下,使用 Margin="20" 同時指定四個值。 Padding (襯墊)是約束控制元件內
margin和padding的使用
今天學盒模型,學了兩個最重要的元素:margin和padding。 盒模型是佈局中至關重要的一個東西,基本上只要掌握了盒模型,佈局就沒有大礙。而margin和padding作為盒模型裡面極其重要的兩個元素,弄懂這兩個東西,就基本上弄懂了盒模型,也基本上具備了快速佈局的能力。
js/jQuery獲取 margin 和 padding
var px = $("#id").css("marginLeft");// px = '400px' var num = parseInt(px); var
margin和padding的區別?
(1)margin位於border之外,是容器外邊距,用來隔開元素與元素的間距,padding位於border之內,是容器內邊距,用來隔開元素與內容的間隔 (2)margin允許重疊,paddin
html5標籤為什麼會有margin和padding兩個屬性?
個人理解,html5中的每一標籤就是一個控制元件,每一個控制元件都有自己的大小,如果我們不進行設定其大小,那麼控制元件就會使用預設值。 假設說我現在有一個<input>控制元件,type型別為button,這個button控制元件會在螢幕上佔據一定的
初學前端心得:使用margin和padding要注意的事項
margin給標籤設定一個外邊距,使用有一個前提,就是必須要給盒子設有寬,不然設定了也沒有效果。 padding是給盒子設定一個內邊距,給一個盒子設定內邊距後會把盒子撐大,解決辦法:第一:把盒子寬高減少你設定相對於的內邊距的值,第二:給盒子、大小固定死
淺析Margin和Padding屬性
序 Magin:有邊緣的意思,在Android佈局中的使用方式是 android:layout_margin=“XXdp”,看到這個不免想到layout是父佈局來控制子控制元件的。 而這個margin屬性就是父控制元件來控制子控制元件的邊緣位數狀況的,俗稱“外邊距”
前端-----浮動做一個簡單的導航欄和通俗理解一下margin 和padding區別
一:浮動 (1)浮動的概念:浮動起來變成行內塊元素,並且不佔位,父級高度為0(浮動塌陷) 其解決方法是: 1丶給父級一個overflow:hiiden(overflow:hiiden:要有寬度或者高度才會溢位部分隱藏,如果外部盒子沒有寬度或者高度,裡面又是浮動元素,就會被撐開。) 2、讓