盒模型问题

源自：12-13 距离产生美 - 使用margin为盒子设置外边距（边界）

盒模型问题

<style type="text/css">
div{
    width:300px;
    height:300px;
   border:1px solid red;
}
#box1{
    margin-bottom:30px;
}
</style>
</head>
<body>
    <div id="box1">box1box1box1box1box1box1box1box1box1box1box1box1box1box1box1box1</div>
    <div id="box2">box2</div>
</body>
</html>

运行结果如图：

填充即使没有声明，不是已经指定了内容的宽度和高度吗？为什么会内容一直往右？还有内容宽度还可以超出边框？？？不懂。。。

提问者：技术的人生 2017-07-14 14:49

个回答

慕粉1606344302

2017-07-14 15:38:17

已采纳

需要加一句强制换行的代码word-wrap: break-word; 中文可以自动转行、换行，但是连续英文和数字则会撑破设置的300px宽度，这个也算是浏览器兼容问题吧！

0
熊猫猫的小窝

2017-07-14 15:49:10

word-wrap:break-word;用这个给box1，就可以解决。或者你把单词加空格也可以解决

0
LAU

2017-07-14 15:36:37

中文字体会自动换行，但是英文和数字不会自动换行。为实现换行效果，可以给div添加属性word-wrap:break-word 即强制换行

0
LAU

2017-07-14 15:35:54

指定div格式被后来的指定的box1覆盖

0
瘦鲁鲁

2017-07-14 15:33:41

中文字体会自动换行，但是英文和数字不会自动换行。为实现换行效果，可以给div添加属性word-wrap:break-word 即强制换行

4