CSS盒子模型及box-sizing属性实例分析

本文小编为大家详细介绍“CSS盒子模型及box-sizing属性实例分析”，内容详细，步骤清晰，细节处理妥当，希望这篇“CSS盒子模型及box-sizing属性实例分析”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。CSS 基础框盒模型是 CSS 规范的一个模块，它定义了一种长方形的盒子, 包括它们各自的内边距（padding）与外边距（margin
），并根据视觉格式化模型来生成元素，对其进行布置、编排、布局。常被直译为盒子模型、盒模型或框模型。盒模型有以下分类：标准定义：标准盒模型怪异模式盒模型元素类型块级盒子内联盒子行内块宽度width = 内容宽度(content) + padding + border + margin内容宽度仅仅只有content。如果设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。宽度width = 内容宽度(content + padding + border) + margin内容宽度包含了content、border、padding。如果将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。box-sizing属性有以下两个属性值。box-sizing属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框等。例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 “border-box”。这样就可以让浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。默认情况下，元素的宽度(width) 和高度(height)计算方式如下：width(宽度) + padding(内边距) + border(边框) = 元素实际宽度height(高度) + padding(内边距) + border(边框) = 元素实际高度默认值，使用标准盒子模型。以上代码在浏览器中的渲染的实际宽度是390px。使用怪异模式盒子模型。以上代码在浏览器中的渲染的实际宽度就是350px。示例如下：输出结果：示例二：使用“box-sizing:border-box”可以让前端开发人员减少很多工作。上面head部分中的第一个样式确保所有元素都以这种更直观的方式调整大小。
你设置的宽度就是实际的宽度，不需要考虑内边距和边框：输出结果：一个被定义成块级的（block）盒子会表现出以下行为：盒子可以占据父容器的所有可用空间每个盒子都会换行width和height属性可以发挥作用默认情况下h2-h7、p、p、section都处于block状态一个被定义成内联的（inline）盒子会表现出以下行为：盒子不会产生换行width和height属性将不起作用默认情况下用做链接的a元素、span、em以及strong都处于inline状态如果不希望一个项切换到新行，但希望它可以设定宽度和高度，此时我们可以将该元素设置为inline-block。1个值：四个方向2个值：上下、左右3个值：上、左右、下4个值：上、右、下、左10px、双实线、红色边框。读到这里，这篇“CSS盒子模型及免费云主机、域名box-sizing属性实例分析”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注云技术行业资讯频道。

相关推荐: html如何设置图片链接

这篇文章主要讲解了“html如何设置图片链接”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“html如何设置图片链接”吧！ 方法一：使用a标签在HTML中，使用a标签可以设置链接。如果我们需要设置图片链接，只需要…