CSS布局
合理的布局是产品的基础,可以使人感觉整齐大方,提升用户体验。掌握几种常见的布局形式也是前端开发的基础,对于快速实现页面重构有很大帮助。
单列布局
单列布局通常用于网站的首页,分为头部的导航、网页内容、页脚相关信息。
//html <div class="body"> <div class="header"></div> <div class="container"></div> <div class="footer"></div> </div> //css .body{ max-width: 1200px; margin: 0 auto; }
优点:布局实现简单,界面显示整体性强,给人感觉简洁大方。
左右布局
左右布局常见于博客、后台管理系统,左侧为导航,右侧做内容显示。
//html <div class="body"> <div class="left"></div> <div class="right"></div> </div>
float+margin
左侧元素设置成向左浮动并固定宽度,右侧元素左外边距预留出左侧元素的宽度。
//css .body{ max-width: 1200px; margin: 0 auto; } .left{ width: 200px; float: left; } .right{ margin-left: 200px; }
优点:布局简单,右侧宽带可自适应。
position+margin
左侧元素用绝对定位固定在左边,右侧元素预留左外边距。
.body{ max-width: 1200px; margin: 0 auto; } .left{ position: absolute; top: 0; left: 0; width: 200px; } .right{ margin-left: 200px; }
优点:左侧内容可固定位置,右侧内容宽度自适应。
圣杯布局
圣杯布局和双飞翼布局都是为了解决两边定宽,中间自适应的三栏布局,中间栏在最前面优先渲染,多见于商城类网站布局。
float+负margin+padding+position
布局步骤:
1、三列内容都设置向左浮动。
2、设置container宽度为100%,设置两侧栏的宽度。
3、设置left左边距为负100%,设置right左边距为负的自身宽度。
4、设置body的padding值给左右两块内容留空间。
5、设置left、right为相对定位,左侧的left属性值为负自身宽度,右侧的right属性值为负自身宽度。
//html <div class="body"> <div class="container"></div> <div class="left"></div> <div class="right"></div> </div> //css .body{ padding: 0 150px; } .container{ float: left; width: 100%; } .left, .right{ position: relative; float: left; width: 150px; } .left{ left: -150px; margin-left: -100%; } .right{ right: -150px; margin-left: -150px; }
这种布局中html的顺序不能更改,当窗口过小时会出现布局错乱,可以设置min-widthmin-width解决。
双飞翼布局
双飞翼布局始于淘宝UED,与圣杯布局相似,但是做了改进,是用html结构的调整减少了相对属性设置
float+负margin+margin
布局步骤:
1、三列内容都设置向左浮动。
2、设置container宽度为100%,设置左右内容的宽度。
3、设置left左边距为负100%,设置right左边距为负自身宽度。
4、设置content的margin值给左右内容留空间。
//html <div class="container"> <div class="content"></div> </div> <div class="left"></div> <div class="right"></div> //css .container, .left, .right{ float: left; } .container{ width: 100%; } .left{ width: 150px; margin-left: -100%; } .right{ width: 150px; margin-left: -150px; } .content{ margin: 0 150px; }
优点:
- 圣杯采用的是padding,而双飞翼采用的margin,解决了圣杯布局main的最小宽度不能小于左侧栏的缺点。
- 双飞翼布局不用设置相对布局,以及对应的left和right值。
- 通过引入相对布局,可以实现三栏布局的各种组合,例如对右侧栏设置position: relative; left: 150px; ,可以实现left+right+content的布局。
flex布局
与传统布局方式相比,flex提供了一套简洁、完整、响应式的解决方案。
可以看下flex布局学习了解一下。
这里只是简单介绍几种布局方式,display+position+float属性可以实现不同特殊效果布局展现形式,选择最适合的方案才是王道