为什么发生了盒模型溢出？没有明白

首页课程实战体系课手记专栏慕课教程

为什么发生了盒模型溢出？没有明白

来源：3-3 表示层--图片区域

Yuri沫

2019-02-09 13:22:04

span的margin是怎么导致盒模型溢出，需要用到滚动条的？

写回答

2回答

慕函数12138

2019-02-14

是因为span加nav加div，整体计算下来，超出了body的长度。虽然你看不到，我自己写的时候尝试设置小了一点，就不用加溢出，就没有滚动条。以下是我的代码，参考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全屏的云南旅游相册</title>
    <link rel="stylesheet" href="css.css">
</head>
<body>

<span class="fists"></span>
<nav>
    <a href="#">泸沽湖</a>
    <a href="#">丽江古城</a>
    <a href="#">茶马古道</a>
    <a href="#">就这家·云逸客栈</a>
    <a href="#">西双版纳</a>
    <a href="#">云南红酒庄</a>
    <a href="#">轿子雪山</a>
    <a href="#">普者黑</a>
    <a href="#">海埂大坝</a>
    <a href="#">玉龙湾</a>
    <a href="#">昆明郊野公园</a>
    <a href="#">欧洲风琴小镇</a>
</nav>
<div>
    <img src="images/1.jpg">
    <img src="images/2.jpg">
    <img src="images/3.jpg">
    <img src="images/4.jpg">
    <img src="images/5.jpg">
    <img src="images/6.jpg">
    <img src="images/7.jpg">
    <img src="images/8.jpg">
    <img src="images/9.jpg">
    <img src="images/10.jpg">
    <img src="images/11.jpg">
    <img src="images/12.jpg">
</div>
</body>
</html>

* {
    padding: 0;
    margin: 0;
}

body {
    background-color: antiquewhite;
}

.fists {
    display: block;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    margin: 30px auto 45px;
}

nav {
    width: 78.8vw;
    display: flex;
    justify-content: space-between;
    margin: 10px auto 25px;
    position: relative;
}

nav > a {
    background-color: #fff;
    border: 2px solid seagreen;
    padding: 2px;
    text-decoration: none;
    font-size: 17px;
    color: aqua;
    position: relative;
}

nav:before {
    display: block;
    content: '';
    background-color: #fff;
    width: 100%;
    height: 10px;
    position: absolute;
    top: 10px;
}
div{
    position: relative;
    overflow: hidden;
    width: 78.8vw;
    height: 75vh;
    margin: 0 auto;
    background-color: #fff;
}
div>img{
   position: absolute;
    width: 98%;
    height: 96%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}