为了账号安全,请及时绑定邮箱和手机立即绑定

盒模型问题

<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>

运行结果如图:

http://img1.sycdn.imooc.com//596868690001875a06480596.jpg

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

正在回答

5 回答

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

0 回复 有任何疑惑可以回复我~

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

0 回复 有任何疑惑可以回复我~

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

0 回复 有任何疑惑可以回复我~

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

0 回复 有任何疑惑可以回复我~
#1

LAU

不对不对
2017-07-14 回复 有任何疑惑可以回复我~

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

4 回复 有任何疑惑可以回复我~
#1

技术的人生 提问者

谢谢,那我再问下,我发现设置的height只要文字过多就会超出边框范围,无论是否设置底部填充以及内容高度,那这height设置有什么意义呢???
2017-07-14 回复 有任何疑惑可以回复我~
#2

瘦鲁鲁 回复 技术的人生 提问者

设置宽高后,div大小固定,不会因内容多少改变大小,如果不想内容超出div显示,可以添加overflow:auto;当内容超出div时,div自动添加滚动条显示
2017-07-17 回复 有任何疑惑可以回复我~
#3

技术的人生 提问者 回复 瘦鲁鲁

谢了,美女
2017-07-17 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
初识HTML(5)+CSS(3)-升级版
  • 参与学习       1225786    人
  • 解答问题       18234    个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

进入课程

盒模型问题

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信