                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

为什么box2高度不受box1限制，宽度受限制？

在box2中输入更多的文字，会发现宽度始终被限制在box1宽度中，而高度则随着文字的增多，行数增加，而向下超出box1。这是什么原理？

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>相对参照元素进行定位</title>
<style type="text/css">
div{border:2px red solid;}
#box1{
    width:200px;
    height:200px;
    position:relative;         
}
#box2{
     position:absolute;
    top:20px;
    left:30px;          
}
</style>
</head>

<body>
<div id="box1">
    <div id="box2">文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</div>
</div>
</body>
</html>

白石青

2016-12-28

源自：初识HTML(5)+CSS(3)-升级版 13-9

关注问题我要回答

1181

操作

收起

5 回答

慕莱坞7559429 回答被采纳 +3 积分
2016-12-28

以下纯属个人见解，大牛勿喷，出错请多指教：

box2设置的是position：absolute，是相对于box1（position：relative）进行定位，但是设置了绝对定位的元素实际上已经脱离文档流，因此box2的宽高实际上不受box1的影响，，在你这段代码里box2的高度是会随着文本的增多而增大，因为你没设置box2自身的宽高，（要想box2内容不超出box1可以设置box2的宽高还有overflow:hidden；）下面我贴出我改的代码，你看下能不能理解：

解释box2的宽高是由文本撑开决定：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>相对参照元素进行定位</title>
<style type="text/css">
div{border:2px red solid;}
#box1{
    width:200px;
    height:200px;
    position:relative;         
}
#box2{
     position:absolute;
    top:0px;
    left:-30px;          
}
</style>
</head>
 
<body>
<div id="box1">
    <div id="box2">文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</div>
</div>
</body>
</html>

要使得box2的内容不超出box1

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>相对参照元素进行定位</title>
<style type="text/css">
div{border:2px red solid;}
#box1{
    width:200px;
    height:200px;
    position:relative;         
}
#box2{
     position:absolute;
    top:0px;
    left:0px;  
    width: 200px;
    height: 200px; 
    overflow: hidden;       
}
</style>
</head>
 
<body>
<div id="box1">
    <div id="box2">文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</div>
</div>
</body>
</html>

因为不知道你想实现的效果，所以就在这里大致说下，希望能看得懂（有点啰嗦了~~）

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

收起回答

白石青提问者

第二段程序，因为你设置了box2和box1相同的宽和高，并且，定位数据的top和left都是0，也就是和box1重合。如果将这两个0设为其他参数，比如都设置为10px，那么，box2仍然是超出box1的，也就是说这里的overflow:hidden没有起到作用。而如果把box1的relative和box2的absolute取消，也就是不设置定位，那么hidden就生效使box2被限制在box1中了。兄弟你试一试是不是我说的这样。如果没错的话，这是什么原因呢？

2016-12-28 回复有任何疑惑可以回复我~

慕莱坞7559429 回复白石青提问者

首先，设置overflow:hidden的作用是为了让box2中文本的内容不超出，而不是为了box2在box1中不超出。其次，我上面应该没说清楚，因为你在box2中设置了position:absolute，这个时候box2其实已经脱离了box1的文档流了。（不受box1控制，但可以利用top和left等对box2进行定位，使box2看起来还是在box1里）。你把box1跟box2的定位都去掉的话，也就是两个都属于正常的文档流，页面也就可以按照标准文档流模式正常的显示了。

2016-12-28 回复有任何疑惑可以回复我~

白石青提问者回复慕莱坞7559429

谢谢解惑

2016-12-28 回复有任何疑惑可以回复我~