|
Post by account_disabled on Nov 25, 2023 9:25:10 GMT
下面是每个字段的可视化。想象一下这组嵌套框就像您在网页上看到的常规按钮元素: Margal 区域、订单区域、填充区域、内容区域 请注意,填充区域仍然位于元素内部。元素的背景将扩展到包括填充区域。反过来,边框区域和边距区域会扩展超过定义背景颜色的点。这是盒模型的特殊行为。 展示 除了盒子的尺寸之外,浏览器还必须知道每个元素相对于附近元素的显示方式。元素可以设置四种流行的显示类型以使用 CSS。 他们来了: 块:具有块显示值的元素,从新行开始并占据该行的整个宽度。 内联: 与元素周围的元素对齐,仅占用其内容、填充和边框区域所需的空间。在具有块外观的元素的内容字段中,块的值必须是块的父元素的值的 100%。 内联块: 与上面相同,但能够为元素提供任意定义的框字段值,其中不可能将简单的内联显示功能应用于元素。这一附加功能的价值在于能够为您不想强行放入其自己的行中的元素定义填充和边距。 None(不存在的东西,英文称为none): 该元素 电话号码清单 是不可见的,并且不会在页面上留下任何空白空间,无论您将其设置为什么尺寸。这实际上表明从页面中删除元素并没有完全消失,而是继续存在于站点的代码中。 让我们重申一下这些要点,以确保我们完全掌握基本概念: 屏蔽元素:块始终放置在自己的行上,无论其宽度是多少。块元素通常是大块的结构/内容,例如容器、段落、列表和标题。 这是具有块级别的元素内的内容。 屏蔽元素:内联可以被认为是段落中的单词。它们与其他内联元素内联流动。内联元素的宽度和高度是由浏览器根据其内部内容自动计算的;您无法调整内联元素的宽度或高度。内联元素通常是较小的内容片段,与其他内联元素和文本一起放置在块元素内。示例包括链接、图像和文本开头。 屏蔽元素:内联块也出现内联;然而,不同之处在于内联块元素的宽度、高度可以定义边距和填充区域。 一般来说,没有理由选择内联而不是块内联,但内联是网络上许多元素的默认行为,因此大多数设计人员不会这样做,除非他们特别需要进一步定义框区域。 宽度和高度 Web 元素的尺寸调整与 Photoshop 或 Illustrator 等静态设计环境中的元素尺寸调整不同。网页上的元素不仅会根据用户浏览器窗口的大小改变其大小,而且还会影响元素的位置和附近元素的位置!让我们进一步研究一下这个概念。 在网络上,元素的尺寸可以相对于其父元素或明确地表达。区别如下: 相对大小取决于父元素宽度,例如宽度为 50% 的元素将占用父元素宽度的 50%。如果父级宽度改变,子级宽度也会自动改变! 显式调整大小是相对于父宽度的(例如,将其定义为像素值)并且不是完全静态的。它永远不会改变。即使其父元素更改尺寸或调整浏览器窗口大小,它也不会更改。
|
|