关于box-sizing: border-box;

关于box-sizing: border-box;

请问一下课程中box-sizing: border-box;是什么用处的,查了一下百度:

box-sizing 属性允许你以某种方式定义某些元素,以适应指定区域。

例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。

还不明白。。。

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
思o念 2018-04-20 23:57:47

您好,我们平时的盒子模型在设置了padding和border属性后,盒子的尺寸会大于之前设置的width和height。

box-sizing是默认值时,我们设置的width和height就是内容框的宽和高,因此在设置padding和border后,盒子的尺寸是width+padding+border.

当box-sizing设置为border-box后,我们设置的width和height就变成了盒子最终的尺寸,内容框的尺寸则变成了width-padding-border.


祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
从网页搭建入门Java Web2018版
  • 参与学习           人
  • 提交作业       1088    份
  • 解答问题       10205    个

如果你有Java语言基础,又想以后从事Java Web开发,那么本路径是你的不二选择!本路径从网页搭建开始入手,通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师