1.固定布局
宽度，高度固定，页面被一个固定网页包裹，容器不能移动，页面的宽高不随页面的变化而变化，这种布局大家比较熟悉，这种方式一度成为页面布局的主流方式，这样布局设计简单，更容易定义，但是由于屏幕尺寸的不同，特别是移动端各个设备的不同，这种布局在灵活性方式可用度不高。
2.流式布局
以百分比为主要形式，让屏幕自适应，这种布局方式定义灵活，能够根据屏幕的情况变化，但是这种方式设计的效果不太容易控制，一般移动端结合rem用的比较多，pc端用的不是非常多
3.弹性布局
浮动部分和清楚浮动部分主要是兼容添加的一些代码，重点看弹性布局的部分，弹性布局相对前两种出现的比较晚些，但是弹性布局功能还是很强大的，布局也非常方便，但是此布局形式在pc端并不推荐使用，ie9以下浏览器均不支持，另外火狐等一些浏览器也需要做兼容，移动端目前绝大部分浏览器都已经支持弹性布局，在移动端大家可以尝试使用。
4.浮动布局
浮动布局关键词，float，可以设置left或者right，他使元素脱离文档流进而达到布局的目的，也是目前一个比较主流的布局方式，但是使用浮动的结束以后，别忘记清除浮动哦。
5.定位布局
定位布局也是目前比较常用的一种布局方式，关键词： position: fixed;固定布局，将元素固定在一个位置，不随页面移动而移动，position: relative;相对定位，相对于元素自身定位，不脱离文档流，相当于定义一个参照物，一般和绝对定位结合使用，position: absolute;绝对定位，脱离文档流，一般和相对定位结合使用，如果不定义相对定义，将会相对于整个浏览器定位，所以定位布局，一般情况下都是相对定位和绝对定位结合着来，相当定位相当于划定一个势力范围，制定一个封闭的容器块，然后绝对定位就行对于相对定位来定位，从而达到有效的布局。
6.margin和padding
margin是外边距，padding内边距，外边距是盒子与盒子之间的距离，内边距是盒子的边和盒子内部元素的距离，因此在使用的时候应该有选择的使用，另外margin会出现吃边距的情况
ps：没有一成不变的布局方式，也没有任何一种方式能够满足各方面的需求，大家可以多积累些经验，根据自己的需要使用最有效布局方式做出最帅最美的页面。
网友评论