CSS布局

一、弹性布局

            弹性伸缩布局  display：flex

            属性要写在父盒子上

            flex-wrap：是否换行（是否为了弹性布局挤压自己的子盒子

                nowrap：默认，不换行

                wrap：换行

                wrap-reverse：改变朝向（自下而上）

            justify-content：子盒子排列方式（水平方向）

                center：居中

                space-between：两端对齐，中间自适应

                space-around：两端对齐，中间自适应。两端留空，值为中间空的一半

                space-evenly：两端对齐，中间自适应。空隙均匀分布

            flex-direction：改变盒子排列方向

                row：默认值，横向排列

                column：纵向排列

                row-reverse：横向，自右向左

                column-reverse：纵向，自下而上

            align-items:子盒子纵向排列方式

                center:居中

                flex-end：靠下排列

                flex-start：靠上排列

                baseline：与基线对齐

                stretch:如果指定侧轴大小的属性值为‘auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸

            align-content：定义了多根轴线的对齐方式

                stretch（默认值）：轴线占满整个交叉轴。

                flex-start：与交叉轴的起点对齐。

                flex-end：与交叉轴的终点对齐。

                center：与交叉轴的中点对齐，整体垂直居中。

                space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

                space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

            align-self:子盒子自身排列方式

                center:居中

                flex-end：靠下排列

                flex-start：靠上排列

                baseline：与基线对齐

                stretch:如果指定侧轴大小的属性值为‘auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸

二、其他布局

            1.固定布局（px）

            2.流体布局（%）

            3.浮动布局（float）

            4.定位布局（position）

            5.多列布局

                columns 规定设置 column-width 和 column-count 的简写属性

                column-rule 设置所有 column-rule-* （color，style，width）属性的简写属性

                column-span 规定元素应该横跨的列数。默认值为 1，可以设置为 all

                column-gap 规定列之间的间隔。

                column-fill 规定如何填充列。 (主浏览器都不支持该属性)

            6.BFC布局

                触发BFC：

                    1.float除none之外的属性

                    2.定位（absolute，fixed）

                    3.display：inline-box，table-cells，flex

                    4.overflow：hidden，auto，scroll

                BFC应用：

                    1.解决margin叠加问题

                    2.解决margin传递问题

                    3.解决浮动问题

                    4.解决覆盖问题

                overflow：

                    hidden，溢出隐藏

                    scroll：强制出现滚动条

                    auto：内容超出则出现滚动条，不超出则不出现滚动条

            7.响应式布局

                媒体查询，实现响应式

                @media screen   对打印模式不生效

                        and      且

eg:         @media screen and (max-width:800px) and (min-width:600px){

                div{

                    width:400px;

                    height:300px;

                    background-color:red;

                }

            }