css揭秘系列

BicycleWarrior 發布于2019-08-29 13:55 / 2701人閱讀

摘要：基于的解決方案借助規范所引入的和屬性，我們可以讓它內部的文本也實現居中根據盒對齊模型第三版的計劃，在未來，對于簡單的垂直居中需求，我們完全不需要動用特殊的布局模式了。因為只需要下面這行代碼就可以搞定

7.結構和布局

自適應內部元素:

min-content（容器內部最大的不可斷行元素的寬度（即最寬的單詞、圖片或具有固定寬度的盒元
素）

 
 
 The great Sir Adam Catlace was named after
 Countess Ada Lovelace, the first programmer.
 
問題是文字內容可能很長導問題
解決：
figure {
 max-width: 300px;//兼容其他不支持該屬性的瀏覽器
 max-width: min-content;
 margin: auto;
}
figure > img { max-width: inherit; }

到
水平居中：

行內：text-align:center;
塊：margin:auto;

垂直居中（就比較復雜了）--早期定寬元素使用的絕對定位的三種寫法

1.
    main {
     position: absolute;
     top: 50%;
     left: 50%;
     margin-top: -3em; /* 6/2 = 3 */
     margin-left: -9em; /* 18/2 = 9 */
     width: 18em;
     height: 6em;
    }
2.
     main {
     position: absolute;
     top: calc(50% - 3em);
     left: calc(50% - 9em);
     width: 18em;
     height: 6em;
    }
3.可以不用知道元素寬高
    main {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
    }

絕對定位的寫法有個問題，當元素在高度上超過了視口，那它的頂部會被視
口裁切掉

解決辦法
基于視口單位的解決方案（只適用于在視口中居中的場景。）

main {
     width: 18em;
     padding: 1em 1.5em;
     margin: 50vh auto 0;
     transform: translateY(-50%);
    }

基于 Flexbox 的解決方案

body {
 display: flex;
 min-height: 100vh;
 margin: 0;
}
main {
 margin: auto;
}

借助 Flexbox 規范
所引入的 align-items 和 justify-content 屬性，我們可以讓它內部的文
本也實現居中
main {
display: flex;
align-items: center;
justify-content: center;
width: 18em;
height: 10em;
}

根據盒對齊模型（第三版）（http://w3.org/TR/css-align-3）的計劃，在未來，對于簡單的垂直居中需求，我們完全不需要動用特殊的布局模式了。因為只需要下面這行代碼就可以搞定：

align-self: center;

云服務器 GPU云服務器大揭秘揭秘云存儲云計算揭秘人工智能揭秘

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112795.html

揭秘vue——vue-cli3全面配置

摘要：中可以使用注入變量訪問環境變量中的配置信息向全局樣式傳入共享的全局變量在中引用添加兼容在中添加配置完整配置持續更新中揭秘系列目錄 √ 配置多環境變量 √ 配置基礎 vue.config.js √ 配置 proxy 跨域 √ 修復 HMR(熱更新)失效 √ 修復 Lazy loading routes Error： Cyclic dependency √ 添加別名alias √ 壓縮...

hatlonely 2019-08-23 13:10 評論0 收藏0
《CSS揭秘》：切角效果

摘要：切角效果切角效果是一種常見的視覺風格設計。但是現在在里，依然無法簡單的生成切角效果。原文位于揭秘切角效果。裁切路徑方案使用裁切路徑可以在裁切任意多邊形，下面的代碼可以切除和上文一樣的效果。改變切角深度時需要同時改變個地方。切角效果切角效果是一種常見的視覺風格設計。但是現在在CSS里，依然無法簡單的生成切角效果。 css漸變使用CSS漸變[linear-parent][1]可以形成...

JerryZou 2019-08-29 11:18 評論0 收藏0
《CSS 揭秘》作者Lea Verou：我喜歡分享開源的行業文化

摘要：作為女性，你又來自互聯網技術不太發達的希臘。希臘目前可能還存在一些針對女性的性別歧視，但并不明顯，不然我可能會被影響到。實際上，有時候希臘在性別平等方面比其他西方國家更進步。本文僅用于學習和交流，不用于商業目的。非商業轉載請注明作譯者、出處，并保留本文的原始鏈接：http://www.ituring.com.cn/art... 訪談嘉賓： Lea VerouW3C CSS工作組特邀專...

tianyu 2019-08-29 11:06 評論0 收藏0
《CSS 揭秘》作者Lea Verou：我喜歡分享開源的行業文化

摘要：作為女性，你又來自互聯網技術不太發達的希臘。希臘目前可能還存在一些針對女性的性別歧視，但并不明顯，不然我可能會被影響到。實際上，有時候希臘在性別平等方面比其他西方國家更進步。本文僅用于學習和交流，不用于商業目的。非商業轉載請注明作譯者、出處，并保留本文的原始鏈接：http://www.ituring.com.cn/art... 訪談嘉賓： Lea VerouW3C CSS工作組特邀專...

yzd 2019-08-21 14:14 評論0 收藏0