html之布局

一、float布局：需要横向布局的元素添加float属性，其值：left(左浮动) right(右浮动)

存在问题：父级元素高度塌陷，导致元素重叠

解决方法：1、父级元素添加高度（不一定能准确知道子级元素高度，不推荐）

2、父级元素使用overflow:hidden;(父级高度随子级元素的最高高度变化)

二、内联块级元素布局：需要横向布局的元素添加display: inline-block属性

存在问题：子元素间存在空隙，导致无法极限横向布局（因为文本换行在页面上会呈现空格）

解决方法：1、子元素首尾相接（代码嵌套会很复杂，难以维护，不推荐）

2、父级元素使用font-size:0px; 子级元素font-size不设置为0

三、弹性盒子布局：需要给横向布局的元素的父级元素添加display:flex;

配套属性：

①设置弹性盒子模型内子元素的排列方向 flex-direction: row(默认，横着)、column(竖着)、row-reverse(反向横着)、column-reverse(反向竖着) （在父级元素处使用）

②设置弹性盒子内子元素是否换行 flex--wrap: nowrap(默认，不换行)、wrap(换行) （在父级元素处使用）

③设置弹性盒子内子元素排列顺序 order 其值是数字，值越小越靠前（在子元素内使用）

④设置弹性盒子内子元素的拉伸压缩比 flex是复合属性，flex-grow(拉伸因子)、flex-shrink(压缩因子)、flex-basis(基准宽度)，在盒子内的空间没有完全占满时，会按照比例进行分配（在子级元素处使用）

⑤设置弹性盒子内子元素在排列方向上的分布方式 justify-content: flex-start(开端)、flex-end(结束端)、center(居中)、space-between(空白分布在元素中间)、space-around(空白分布在元素左右) （在父级元素使用）

⑥设置弹性盒子内子元素在排列方向上垂直方向的对齐方式 align-item: flex-start(开端对齐)、flex-end(结束端对齐)、center(居中对齐)（在父级元素使用）

⑦设置弹性盒子内子元素行的分布方式 align-content: flex-start(开端)、flex-end(结束端)、center(居中)、space-between(空白分布在元素中间)、space-around(空白分布在元素左右) （在父级元素使用）

四、定位

定位模式：position: static(静态模式定位，默认)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)

当position使用（relative、absolute、fixed）才有效，配套属性：left、right、top、bottom 方位属性控制具体位置 z-index 控制层次，值越大越靠人眼

1、单纯使用relative：拥有原来的物理空间，以自己原来的位置为参考物，随着浏览器滚动而滚动

2、单纯使用absolute：不拥有原来的物理空间，以浏览器为参考物，随着浏览器滚动而滚动

3、单纯使用fixed：不拥有原来的物理空间，以浏览器为参考物，不随着浏览器滚动而滚动

4、结合使用relative absolute：祖先元素使用relative，子元素使用absolute，子元素不拥有原来的物理空间，以使用relative的祖先元素为参考物，随着浏览器滚动而滚动