一.定位
- relative： 相对与正常文档流偏移，仍占据原先位置，发生偏移时可能覆盖其他元素。
- static： 默认方式。
- absolute：脱离标准文档流，相对于最近一层包含元素，属性不是static的元素偏移。
- inherit: 从父元素继承 position 属性的值。
- sticky: css3新增，最初被当作relative对待，超过一定阈值会被当作fixed对待，相对视口定位。
- fixed： 脱离标准文档流，相对于视口定位。
二.浮动
浮动有左浮动和右浮动，浮动的元素会脱离文档流，浮动最初是用来做文字环绕的。
清楚浮动的方法
1.受影响的元素clear: left|right|box;
2.父级元素设置overflow：hidden;
3.最佳实践：
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
.clearfix{
*zoom: 1;
}
三.多列布局
body {margin: 0;padding: 0;}
.body {width: 100%;height: 200px;background-color: #ccc;}
.left,
.right,
.content {
box-sizing: border-box;
padding: 10px;
}
.left {float: left;width: 200px;height: 100%;background-color: #e1e1e1;}
.right {float: right;width: 200px;height: 100%;background-color: #f3f5f6;}
.content {
padding: 10px;
overflow: auto; /*让content的padding生效*/
height: 100%;
background-color: #009a61;
}
<div class="body">
<div class="left">这是左边的内容部分</div>
<div class="right">这是右边的内容部分</div>
<!-- content必须放在最后 -->
<div class="content">这是中间的内容区域</div>
<br>
<div class="left">这是左边的内容部分</div>
<!-- content必须放在最后 -->
<div class="content">这是中间的内容区域</div>
<div class="right">这是右边的内容部分</div>
<br>
<!-- content必须放在最后 -->
<div class="content">这是中间的内容区域</div>
<br>
<div class="right">这是右边的内容部分</div>
<div class="right">这是右边的内容部分</div>
<div class="right">这是右边的内容部分</div>
<!-- content必须放在最后 -->
<div class="content">这是中间的内容区域</div>
</div>
layout.png
四.flex布局
.container {
display: -webkit-flex;
display: flex;
}
.box {
width: 200px;
height: 200px;
background-color: #f23b56;
margin-left: 15px;
}
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
layout1.png
兼容到IE10+,做多列布局挺合适的
四.移动端布局
- 媒介查询
@media screen and (max-width: 750px) {
.box {
height: 200px;
background-color: #f34434;
}
}
@media screen and (min-width: 750px) {
.box {
height: 200px;
background-color: #333333;
}
}
- flex弹性盒子布局
flex布局做移动端布局还是很不错的[传送门]:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?^%$ - rem响应式布局
rem响应式布局适合做移动端复杂的页面，[传送门]:http://zcox.me/2017/10/20/daily10-20/
