/*方法1*/.border{width:100%;height:1px;background:red;}/*方法2*/.border{border-image:url(border.png)}/*方法3*/.border{box-shadow:0001px#000;}

1.弹性盒子.box{display:flex;justify-content:center;align-items:center;}2.定位.box{position:relative;}.box.sub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);/*margin-left:负的宽度的一半*//*margin-top:负的高度的一半*/}

BFC：块级格式化上下文blockformattingcontext，是一个独立渲染区域。规定了内部box如何布局，并且与这个区域外部毫不相干。触发：float的值不是none；position的值不是static或者relative；display的值是inline-block、block、table-cell、flex、table-caption或者inline-flex；overflow的值不是visible。作用：避免margin重叠；自适应两栏布局；清除浮动。

display:none;彻底消失，释放空间。能引发页面的reflow回流（重排）。visibility:hidden;就是隐藏，但是位置没释放，好比opacity:0;不引发页面回流。

flex-direction：指定弹性容器中子元素的排列方式。justify-content：设置弹性盒子元素在主轴（横轴）方向上的对齐方式。align-items：设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。flex-wrap：用于指定弹性盒子的子元素换行方式。align-content：设置各个行的对齐。align-self：设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。flex：用于指定弹性子元素如何分配空间。

order（项目排列的顺序越小越靠前）align-self（单个属性的操作flex-endcenterflex-star）flex-grow（如果剩余有宽度是否进行扩张方法，默认是0，）flex-shrink（空间不足的时候进行缩小默认是1进行缩小）

order（项目排列的顺序越小越靠前）align-self（单个属性的操作flex-endcenterflex-star）flex-grow（如果剩余有宽度是否进行扩张方法，默认是0，）flex-shrink（空间不足的时候进行缩小默认是1进行缩小）

justify-content：space-aroundspace-betweenspace-eventlycenterflex-endalign-items:flex-starflex-endflex-direction:rowrow-reversecolumncolumn-reverseflex-wrap:nowrap（如果子孩子，的宽度超过父盒子，会进行总动的伸缩）wrap（不去管）

justify-content：space-aroundspace-betweenspace-eventlycenterflex-endalign-items:flex-starflex-endflex-direction:rowrow-reversecolumncolumn-reverseflex-wrap:nowrap（如果子孩子，的宽度超过父盒子，会进行总动的伸缩）wrap（不去管）

首先看张图片一般display：flex写在父元素的属性上！下面是基本理解！在flex容器中默认存在两条轴，水平主轴(mainaxis)和垂直的交叉轴(crossaxis)，这是默认的设置在容器中的每个单元块被称之为flexitem，每个项目占据的主轴空间为(mainsize),占据的交叉轴的空间为(crosssize)。这里需要强调，不能先入为主认为宽度就是mainsize，高度就是crosssize，这个还要取决于你主轴的方向，如果你垂直方向是主轴，那么项目的高度就是mainsize。