十三章 盒模型

一、怪异盒模型布局：就是内边距和边框不占位置，手机端常用

        宽度+左右外边距

box-sizing:boder-box；  

其中：box-sizing:content-box;为怪异盒模型的默认值； 

二、正常盒模型布局：宽度+左右内边距+左右边框+左右外边距

三：弹性盒：给父级添加弹性盒属性，里面的子级会自动变成块级，子元素默认横向排列，我们可以通过各种属性调整子级的排列方式 

        容器的含义：父级盒子

        项目的含义：直属子级盒子

注意：（1）块级还是行内指的是父级；

            （2） 如果子元素为行内元素，也会变成块元素，从而进行横向排列；

             （3）若需要子元素水平垂直居中，可以给父元素弹性盒：display:flex;  给子元素：magin:auto;

                1、如何触发弹性盒

display: flex;	块级弹性盒
display: inline-flex;	行内弹性盒

                2、主轴排列方式

flex-direction:row	横向对齐，默认值
flex-direction:row-reverse	横向反向对齐
flex-direction:column	纵向对齐
flex-direction:column-reverse	纵向反向对齐

             3、    主轴对齐方式

justify-content: flex-start	顶端对齐，默认位置
justify-content: flex-end	末端对齐，主轴结束位置
justify-content: center	居中对齐
justify-content: space-between	两端对齐，项目与项目质检距离相等，项目与容器之间没有距离
justify-content: space-around	环绕对齐，项目与项目之间距离相等，项目与容器之间有距离

               4、侧轴对齐方式

align-items: flex-start	顶端对齐，侧轴开始位置，默认值
align-items: flex-end	末端对齐，侧轴
align-items:center	居中对齐，侧轴
align-items: baseline	基线对齐，跟flex-start同等效果

                5、行与行对齐方式

align-content: flex-start	顶端对齐，默认位置
align-content: flex-end	末端对齐
align-content: center	居中对齐
align-content: space-between	两端对齐，项目与项目质检距离相等，项目与容器之间没有距离
align-content: space-around	环绕对齐，项目与项目之间距离相等，项目与容器之间有距离

                6、项目的对齐方式

align-self: flex-start	顶端对齐
align-self: flex-end	末端对齐
align-self:center	居中对齐
align-self: stretch	拉伸，没有大小时生效

                7、是否折行

                flex-wrap: nowrap; 不折行，默认值，默认会被挤压，如果挤压到极限，就会溢出；

                flex-wrap:wrap;折行；

                flex-wrap:wrap-reverse:反向折行

四、项目属性总共有两个，一个是排序，一个是flex

其一：排序：order:数字越大越靠后，可以给负值，默认值为0；

其二：flex分为单一属性以及复合属性

• flex-grow:扩展的量，当值大于0时，当父元素有剩余空间时，当前元素放大，父元素没有剩余空间时，改元素不放大；默认值为0；
• flex-shrink:缩放的量，当父元素有剩余空间时，该元素不缩小，父元素没有剩余空间时，该元素缩小；默认值为1；
• flex-basls:项目的长度，相当于width属性；
• 复合属性常用取值

        flex:1;====flex:1 1 0%;

        flex:auto===flex:1 1 auto;

        flex:none===flex: 0 0 auto;

        flex:0 auto===flex: 0 1 auto;

• 案例

        flex:0 1 100px:表示父元素有剩余空间，当前元素不放大，父元素没有剩余空间，当前元素会缩小，不放大不缩小时，默认宽度为100px;

        with:300px; with:300px; flex:1 ; 这时占剩余所有 ；

        flex:1;flex：2；flex:3; 占1/6，占2/6，占3/6;

五、多列布局

column-count:数值	列数
column-gap:	列间距
column-rule:	列与列之间分割线，颜色 样式 线宽
column-fill:	高度是否统一，其中auto==一列填满再去第二列 balance==等分，默认值
column-width	每列宽度，有宽度属性，就不能写列数了
column-span	none、all两个属性，检索元素是否跨列
break-inside:avoid	子级标签不折半显示，给到子级元素