一句话简述border-box和content-box的区别
.login_form{position: absolute;bottom: 0;width: 100%;padding: 0 10px;// box-sizing: border-box;}设置表单时,想让表单离边缘有点距离就设置个padding: 0 10px;但是效果如下我们会发现此时输入框已经超出边界,原因是什么呢?因为表单盒子模型boder-sizing是设置为content-box,c
·
.login_form{
position: absolute;
bottom: 0;
width: 100%;
padding: 0 10px;
// box-sizing: border-box;
}
设置表单时,想让表单离边缘有点距离就设置个padding: 0 10px;但是效果如下
我们会发现此时输入框已经超出边界,原因是什么呢?
因为表单盒子模型boder-sizing是设置为content-box,
content-box最大的特点是计算盒子宽高时会把padding和border的长度算进来(外边距不会算进来),故这边加了内边距自然会越界。而border-box则是你宽和高设置为多少,则这个盒子的宽高就是多少。所以我们只需把表单的border-sizing设置为border-box即可
盒子模型图:
此图截至:
动画解释 CSS 盒子模型、布局方式、box-sizing、替换元素和边距塌陷

GitCode 天启AI是一款由 GitCode 团队打造的智能助手,基于先进的LLM(大语言模型)与多智能体 Agent 技术构建,致力于为用户提供高效、智能、多模态的创作与开发支持。它不仅支持自然语言对话,还具备处理文件、生成 PPT、撰写分析报告、开发 Web 应用等多项能力,真正做到“一句话,让 Al帮你完成复杂任务”。
更多推荐
所有评论(0)