摘要：是什么一言以蔽之，用来控制元素的内容区域的宽高与，之间的关系正常的盒模型元素的内容区域宽度元素的内容区域高度元素实际占的宽度元素实际占的高度正常显示从图中可以看出元素实际占的宽度为。
box-sizing是什么
一言以蔽之，box-sizing用来控制元素的内容区域的宽/高与padding，border之间的关系；
正常的盒模型：
元素的内容区域宽度=width；
元素的内容区域高度=height；
元素实际占的宽度=width+padding+border；
元素实际占的高度=height+padding+border；
正常显示从图中可以看出 元素实际占的宽度为 420px（10px+50px+300px+50px+10px）。
当我们在该div上设置一个 box-sizing:content-box;效果跟默认的一致，也就是说默认的盒子模型就是
box-sizing:content-box; 如下图所示：
当设置 box-sizing:border-box;时，元素的实际宽度就为 300px了，也就是实际宽度值就是 width的值，而该div的内容区的宽度则为除去 padding 和border后的宽度；如下图所示：
box-sizing:border-box;文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112898.html
摘要：如何实现如下的这种中间自适应宽度，左右两栏固定宽度布局这是一道经典的面试题，常用的方法是圣杯布局双飞翼布局。相信看完这篇文章，你就能很清楚的知道什么是圣杯和双飞翼了。在双飞翼中避免左右盒子被覆盖，是通过设置的左右来实现的。 如何实现如下的这种中间自适应宽度，左右两栏固定宽度布局？ showImg(https://segmentfault.com/img/bVbe5Dq?w=1215&h...
摘要：简评浏览器兼容性问题常常让人头疼，以下是避免出现这些问题的五个技巧。使用您可以使用，下面是我用的，来自。要解决这个问题，可以添加这个清除如果没有清除，很容易出问题。如果你让这些东西成为一种习惯，大概可以搞定九成的浏览器问题。 简评：浏览器兼容性问题常常让人头疼，以下是避免出现这些问题的五个技巧。 1. 前缀 CSS3 样式 如果您正在使用任何类型的现代 CSS 片段，例如框尺寸（box...
摘要：简评浏览器兼容性问题常常让人头疼，以下是避免出现这些问题的五个技巧。使用您可以使用，下面是我用的，来自。要解决这个问题，可以添加这个清除如果没有清除，很容易出问题。如果你让这些东西成为一种习惯，大概可以搞定九成的浏览器问题。 简评：浏览器兼容性问题常常让人头疼，以下是避免出现这些问题的五个技巧。 1. 前缀 CSS3 样式 如果您正在使用任何类型的现代 CSS 片段，例如框尺寸（box...
摘要：简评浏览器兼容性问题常常让人头疼，以下是避免出现这些问题的五个技巧。使用您可以使用，下面是我用的，来自。要解决这个问题，可以添加这个清除如果没有清除，很容易出问题。如果你让这些东西成为一种习惯，大概可以搞定九成的浏览器问题。 简评：浏览器兼容性问题常常让人头疼，以下是避免出现这些问题的五个技巧。 1. 前缀 CSS3 样式 如果您正在使用任何类型的现代 CSS 片段，例如框尺寸（box...
摘要：简评浏览器兼容性问题常常让人头疼，以下是避免出现这些问题的五个技巧。使用您可以使用，下面是我用的，来自。要解决这个问题，可以添加这个清除如果没有清除，很容易出问题。如果你让这些东西成为一种习惯，大概可以搞定九成的浏览器问题。 showImg(https://segmentfault.com/img/remote/1460000019386712); 简评： 浏览器兼容性问题常常让人头...
阅读 1968·2021-09-29 09:35
阅读 1786·2019-08-30 14:15
阅读 2944·2019-08-30 10:56
阅读 921·2019-08-29 16:59
阅读 531·2019-08-29 14:04
阅读 1267·2019-08-29 12:30
阅读 978·2019-08-28 18:19
阅读 441·2019-08-26 11:51
