任務八 : 響應式網格(柵格化)布局
目標:實現效果如圖
知識點
-
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-width: 768.1px) {
.col-md-1 {
width: 8.333%;
}
.col-md-2 {
width: 16.666%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33.333%;
}
.col-md-5 {
width: 41.666%;
}
.col-md-6 {
width: 50%;
}
.col-md-8 {
width: 66.666%;
}
.col-md-12 {
width: 100%;
}
}
@media only screen and (max-width: 768px) {
.col-sm-1 {
width: 8.333%;
}
.col-sm-2 {
width: 16.666%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-4 {
width: 33.333%;
}
.col-sm-5 {
width: 41.666%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-8 {
width: 66.666%;
}
.col-sm-12 {
width: 100%;
}
}
.row:after {
display: table;
content: " ";
clear: both;
}
(如有錯漏 歡迎指正);