CSS揭秘之结构与布局

自适应内部元素

如果不给元素指定一个具体的 height ，它就会自动适应其内容的高度。假如我们希望 width 也具有类似的行为，该怎么做呢？

<div>
    <p>Some text [...]</p>
    <figure>
        <img src="boy.png" />
        <figcaption>
        The great Sir Adam Catlace was named after
        Countess Ada Lovelace, the first programmer.
        </figcaption>
    </figure>
    <p>More text [...].</p>
</div>

修改前的效果：

  figure {
        width: min-content;
        margin: auto;
    }

修改后的效果：

居中

不定宽元素水平居中：

1. 利用行内元素特性居中
2. 用table布局居中，table的特点：根据内容撑开宽度，然后利用margin:0 auto
3. 利用translateX的参照物是自己来定位
4. 利用flex特性的两种实现方式

不定高元素垂直居中：

1. 用table-cell特性
2. 用translateY特性
3. 利用flex特性

不定宽、不定高的元素怎么垂直水平居中

1. 利用inline-block
2. 利用position 后者
3. 利用flex

布局

定宽+自适应

1. 利用float + margin
2. 利用float + overflow(BFC)特性
3. 利用table表现的像block,但是有区别，随内容的多少宽度为多少；table-cell，table-cell表现的像inline-block但是有区别；
4. flex布局

不定宽+自适应

等宽布局

1、列数是知道的 flex 2、列数不知道table、 table-cell

等高的解决方案

1. 用table、table-cell 一个列表中的单元格天然是等高的
2. 用flex