成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css 居中

魏明 / 3032人閱讀

摘要：居中定義和用法簡寫屬性在一個聲明中設(shè)置所有外邊距屬性。上訴的第二種聲明并不能實現(xiàn)垂直居中的效果，具體可以看標(biāo)準(zhǔn)聲明或看下知乎的這篇文章。該方式需要居中元素的寬高確定。

css居中
1.margin:0 auto;
定義和用法
margin 簡寫屬性在一個聲明中設(shè)置所有外邊距屬性。該屬性可以有 1 到 4 個值。

說明
這個簡寫屬性設(shè)置一個元素所有外邊距的寬度，或者設(shè)置各邊上外邊距的寬度。
塊級元素的垂直相鄰?fù)膺吘鄷喜?，而行?nèi)元素實際上不占上下外邊距。行內(nèi)元素的的左右外邊距不會合并。同樣地，浮動元素的外邊距也不會合并。允許指定負(fù)的外邊距值，不過使用時要小心。

注釋：允許使用負(fù)值。

垂直外邊距之所以設(shè)計為可以在垂直方向合并主要是方便文本的排版，即一段文本分行的時候上下兩行直接的間距不會疊加。

簡寫的情況：

/*四個方向的外邊距
都是10px*/
margin: 10px;
/上下的外邊距都是10px，左右的外邊距20px/
margin: 10px 20px;
/上的外邊距都是10px，左右的外邊距是5px，下外邊距15px/
margin: 10px 5px 15px;
/四個值依次是上、右、下、左/
margin: 10px 5px 15px 20px;
/設(shè)為auto的計算方式/
margin: 0 auto; /常用的水平居中對齊方式/
margin: auto;
上述的auto的計算方式是父容器-子元素剩余部分瀏覽器自動計算，以上述的水平居中方式為例，左右的外邊距等于父容器減去子容器剩余部分的寬度均勻分配給左右，從而實現(xiàn)居中對齊的效果。

上訴的第二種聲明并不能實現(xiàn)垂直居中的效果，具體可以看w3c標(biāo)準(zhǔn)聲明或看下知乎的這篇文章。

margin使用百分比單位計算的情況
/百分比是按照父容器的寬度來計算的，務(wù)必注意/
margin: 20%;
從上我們可以知道通過margin如何實現(xiàn)水平居中。

2.text-align:center;
1）絕對定位實現(xiàn)垂直居中

position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
width:100px;
height:100px;

采用絕對定位加負(fù)外邊距的方式，首先上，左偏移父容器的50%;然后再自身偏移自己寬高的50%，從而實現(xiàn)垂直水平居中。該方式需要居中元素的寬高確定。

2）絕對定位且居中元素不知寬高的情`
`position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:100px;
height:100px;`

在這里使用CSS3的transform:translate(-50%,-50%);屬性來實現(xiàn)元素自身的一個偏移

3）絕對定位+margin:auto;實現(xiàn)水平垂直居中

position:absolute;
top:0;
left:0;
bottom:0;
right:0;
width:100px;
height:100px;
margin:auto;

轉(zhuǎn)載別人的 主要自己看

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112185.html

相關(guān)文章

  • CSS居中完全指南——構(gòu)建CSS居中決策樹

    摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構(gòu)建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結(jié)CSS居中,包括水平居中和垂直居中.本文相當(dāng)于CSS決策樹,下次再遇到...

    cc17 評論0 收藏0

  • CSS居中完全指南——構(gòu)建CSS居中決策樹

    摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構(gòu)建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結(jié)CSS居中,包括水平居中和垂直居中.本文相當(dāng)于CSS決策樹,下次再遇到...

    AlienZHOU 評論0 收藏0

  • 【前端】這可能是你看過最全的css居中解決方案了~

    摘要：水平居中行內(nèi)元素解決方案適用元素文字，鏈接，及其其它或者類型元素，，部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個屬性為的父級元素中如設(shè)置這個父級元素屬性即可現(xiàn)在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行內(nèi)元素解決方案 適用元素：文字，鏈接，及其其它inline或者inline-*類型元素（inline-block，inline-table，i...

    csRyan 評論0 收藏0

  • 【前端】這可能是你看過最全的css居中解決方案了~

    摘要：水平居中行內(nèi)元素解決方案適用元素文字，鏈接，及其其它或者類型元素，，部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個屬性為的父級元素中如設(shè)置這個父級元素屬性即可現(xiàn)在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行內(nèi)元素解決方案 適用元素：文字，鏈接，及其其它inline或者inline-*類型元素（inline-block，inline-table，i...

    Simon 評論0 收藏0

  • css-元素居中

    摘要：一水平居中行內(nèi)元素水平居中使用屬性可以實現(xiàn)在行內(nèi)元素包括在塊級父元素水平居中。使用負(fù)已知高度寬度使用使用使用三水平垂直居中公共結(jié)構(gòu)塊級元素垂直居中。 本文重要是匯總了關(guān)于水平居中，垂直居中，還有水平垂直居中的各種方法。 一、水平居中 1.行內(nèi)元素水平居中 使用text-align:center;屬性可以實現(xiàn)在行內(nèi)元素（包括：inline,inline-block、inline-tabl...

    miqt 評論0 收藏0

  • CSS之各種居中

    摘要：前言在我看來，入門的路上最煩人的就是的各種居中了。在我初學(xué)過程中，居中這個問題經(jīng)常困擾到我。使用偽元素垂直居中這種方法的前提是要是行內(nèi)元素才能進(jìn)行居中。結(jié)語以上的方法基本上可以用完成各種情況的居中。 前言 在我看來，入門CSS的路上最煩人的就是CSS的各種居中了。在我初學(xué)CSS過程中，居中這個問題經(jīng)常困擾到我。那為什么CSS的居中這么煩人呢？ 我認(rèn)為，這是因為CSS的居中方法以及它的適...

    Labradors 評論0 收藏0

發(fā)表評論

0條評論

魏明

男|高級講師

TA的文章

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