4.CSS布局
（1）自动布局（默认文档流）
HTML+CSS元素配合搭建页面框架称为布局。
默认文档流就是对页面布局不加任何修饰，元素自动的布局方式，其特点如下：
元素在页面中的显示顺序与元素在代码中出现的顺序是一致的；
块级元素独占一行空间，宽度默认为父级的100%，高度由其内容高度所决定；
行内元素与其他元素共享一行空间，宽高由其内容所决定。
通过为display属性指定值block, inline ,inline-block等可以改变元素在正常流中的表现形式，使元素在块和行内元素之间相互转化，提高布局的可操作性。
（2）浮动布局
浮动布局的主要用法是为了让块级元素在一行中显示（列级布局），设置float属性使得元素脱离文档流浮动显示，float属性有以下取值：
left：向左浮动元素
right：向右浮动元素
none：【默认值】，不浮动
inherit：浮动方式继承父元素
脱离文档流的元素有以下特点：
宽度高度默认由内容决定
原先所在位置就会被其他块元素抢占
浮动元素在一行中依次排列，当一行无法容纳的时候会自动换行
应用：
左侧浮动，右侧不浮动（适用于两列布局）
.content > .left{
float:left;
width:220px;
}
.content > .right {
margin-left:230px;
}
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
全部浮动（适用于多列布局）
ul> li {
float:left;
with:计算及自定义设置;
}
ul::after {
display:block;
content:"";
clear:both;
}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
（3）定位布局
定位布局分为静态定位和相对定位，常用于模态框、下拉菜单、二级菜单、固定宣传栏、网页聊天页面等。
静态定位是所有元素的默认定位方式。意味着将一个元素定位在默认文档流中，默认设置为position: static;。
相对定位与静态定位相似。相对定位的元素我们可以通过属性top, bottom, left, right来改变元素最终的位置。元素移动的时候是相对于当前元素所在的位置进行移动的，默认设置为position: relative;。
position有以下取值：
relative：定位元素（相对定位），没有脱离文档流，参照点为当前元素原本的位置
absolute：定位元素（绝对定位），脱离了文档流，参照距离当前元素最近的父定位元素，如果所有的父元素都没有定位元素，参照浏览器视口
fixed：定位元素(固定定位)，脱离了文档流，参照浏览器视口
sticky：定位元素(粘滞定位)，不脱离文档流，relative 和 fixed 的结合，如设置元素样式为top:100px，则当前元素距离浏览器视口顶端为100px的时候，体现fixed的特点，其余情况体现relative的特点
（4）伸缩盒布局
伸缩盒布局可以理解为自适应布局，它能够使得元素的宽高随显示范围（浏览器视口）的改变而做出特定调整，一般应用于响应式布局（手机app）。
当父元素设置为伸缩盒布局（display : flex;）时：
布局形式为列布局，默认主轴为X轴（flex-direction: row;），默认交叉轴为Y轴，元素会沿着主轴方向排列（横向排列），元素默认高度将沿交叉轴方向占满父元素高度；
当设置flex-direction: column;时，布局形式为行布局，主轴变为Y轴，元素将沿主轴方向排列（纵向排列），元素默认宽度将沿交叉轴方向占满父元素宽度。
flex-wrap用于设置子元素宽度之和大于父元素时是否换行，默认值为nowrap不换行，设置为wrap时换行。
flex的样式表：
flex-basis：主轴上元素的基础值(宽/高)
flex-grow：对盈余空间的分配
flex-shrink：对亏损空间的贡献
flex: grow shrink basis; 速写（且如flex:1;表示flex:1 1 0;）
应用：
等比例划分
section {
display: flex;
}
article {
flex: 1;
}
article:nth-of-type(3) {
flex: 2;
}
父元素section为一个伸缩盒子容器，article各占一份，第三个article占2份。假如共有3个article，第一个、第二个article占1/4，第三个占1/2。
剩余部分等比例划分
section {
display: flex;
}
article {
flex: 1 200px;
}
article:nth-of-type(3) {
flex: 2 200px;
}
父元素section为一个伸缩盒子容器，每个article的宽度至少200px，对于屏幕的剩余部分，article各占一份，第三个article占2份。假如共有3个article，第一个、第二个article占1/4，第三个占1/2。
原文：https://www.cnblogs.com/wodeqiyuan/p/11312039.html