早初,当我们设计某些板块内容时,我们总会给它一个height值,让它刚好适合内容大小,比如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style type="text/css">
.con{
height: 100px;
width: 400px;
background-color: #9fcdff;
color: black;
}
</style>
<body>
<div class="con">
<p>好好学习天天向上</p>
<p>好好学习天天向上</p>
<p>好好学习天天向上</p>
</div>
</body>
</html>
然而在设计的过程中,我们难免会遇到代码内容临时修改的现象,比如我们再在div里增加多了几个<p>标签内容:
<div class="con">
<p>好好学习天天向上</p>
<p>好好学习天天向上</p>
<p>好好学习天天向上</p>
<p>好好学习天天向上</p>
<p>好好学习天天向上</p>
</div>
这时的运行起来就会超出div的height值,我们还要重新修改height长度的话,就会过于麻烦。
有没有什么办法可以让长度随着内容的多少进行自适应呢?
.con{
/* height: 100px;*/
padding-bottom: 10px;
width: 400px;
background-color: #9fcdff;
color: black;
}
很简单,这里我们只需要把height属性去掉,给它一个padding-bottom的值,就可以了。
这样,无论我们的内容增加了还是减少了,div的长度都会自适应的,是不是简单轻松多了。
个人实战参考网站:https://www.aiadmin.com/user/reg_5.html