首页 > 关于盒模型的几个问题

关于盒模型的几个问题

这是我对一个div设置的css样式,然后有几个问题不明白;

  1. 我设置的width是200px,但是在审查元素的盒模型里就成了183?
    宽度不是默认content-box吗?

2, 内容区为什么在右边会留下一段空白?这是给滚动条预留位置吗?

  1. 滚动条的宽度是根据什么来算的,怎么让他变宽?

感谢~

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8" />
<title>Document</title>
<style>
    div{
        margin: 25px; padding: 25px; width: 200px; height: 200px; border: solid 25px blue; background-color: yellow; overflow: scroll;
    }
</style>

</head>
<body>


<div>
    你好ff灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌方法反反复复反复反复反复方法方法反反复复反复反复反复反福福福福福福福福福方法方法反反复复反复反复反复方法方法反反复复反复反复反复哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>

</body>
</html>


滚动条会占据一定宽度,看情况了,大部分手机系统的滚动条不占宽度,右边多的是因为不够容下一个汉字的,折行了。


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
    .a {
        margin: 25px; padding: 25px; width: 200px; height: 200px; border: solid 25px blue; background-color: yellow; overflow: scroll;
    }
    .b {
        width: 200px; height: 200px;
        overflow: hidden;
    }
</style>
</head>
<body>
<div class="a">
    <div class="b">
        你好ff灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌方法反反复复反复反复反复方法方法反反复复反复反复反复反福福福福福福福福福方法方法反反复复反复反复反复方法方法反反复复反复反复反复哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    </div>
</div>
</body>
</html>

【热门文章】
【热门文章】