今天在练习九宫格的时候发现一个宽度为450px的父级div不足以放下三个宽度均为150px的子div，一开始十分郁闷，然后尝试给所有子div一个不同的background-color，发现两个子div之间存在小间隔，忽然意识到是浏览器将html的换行符（回车）、空格tab键全都当做空格进行渲染。怎么办呢？
解决办法：给子div加上
float: left；九宫格练习代码献上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>九宫格</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="main">
<div class="container">
<div class="box red ">1</div>
<div class="box orange">2</div>
<div class="box yellow">3</div>
<div class="box green">4</div>
<div class="box blue">5</div>
<div class="box purple">6</div>
<div class="box greenBlue">7</div>
<div class="box pink">8</div>
<div class="box yellowGreen">9</div>
</div>
</div>
<footer class="footer"></footer>
</body>
</html>/**********CSS预设样式**********/
* {/*清除页面中标签自带的外间距和内填充*/
margin: 0;
padding: 0;
}
ul, li {/*清除ul自带的列表符*/
list-style: none;
}
a {/*去掉a自带的下划线*/
text-decoration: none;
}
img {/*去掉img自带的边框<当图像加上a标签后，IE浏览器在不去除图像边框时会显示边框>*/
border: none;
}
html {
height:100%;
}
body {
min-height: 100%;
position: relative;
}
.main {/* main的padding-bottom值要等于或大于footer的height值 */
padding-bottom: 100px;
}
.main .container {
width: 450px;
height:450px;
background: #333;
}
.main .container .box {
width:150px;
height:150px;
display: inline-block;
text-align: center;
line-height: 150px;
float: left; /*解决浏览器将 换行符、空格、tab当做空格处理而使得div之间出现间隔的现象*/
}
/*9宫格颜色*/
.red {
background-color: red;
}
.orange {
background-color: orange;
}
.yellow {
background-color: yellow;
}
.green {
background-color: green;
}
.blue {
background-color: rgb(43, 112, 241);
}
.purple {
background-color: purple;
}
.greenBlue {
background-color: #00ccff;
}
.pink {
background-color: pink;
}
.yellowGreen {
background-color: yellowgreen;
}
/*页脚*/
.footer {
position: absolute;
height: 100px;
width: 100%;
bottom: 0;
background: #777;
}
1308
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
