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;