css - 关于盒模型的几个问题
本文介绍了css - 关于盒模型的几个问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
这是我对一个div设置的css样式，然后有几个问题不明白；
我设置的width是200px，但是在审查元素的盒模型里就成了183？
宽度不是默认content-box吗？
2, 内容区为什么在右边会留下一段空白？这是给滚动条预留位置吗？
滚动条的宽度是根据什么来算的，怎么让他变宽？
感谢~
<!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>
这篇关于css - 关于盒模型的几个问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
