html布局方式

元素数值布局方式

内边距：padding

        其内容与边框的距离，当只有一个值时，表示上下左右距离均为该值，当有两个值时，第一个值表示上下，第二个值表示左右，当有第三个值时，第一个值表示上，第二个值表示左右，第三个值表示下，当有四个值时，分别表示上右下左。除了数值以外还能使用auto来自动填充边距，当上下或左右都为auto时，会均分盒子以外的空间。

外边距：magin

        标签本身与所在容器边框的距离，其值与padding相同

float属性：改变当前元素后面元素的排列方式

        值left：会让之后的元素排在当前元素右边

        值right：会让之后的元素排在当前元素的左边

        值none：默认值，根据元素的display值自动浮动

        值both：之后的元素会在当前元素下面

position属性：改变定位方式

        值static：默认，无位置设置

        值absolute：绝对定位，设置的位置信息将相对于网页边框，而不是父级

        值relative：相对定位，设置位置信息将相对于父级。

overflow属性：管理超出大小的子元素

        值visible：默认值，不做任何处理，元素将超出父级

        值auto：超出时隐藏超出部分并添加滚动条查看隐藏部分

        值hidden：隐藏超出部分

        值scroll：无论是否超出都会添加滚动条

弹性盒子

display属性：块级元素与行内元素转换块级元素

        值none：隐藏元素

        值block：将元素变为块元素

        值inline：将元素变为行内元素

        值flex或值inline-flex：将容器变为弹性容器

flex-direction属性：弹性容器中子元素排序方式

        值row：默认值，作为一行，水平显示

        值row-reverse：同行，但是方向相反

        值column：以列显示

        值column-reverse：以列显示，但是方向相反

flex-wrap属性：弹性容器中属性超出父容器时是否换行

        值nowrap：默认值，不换行

        值wrap：需要时换行

        值wrap-reverse：换行，但是方向相反

flex-flow属性：flex-direction和flew-wrap的简写

align-items属性：设置弹性容器中元素x轴的对齐方式

        值stretch：默认值，拉伸到适合容器的大小

        值center：位于容器中央

        值flex-start：位于容器左

        值flex-end：位于容器右

        值baseline：项目被得到容器的基线

justify-content属性：设置弹性容器中元素y轴的对齐方式

        值flex-start：位于容器上，默认值

        值center：位于容器中央

        值flex-end：位于容器下

        值space-between：项目行于行中间留间隙

        值space-around：项目行前行后留间距

align-content属性：修改flex-flow的行为，类似align-items，修改对齐的弹性线

        值stretch：默认值，拉伸占据剩余空间

        值center：朝着弹性容器的中央对行打包

        值flex-start：朝着弹性容器的开头对行打包

        值flex-end：朝着弹性容器的结尾对行打包

        值space-between：行均匀分布于弹性容器中

        值space-around：行均匀分布在弹性容器中，两端各占一半