响应式栅栏布局 任务八 : 响应式网格(栅格化)布局
目标:实现效果如图
知识点
-
CSS3属性box-sizing的使用: 当元素的宽度、高度确定时,{ box-sizing : border-box }将元素的padding, border都将在设定的高度和宽度内绘制;也就是说,无论你的padding和border如何变化,它都不会超出预先设定好的宽度和高度. -
清楚浮动防止高度塌陷: 设外层元素为container, 内层为content,应用了float属性的内层元素content高度一旦超过container,container就无法完全包裹content,就造成了高度塌陷.解决办法:父级元素应用
::after选择器.
.container: after {
content: " ";
display: table;
clear: both;
}
-
CSS3属性:@media主要用于为不同设备提供不同的属性, 参考文档: CSS|MDN、
CSS3 media querise;
本次练习代码示例:
index.html文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./public/index.css">
<title></title>
</head>
<body>
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="content"></div>
</div>
<div class="col-md-4 col-sm-6">
<div class="content"></div>
</div>
<div class="col-md-4 col-sm-12">
<div class="content"></div>
</div>
<div class="col-md-3 col-sm-3">
<div class="content"></div>
</div>
<div class="col-md-6 col-sm-6">
<div class="content"></div>
</div>
<div class="col-md-3 col-sm-3">
<div class="content"></div>
</div>
<div class="col-md-1 col-sm-2">
<div class="content"></div>
</div>
<div class="col-md-1 col-sm-2">
<div class="content"></div>
</div>
<div class="col-md-2 col-sm-8">
<div class="content"></div>
</div>
<div class="col-md-2 col-sm-3">
<div class="content"></div>
</div>
<div class="col-md-6 col-sm-3">
<div class="content"></div>
</div>
</div>
</body>
</html>
master.css文件
* {
box-sizing: border-box;
}
[class*= 'col-'] {
float: left;
height: 70px;
padding: 10px;
}
.content {
border: 1px solid #999;
background-color: #eee;
height: 50px;
}
@media only screen and (min- 768.1px) {
.col-md-1 {
8.333%;
}
.col-md-2 {
16.666%;
}
.col-md-3 {
25%;
}
.col-md-4 {
33.333%;
}
.col-md-5 {
41.666%;
}
.col-md-6 {
50%;
}
.col-md-8 {
66.666%;
}
.col-md-12 {
100%;
}
}
@media only screen and (max- 768px) {
.col-sm-1 {
8.333%;
}
.col-sm-2 {
16.666%;
}
.col-sm-3 {
25%;
}
.col-sm-4 {
33.333%;
}
.col-sm-5 {
41.666%;
}
.col-sm-6 {
50%;
}
.col-sm-8 {
66.666%;
}
.col-sm-12 {
100%;
}
}
.row:after {
display: table;
content: " ";
clear: both;
}
(如有错漏 欢迎指正);