设置float和inline-block的细微差别
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>work3.8</title> <link rel="stylesheet" type="text/css" href="../css/work3.8.css"> <script type="text/javascript" src="../js/work3-8.js"></script> </head> <body> <!--主div--> <div id="main" class="main"> <!--导航栏--> <div class="nav" id="nav"> <div class="nav-child"> <a href="javascript:void(0)">首页</a> </div> <div class="nav-child"> <a href="javascript:void(0)">点击看看</a> </div> <div class="nav-child"> <a href="javascript:void(0)">会自动的</a> </div> <div class="nav-child"> <a href="javascript:void(0)">我的网站</a> </div> </div> <!--图片区--> <div class="img" id="img"> <div class="img-child"></div> <div class="img-child"></div> <div class="img-child"></div> <div class="img-child"></div> </div> </div> </body> </script> </html>
/*全局样式设置*/
* {
padding: 0;
margin: 0;
}
.main {
width: 1200px;
height: 520px;
margin: 50px auto;
border: 1px solid #F5F5F5;
font-family: "Microsoft YaHei";
--ye: #ffcc00;
--wh: #fff;
--gr: #666;
}
/*a标签样式设置*/
a {
text-decoration: none;
color: var(--gr);
font-size: 20px;
}
/*导航栏及其子div设置*/
.nav {
width: 100%;
height: 60px;
}
.nav-child {
width: 25%;
height: 60px;
line-height: 60px;
text-align: center;
/*float: left;*/
display: inline-block;
background-color: var(--wh);
}
/*图片区及子div设置*/
.img {
position: relative;
width: 100%;
height: 460px;
}
.img-child {
width: 100%;
height: 100%;
position: absolute;
}
/*图片背景设置*/
.img > div:nth-of-type(1) {
background: url('../img/1.jpg') no-repeat;
z-index: 9999;
}
.img > div:nth-of-type(2) {
background: url('../img/3.jpg') no-repeat;
}
.img > div:nth-of-type(3) {
background: url('../img/4.jpg') no-repeat;
}
.img > div:nth-of-type(4) {
background: url('../img/5.jpg') no-repeat;
}
为什么设置inline-block不能完全铺满父div的宽度?float方式就可以?
11
收起
正在回答
1回答
同学你好，关于同学的问题解答如下：
1、设置inline-block不是不能完全铺满父div的宽度，而是超出了父容器的宽度。这是因为inline-block之间有默认的间距。
2、设置为float以后，块与块之间就没有了默认间距。
3、例：
box1和box2的宽度和为400px，按理说应该是刚好在一行排列，但是我们看下效果：
box2被挤到了下一行，这就是行内块之间有默认间隙，使用margin：0和padding：0是清除不掉的。我们可以把父盒子的宽度稍微调大点，效果会更加明显：
但是使用float就不会有这样的情况，这也就是为什么我们一般使用浮动来布局，而不用行内块。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星