盒模型问题
来源：12-13 距离产生美 - 使用margin为盒子设置外边距（边界）
技术的人生
2017-07-14 14:49
<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>
运行结果如图：
填充即使没有声明，不是已经指定了内容的宽度和高度吗？为什么会内容一直往右？还有内容宽度还可以超出边框？？？不懂。。。
写回答
关注
5回答
-
- 慕粉1606344302
- 2017-07-14 15:38:17
需要加一句强制换行的代码word-wrap: break-word; 中文可以自动转行、换行，但是连续英文和数字则会撑破设置的300px宽度，这个也算是浏览器兼容问题吧！
-
- 熊猫猫的小窝
- 2017-07-14 15:49:10
word-wrap:break-word;用这个给box1，就可以解决。或者你把单词加空格也可以解决
-
- LAU
- 2017-07-14 15:36:37
中文字体会自动换行，但是英文和数字不会自动换行。为实现换行效果，可以给div添加属性word-wrap:break-word 即强制换行
-
- LAU
- 2017-07-14 15:35:54
指定div格式被后来的指定的box1覆盖
-
- 瘦鲁鲁
- 2017-07-14 15:33:41
中文字体会自动换行，但是英文和数字不会自动换行。为实现换行效果，可以给div添加属性word-wrap:break-word 即强制换行
初识HTML(5)+CSS(3)-升级版
HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义
1225293 学习 · 18230 问题
相似问题