发布于2021-03-23 01:25 阅读(1104) 评论(0) 点赞(12) 收藏(0)
这是我的HTML结构:
.parent{
background-color:#f7f7f7;
width: 100px;
height: 100px;
border:2px solid;
}
.child{
height: 100%;
width: 100%;
background-color:#cf5;
padding: 15px;
}
<div class="parent">
<div class="child">something</div>
</div>
正如你看到的div.child
超出div.parent
。那是因为padding: 15px;
。好吧,我该如何在CSS中进行计算:
.child{
height: (100% - the number of padding);
width: (100% - the number of padding);
}
因此,这是预期的结果:(请注意也应该有padding: 15px
)
只需添加box-sizing: border-box
到子元素。
.parent {
background-color: #f7f7f7;
width: 100px;
height: 100px;
border: 2px solid;
}
.child {
height: 100%;
width: 100%;
background-color: #cf5;
padding: 15px;
box-sizing: border-box; /* NEW */
}
<div class="parent">
<div class="child">something</div>
</div>
该CSSbox-sizing
属性为初始值content-box
。这意味着盒子模型通过添加内容加上填充加上边框来计算总宽度。高度的计算类似。
使用时border-box
,框模型在width
/height
计算中包括填充和边框。
(请注意,边距始终在计算之外;无论在content-box
还是中,都将附加它们border-box
。)
第二种可能性(可能比效率低box-sizing
)是CSScalc
函数:
.parent {
background-color: #f7f7f7;
width: 100px;
height: 100px;
border: 2px solid;
}
.child {
height: calc(100% - 30px); /* NEW */
width: calc(100% - 30px); /* NEW */
background-color: #cf5;
padding: 15px;
}
<div class="parent">
<div class="child">something</div>
</div>
作者:黑洞官方问答小能手
链接:http://www.qianduanheidong.com/blog/article/41799/39e7b5507eb17560b7f1/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!