css-布局

1.浮动布局

　　float：left左侧浮动；float：right右侧浮动

　　脱离文档流

　　位置会被下一行抢占内容

　　当宽度不够时，会自动换行

　　主要应用：一行有多列（2+）

　　常用方法:

　　1.左侧浮动，右侧向右浮动

　　2.左侧浮动，右侧盒子设置左侧外边框

2.定位布局

相对定位：position：relative

　　不脱离文档流

　　更改位置相对于原先位置

绝对定位：position：absolute

·　　脱离文档流

　　更改位置相对于最近的定位父元素，如果没有父元素，则相对于浏览器视口

固定定位：position：fixed

　　脱离文档流

　　更改位置相对于浏览器视口

粘贴定位

　　不脱离文档流

　　relative和fix的结合

　　top：50px；是相对于浏览器视口，距离浏览器视口是50px；

适于的功能模块：
　　模态框、二级菜单、下拉菜单、网页聊天、固定宣传页

3.伸缩盒布局

作用：子元素在父元素中展示，类似于float，主要应用于手机App

用法：一定要为父元素设置宽和高，子元素在交叉轴上默认占满

主轴：默认主轴是X轴，主轴：row：x轴，columY轴

换行：nowrap缩小视口不换行，wrap缩小视口换行

基础值:

　　flex-basis主轴元素基础值（宽和高）

　　flex-grow 盈余是分配子元素

　　flex-shrink 亏损时分配子元素

　　速写

　　flex-grow shrink basis

转载于:https://www.cnblogs.com/ys199610/p/11305164.html