块级元素不设置宽度时默认占父元素的100%~如果块级元素没有设置大小~同时又给该块级元素设置了绝对定位~那它会缩成一个点~下面一段代码：
<!DOCTYPE html>
<html>
<head ln="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
<title>hehe</title>
<style>
.div1 {
background-color: #c0c;
}
.div2 {
border: 1px solid red;
}
.div3 {
height: 32px;
width: 32px;
border:1px solid lightgreen;
}
</style>
</head>
<body id="main">
<div class="div1">
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>
运行结果如下：
可以看到~父元素没有设置大小~未设置大小的子元素的宽占满整个父元素的宽~设置了大小的子元素则按设置的大小显示
如果给父元素加一个绝对定位~修改如下：
<!DOCTYPE html>
<html>
<head ln="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
<title>hehe</title>
<style>
.div1 {
background-color: #c0c;
position: absolute;/*设置父元素为绝对定位*/
}
.div2 {
border: 1px solid red;
}
.div3 {
height: 32px;
width: 32px;
border:1px solid lightgreen;
}
</style>
</head>
<body id="main">
<div class="div1">
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>
运行结果为：
父元素没有设置大小~此时如果把定位设为绝对定位~那原本父元素应该会缩到左上角变为一个点~但是因为父元素的子元素总有一个子元素设置了大小~所以父元素缩小到刚好包住子元素就不能在缩小了
时间： 2024-08-08 13:59:21