css布局

一.弹性布局

display：flex   属性要写在父盒子上

flex-wrap: wrap; 是否换行

 /* 是否换行     （会不会伪类弹性布局挤压自己的子盒子）

            nowrap 默认 不换行

            wrap 换行

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

 display: flex;
            /* flex-wrap: nowrap; */
            flex-wrap: wrap;
            /* 1flex-wrap: wrap-reverse; *

justify-content: center   子盒子水平方向排列

* 子盒子水平方向排列 */

                    /* center  居中

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

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

                    space-evenly   均匀分布*/

justify-content: center;
             */
             /* justify-content: space-between; */
             /* justify-content: space-around; */
             /* justify-content: space-evenly; 

、flex-direction: row   子盒子排列方向

flex-direction  子盒子排列方向

            默认 row ： 横向排列

            column ：纵向排列

            row-reverse： 横向从右往左

            column-reverse：纵向由下往上

flex-direction: row; */
             /* flex-direction: column; */
             /* flex-direction: column-reverse; */
             /* flex-direction: row-reverse; 

align-content: center;子盒子纵向排列方式

align-items: baseline;
            /* 垂直居中 */
            align-content: center;

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

                center：居中

                flex-end：靠下排列

多列布局：

column-count: 6;   分几列

可以组合写，可以分开写 */

            /* column-rule: 10px solid red; */

            /* column-rule-style: solid;

            column-rule-color: pink;

            column-rule-width: 2px; */

 overflow

                hidden: 溢出隐藏

                scroll：强制出现滚动条

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

BFC布局：

<!-- 面试题

        普通盒子模型 和 怪异盒子模型

        1. 如果一个盒子设置了边框和内边距，当前盒子的宽高会加上边框和内边距

        2. IE默认不包含。如果要让盒子的宽高包含边框和内边距，需要加box-sizing:content-box

响应式布局

 @media screen and (max-width: 800px) and (min-width:600px){
            div{
                width:400px;
                height: 200px;
                background-color: red;
            }