国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS：不同元素margin:auto的計算

Michael_Ding / 1303人閱讀

摘要：塊級置換元素，在文檔流中同塊級非置換元素一樣。塊級非置換元素，不在文檔流中當(dāng)這個值不是，而，則包含塊的高度定位元素高度塊級置換元素，不在文檔流中同上總結(jié)行內(nèi)級元素行內(nèi)級置換元素和非置換元素，在值為時，和的計算值都為。

關(guān)于什么元素的分類可以看我這篇文章CSS:關(guān)于元素高度與寬度的討論 系列文章（二）

行內(nèi)級元素

Inline，非置換元素:如果margin值為auto，則margin-left和margin-right的計算值也就為0

Inline,置換元素:同上

Inline-block,置換元素在文檔流中:同上

Inline-block,非置換元素在文檔流中:同上

塊級元素 塊級非置換元素，在文檔流中 
"margin-left" + "border-left-width" + "padding-left" + "width" + "padding-right" + "border-right-width" + "margin-right" = width of containing block

下面的情況下，如果margin值為auto

如果width是auto值，那么其他值是auto的值就為0

如果margin-left和margin-right的值為auto，width的值不為auto，那么就相對于包含塊水平居中。

塊級置換元素，在文檔流中

同塊級非置換元素一樣。

塊級非置換元素，不在文檔流中(Absolutely positioned, non-replaced elements) 
// 當(dāng)top/height/bottom 這3個值不是auto，而 margin:auto ，則：
margin-top=margin-bottom=（包含塊的高度 – 定位元素高度）/2
"top" + "margin-top" + "border-top-width" + "padding-top" + "height" + "padding-bottom" + "border-bottom-width" + "margin-bottom" + "bottom" = height of containing block

塊級置換元素，不在文檔流中

同上

總結(jié) 行內(nèi)級元素

行內(nèi)級置換元素和非置換元素，在margin值為auto時，margin-left和margin-auto的計算值都為0。

塊級元素

塊級置換元素和非置換元素在文檔流中:

"margin-left" + "border-left-width" + "padding-left" + "width" + "padding-right" + "border-right-width" + "margin-right" = width of containing block

如果width是auto值，那么其他值是auto的值就為0

如果margin-left和margin-right的值為auto，width的值不為auto，那么就相對于包含塊水平居中。

2.塊級置換元素和非置換元素不在文檔流中。
見上文。

The percentage is calculated with respect to the width of the generated box’s containing block. Note that this is true for margin-top and margin-bottom as well.

abs-non-replaced-height
Why does “position: absolute; left: 0; right: 0; width: XYpx; margin: 0 auto” actually center?

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/115166.html

相關(guān)文章

  • CSS那些事

    摘要：今天跟大家分享一下中一些比較重要和比較容易被忽略的東西，開始吧。當(dāng)為時，塊級元素的寬度會填滿整個包含塊。也就是說上下外邊距的值也是以父元素的寬度為標(biāo)準(zhǔn)的。 今天跟大家分享一下CSS中一些比較重要和比較容易被忽略的東西，開始吧。 樣式優(yōu)先級 當(dāng)你在不同地方不同的選擇器中對同一個元素屬性添加了不同的樣式的時候，該如何判斷最后哪個樣式會作用到元素上呢？判斷的依據(jù)就是樣式的優(yōu)先級。樣式優(yōu)先...

    LinkedME2016 評論0 收藏0

  • CSS魔法堂：Absolute Positioning就這個樣

    摘要：更多關(guān)于的信息可參考魔法堂不得不說的因此的實際值則是相對于而言，我們可以通過來獲取和的實際值。對于由于自身有固有的，因此當(dāng)設(shè)置時，其實際值就是元素固有的。結(jié)果就是除均不為，而為時，會自動計算以滿足等式。兩條不滿足外，其他情況均一致。 前言 當(dāng)我們以position:absolute之名讓元素脫離Normal flow的控制后，以為通過left和top屬性值即可讓元素得以無限的自由時，卻...

    Yangyang 評論0 收藏0

  • 《CSS世界》筆記二：盒模型四大家族

    摘要：基本上，等高布局只能滿足欄的情況，除非正好是等比例的，那還可以使用實現(xiàn)最多欄布局上一篇世界筆記一流元素尺寸下一篇世界筆記三內(nèi)聯(lián)元素與對齊 上一篇：《CSS世界》筆記一：流/元素/尺寸下一篇：《CSS世界》筆記三：內(nèi)聯(lián)元素與對齊 寫在前面 在讀《CSS世界》第四章之前，粗淺的認(rèn)為盒模型無非是margin/border/padding/content而已，再多無非在不同box-sizing...

    icyfire 評論0 收藏0

  • 深入理解css盒子模型

    摘要：下面我們就一步一步揭開的神秘面紗，深入理解盒模型，這對我們在布局上會有一個質(zhì)的提升。與內(nèi)聯(lián)元素的百分比值與內(nèi)聯(lián)元素。 css是一門具象語言，并不像js那樣具有邏輯性，因此，就算入行了前端很久的工程師，也覺得css難以掌握。下面我們就一步一步揭開css的神秘面紗，深入理解css盒模型，這對我們在布局上會有一個質(zhì)的提升。 盒子模型 showImg(https://segmentfault....

    gplane 評論0 收藏0

  • FE.CSS-快速梳理

    摘要：元素根據(jù)外在盒子是內(nèi)聯(lián)還是塊級，分成塊級元素和內(nèi)聯(lián)元素。值為常見的內(nèi)聯(lián)元素有。注數(shù)值需向上舍入是相對于計算的只能應(yīng)用于內(nèi)聯(lián)元素以及的元素。的顯示內(nèi)聯(lián)元素元素的垂直中心點(diǎn)和行框盒子基線往上處對齊。 前言 本文是對《CSS世界》閱讀中所做筆記和感悟，若有錯誤請指正。 概述 CSS設(shè)計初衷是為了更好地展示圖文。HTML元素根據(jù)外在盒子是內(nèi)聯(lián)還是塊級，分成塊級元素和內(nèi)聯(lián)元素。HTML元素也可根...

    XUI 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<