Post by account_disabled on Jan 31, 2024 8:24:58 GMT
也许理解 CSS 最重要的一点是：一切都是盒子。更具体地说，文档中的每个元素都会生成一个框。该框可能是块级框，也可能是内联级框。框类型决定元素如何影响页面布局。 盒模型是用于描述 HTML 元素的布局和大小的概念。每个元素都包含一个用于容纳其内容、内边距、边框和边距的框。这些框组合起来确定元素的内容布局以及相邻元素如何在其旁边显示： 元素是否创建框以及创建哪种类型的框将取决于标记语言。CSS 是作为 HTML 文档样式设计的一种方式而开发的，因此，CSS 视觉渲染模型的大部分都植根于 HTML 块级元素和内联元素之间的区别。p默认情况下，和等元素section创建块级框，但a、span和 等em元素创建内联框。另一方面，SVG 不使用盒模型，因此大多数与布局相关的 CSS 属性无法与 SVG 配合使用。 块级框创建新的内容块，如图 4.1 所示。块级框根据其源顺序垂直呈现，并且（表格除外）扩展以填充其包含元素的可用宽度。
这称为正常流。块级框具有display value of block、list-item、table或任何值table-*（例如table-cell）。 图 4.1。包含元素内包含 h1、p、ul 和 table 元素的块级框（灰色区域） 相比之下，内联级框不会形成新的内容块。相反，这些框组成了块框内的线条。它们水 WhatsApp 号码数据 平显示并填充包含框的宽度，必要时可以跨行换行，如图 4.2 所示。内联级框的display值为inline、inline-block、inline-table或ruby。 Learn to Code with JavaScript 图 4.2。应用了 margin: 1em 和 padding: 5px 的内联框示例 但是盒子的尺寸是如何计算的呢？这是事情变得更加复杂的地方。如图 4.3 所示，框尺寸是框的内容区域加上其内边距宽度和边框宽度的总和。页边距宽度为元素创建一个页边距框，并影响文档中的其他元素；但是，边距宽度对框本身的尺寸没有影响。 图 4.3。CSS 2.1 盒子模型 例如，p带有width: 300px、padding: 20px、 和的元素border: 10px的计算宽度为 360 像素。
这是其宽度、左右填充以及左右border-width属性的总和。要创建 300 像素宽、20 像素填充和 10 像素边框的元素，需要width为240px. 大多数主流浏览器都是以这种方式计算宽度的。 CSS 工作组引入了该属性，部分是为了解决浏览器竞争模型的问题box-sizing。它允许我们选择我们喜欢的盒模型实现，并在使用响应式设计时大大简化计算。 选择盒子模型box-sizing 该box-sizing属性在 CSS 基本用户界面模块级别 3 规范中定义。它有两个可能的值：content-box和border-box。 box-sizing最初，的值为content-box。使用此值，设置元素的width和height属性会影响其内容区域的大小。这符合 CSS 2.1 规范定义的行为，并且是现代浏览器中的默认行为（如图 4.4 所示）。 将 的值设置box-sizing为 会border-box产生一点神奇效果。width现在，和的值height将应用于外边框边缘而不是内容区域。边框和填充在元素框内部绘制，与旧的 Internet Explorer 5.5 行为相匹配。
这称为正常流。块级框具有display value of block、list-item、table或任何值table-*（例如table-cell）。 图 4.1。包含元素内包含 h1、p、ul 和 table 元素的块级框（灰色区域） 相比之下，内联级框不会形成新的内容块。相反，这些框组成了块框内的线条。它们水 WhatsApp 号码数据 平显示并填充包含框的宽度，必要时可以跨行换行，如图 4.2 所示。内联级框的display值为inline、inline-block、inline-table或ruby。 Learn to Code with JavaScript 图 4.2。应用了 margin: 1em 和 padding: 5px 的内联框示例 但是盒子的尺寸是如何计算的呢？这是事情变得更加复杂的地方。如图 4.3 所示，框尺寸是框的内容区域加上其内边距宽度和边框宽度的总和。页边距宽度为元素创建一个页边距框，并影响文档中的其他元素；但是，边距宽度对框本身的尺寸没有影响。 图 4.3。CSS 2.1 盒子模型 例如，p带有width: 300px、padding: 20px、 和的元素border: 10px的计算宽度为 360 像素。
这是其宽度、左右填充以及左右border-width属性的总和。要创建 300 像素宽、20 像素填充和 10 像素边框的元素，需要width为240px. 大多数主流浏览器都是以这种方式计算宽度的。 CSS 工作组引入了该属性，部分是为了解决浏览器竞争模型的问题box-sizing。它允许我们选择我们喜欢的盒模型实现，并在使用响应式设计时大大简化计算。 选择盒子模型box-sizing 该box-sizing属性在 CSS 基本用户界面模块级别 3 规范中定义。它有两个可能的值：content-box和border-box。 box-sizing最初，的值为content-box。使用此值，设置元素的width和height属性会影响其内容区域的大小。这符合 CSS 2.1 规范定义的行为，并且是现代浏览器中的默认行为（如图 4.4 所示）。 将 的值设置box-sizing为 会border-box产生一点神奇效果。width现在，和的值height将应用于外边框边缘而不是内容区域。边框和填充在元素框内部绘制，与旧的 Internet Explorer 5.5 行为相匹配。