前端布局

flex布局：

• 容器 display：flex；

• 横排 flex-direction:row;

• 竖排 flex-direction：column；

• 子项目主轴对齐方式 justify-content：center；/flex-start；/flex-end； space-between；/space-around；

• 子项目交叉轴对齐方式 align-items：center；/flex-start；/flex-end；/stretch；baseline；

• 换行 flex-wrap：nowrap；默认不换行 /wrap；换行 /wrap-reverse;反向换行

•  

• 子项目自身对齐方式 align-self:center;/flex-start；/flex-end；/stretch；/baseline；

• 子项目基准大小 flex-basis：auto；

• 子项目扩展 flex-grow：num；倍率

• 子项目收缩 flex-shrink：num；倍率

• 子项目不缩放 flex-none；

• 子项目排序 flex-order：0；默认是0，数值越大越靠后排

 

元素叠加，定位position属性：

• position：relative；相对定位，不脱离文档流，偏移量的参照物是自身原来的位置，偏移后会遮盖别的元素，常用于作为绝对定位的参照物，祖先级定位用。

• position：absolute；绝对定位，脱离文档流，参照物为第一个上级祖先定位元素/根元素，会遮盖别的元素，常用于元素层叠显示。默认宽度为内容宽度。

• position：fixed；固定定位，脱离文档流，参照物是视窗，会遮盖别的元素，常用于固定顶部/底部导航栏。默认宽度为内容宽度。

 

为了不使fixed元素遮挡下面的元素， //body top位置设置一个空白区域占位置 //高度=fixed元素高度 :

body{
    padding-top:100px;
} 
.topbar{
    position:fixed; 
    top:0px; 
    height:100px; 
    width:100%; 
}

浮动float：

float：left；/right；脱离文档流，但不脱离文本流，会影响后面的元素，默认宽度为内容宽度。

 

清除浮动：

clear：both；/left;/right;/none;应用于后续元素，清除float对后续元素的影响

• 在float元素后面添加一个不显示的块级元素，设置class类如下

.clear{ 
    clear:both; 
    height:0; 
    overflow:hidden; 
    visibility:hidden; 
}

• 在float元素的父元素上添加.clear类:

.clear:after{ 
    content:"."; 
    display:block; 
    clear:both;
    height:0; 
    overflow:hidden; 
    visibility:hidden; 
}

margin合并：

<div style=”margin-bottom:100px”></div> 
<div style=”margin-top:50px”></div>

两个div盒子之间并不是150px的距离，而是100px，这就是合并取最大。

---分享是程序员的美德