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;    

本文转载于:猿2048→https://www.mk2048.com/blog/blog_hkia2hcchaa.html