在css中布局的会用到三种比较大的常规方式， 常规流，正常的流，比如有些块级的规则，或者行级的规则，表格的布局，flexbow，grid布局 浮动，就是把一些元素设成浮动，就比如图片，文章环绕图片 绝对定位，可以直接盖在常规流的上边并且对常规流没有什么影响
css最简单的就是盒模型，有宽度高度，在其中放content 有内边距，边框，其中要是制定broder和padding，是在指定了height，和width再去往外阔。 其中width ， 指定 content box 宽度 取值为长度、百分数、auto auto 由浏览器根据其它属性确定 百分数相对于容器的 content box 宽度。 其中height， 指定 content box 高度 取值为长度、百分数、auto auto 双值由内容计算得来 百分数相对于容器的 content box 高度 容器有指定的高度时，百分数才生效。 接下来是内边距的区域有paddingtop，right，left，和bottom，指定元素四个方向的内边距 百分数相对于容器宽。 border边框 可以设计边框的粗细，颜色 三个属性：border-width border-style border-color 四个方向 ：border-top boder-right border-bottom border-left。 外边距margin 指定元素四个方向的外边距 取值可以是长度、百分数、auto 百分数相对于容器宽度。 另外一种计算模式 borderbox 则是把制定的border的宽度和高度再减去padding的距离。
接下来介绍一下盒模型最基础的布局规则： 块级 block level box，不和其他盒子并列采访，适用所有摸盒子模型属性。 而行级 lnline level box ，和其它行级盒子一起放在一行或拆开成多行，盒模型中的width、height不适用。 块级元素会生成块级盒子，body，article，div，main，section，h1-6，p，ul，li等， display：block。块级盒子 而行级盒子会生成行级盒子，内容分散在多个行盒中，span，em，strong，cite，code等 display：inline。行级盒子 inlineblock：本身是行级，可以放在行盒中：可以设置宽高；作为一个整体不会被拆散成多行。 行级排版上下文 Inline Formatting Context (IFC) 只包含行级盒子的容器会创建一个FC IFC内的排版规则 盒子在一行内水平摆放 一行放不下时，换行显示 text-align 决定一行内盒子的水平对齐 vertical-allgn 决定一个盒子在行内的垂直对齐 避开浮动(1loat)元素”
Flex box： 一种新的排版上下文 它可以控制子级盒子的： 摆放的流向（右左上下） 摆放顺序 盒子宽度和高度 水平和垂直方向的对齐 是否允许折行
