css布局

可见格式化模型

盒模型

盒模型描述了元素如何显示，以及（在一定程度上）如何相互作用。页面中的所有元素被当成一个矩形盒子，这个盒子包括元素的content、padding、border和margin。

弹性盒子布局

弹性盒是一种简单而强大的布局方式，通过弹性盒可以指明空间的额分布方式、内容 的对齐方式和元素的视觉顺序，把不同的组件放置在页面中。内容可以轻易的横向或纵向排布，还可以沿着一个轴布局，或者折断成多行。

突出的特点：能让元素对不同的屏幕尺寸和不同的显示设备做好适应准备

弹性盒依赖父子关系。在元素上声明display:flex或display:inline-flex激活弹性布局，这个元素被称为弹性容器（flex container），负责在所占的空间内布置子元素，控制子元素的布局，其子直接元素称为弹性元素（flex item）

• demo

<div style="display: flex;">
    <div>
      Here is some content.
    </div>
    <div>
      More content than before, but no properties explicitly set.
    </div>
    <div>
      Lots and lots of content. Even more content than to the left, but no properties explicitly set.
    </div>
</div>

在弹性容器中，各元素可以在主轴上排序。主轴可以是横向的，也可以是纵向的，因此可以把元素布置为列或行。

css布局

原文：https://www.cnblogs.com/zhuxiang1633/p/11693035.html