css揭祕系列

7.結構和佈局

自適應內部元素:

min-content（容器內部最大的不可斷行元素的寬度（即最寬的單詞、圖片或具備固定寬度的盒元
素）
<figure>
 <img src="adamcatlace.jpg" />
 <figcaption>
 The great Sir Adam Catlace was named after
 Countess Ada Lovelace, the first programmer.
 </figcaption>
</figure>問題是文字內容可能很長導問題
解決：
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;