前端的奇淫巧技

1.编辑网页时，在body添加透明背景色，便于观察每个区域的大小。

*{
 background: rgba(0,0,0,0.1);
}

2.创建分列标准

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9{
 display: block;
 position: relative;
 min-height: 1px;
 float: left;
}
.col-1{
 width: 10%;
}
.col-2{
 width: 20%;
}
.col-3{
 width: 30%;
}
.col-4{
 width: 40%;
}
.col-5{
 width: 50%;
}
.col-6{
 width: 60%;
}
.col-7{
 width: 70%;
}
.col-8{
 width: 80%;
}
.col-9{
 width: 90%;
}

放进容器里

.container{
 max-width: 1080px;
 margin:0px auto;
 clear: both; 
}

3.清除浮动

.clear:before,
.clear:after
 {
  display:block;
  content:" ";
 clear:both;
}