Logo

菜单

发布于 2026-01-06 1 阅读
0

什么是盒模型？🤔 由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

什么是盒式模型？🤔

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

¡Hola gente bonita!👋

“盒子模型”（modelo de caja）的名称是 llama así porque，en los navegadores，todo se 是 apartir de cajas。

Entonces, lo primero que debemos de entender, es que cada elemento que definimos en un documento HTML semostrará en el navegador como una caja es la forma en que serepresentan todos los elementos, no exiten elementos trianglees, redondos, poligonales etc. Todos los elementos en HTML or defeto son squarees ya que Internamente el navegador dibuja un rectángulo。

⚠️ Las únicas excepciones son las listas y las tablas, que generic más de una caja, y los elementos con display: noneo display: contents, que no crean ninguna caja.

在 Web 站点上使用视觉元素时，可以使用 CSS 来使用border-radius循环中的元素，将其元素设置为矩形：

图片描述

前面的内容是，网页页面的导航元素是矩形的，并且 CSS 定义了属性、颜色、形状、边缘以及更多的矩形元素。

可以通过属性进行修改outline，以矩形形式启动 Google 页面的所有元素，也可以在网络上的其他页面上进行修改。

* {
    outline: 1px solid red;
}
Enter fullscreen mode Exit fullscreen mode

Google 的首页。

在 Microsoft Edge 中，您可以使用 3D 视图来查看 3D 视觉形式的内容：

Microsoft Edge 的 3D 视图

在网页上使用 HTML 元素可以在 caja 中使用，但 caja 的基本技巧如下：

  • 方块框。
  • 内联框。

网络的存在原理是这样的：

📦 Cajas de bloque（方块盒子）

拉斯卡哈斯（Las cajas de bloque），由于叛逃，占据了一个空间，成为了一个竞争者。
HTML 元素可与该元素一起使用
<div>。

📦 Cajas en línea（内联盒）

拉斯维加斯卡哈斯（Las cajas en linea），由于叛逃，他的空间被限制住了。 HTML 元素可与该元素一起使用<span>。

CSS 属性显示与所有银行卡的兼容性。您可以通过以下方式获取更多信息，并邀请您阅读我的文章。

📦 拉斯维加斯模型区

Cada elemento HTML 是 4 个 caja que tiene 和 se compone de cuatro areas：

Internos：

  • content
  • padding
  • border

外部

  • margin

这是一个盒子模型的形式。
HTML 元素是在外部空间与属性边距之间进行控制的元素，在属性边距中使用属性，在属性边距中使用属性，在属性内边距中使用属性来控制内部空间。

🛠️ Herramienta de Desarrollo (DevTools)

如果是检查 HTML 元素，请使用“Estilos”和 que hace esmostrar el modelo de caja。

ℹ️ 颜色与导航不同。

  • 内容内容以蓝色表示。
  • 填充物代表绿色的颜色。
  • 边框代表阿马里洛的颜色。
  • El Margen 代表颜色 naranja。

盒式模型

网站页面 HTML 元素的位置和选择、颜色元素的颜色和提示以及边距元素的填充检测。

🎦 内容

El contenido de la caja、donde aparecen 文本、图像等。

内容（como su nombre lo dice）以“contenido”为中心，包括文本、图像、视频等。El contenido siempre es lo queremosmostrarle al usuario。您可以在很多场合使用颜色或图像来吸引更多人。

观察图像、内容、元素、形式、元素、元素和填充物的中心区域。El tamaño de esta are se puede modificar con las propiedades height,,,,,, .widthmax-heightmax-widthmin-heightmin-width

替代文字

您可以在一个元素上建立一个锚点或一个altura，仅适用于caja的内容（内容），而不是完整的caja。填充和边框是一个固定点和一个高度，总的卡哈，它是最深的，可以查看盒子尺寸的说明：

卢皮塔科德

CSS 中的 Box Sizing 是什么？ 🤔

Lupita Code 🌄 ・ 2021年4月19日

#css #西班牙语

🔲 填充物

Es el área alrededor del contenido。 El paddinges 透明。

填充物是一个分离的内部空间，存在于内部空间和边界之间，可以使用它来提高吸引力，并且内部空间不具有边界。

需要注意的是，填充物是可见的卡哈部分，因此，如果图像是彩色的，则可以延长填充物的长度。

在所有的卡哈中使用速记，例如，或在卡哈中padding: 20px使用 darle sólo，例如， 。paddingpadding-right: 10px

重要的是，不允许有负面价值。

速记padding允许 dar un valor diffente a cada lado，sin necesidad de escribirlos por separado。例如：

padding-top:    10px; 
padding-right:  20px; 
padding-bottom: 25px; 
padding-left:   5px;  
/* Los 4 valores son igual a esto: */
padding: 10px 20px 25px 5px;

padding: 10px;           /* Aplica a los cuatro lados */
padding: 10px 20px;      /* vertical | horizontal */
padding: 10px 20px 30px; /* top | horizontal | bottom */
Enter fullscreen mode Exit fullscreen mode

🕒 Un truco para recordar los valores de la propiedad padding (上、右、下、左)es pensar en el Sentido de las manecillas del reloj, empezando desde las 12hrs:

图片描述

⬜ 边框

El borde es la que rodea la caja, es como la frontera que rodea al elemento, esta se utiliza para darle una apariencia estética a la caja, pues nos allowed dibujar una línea de algún color, la línea puede tener los siguientes estilos:

Las tres propiedades para crear bordes son:

  • border-style: sus valores son: [ none | hidden | solid | dotted | dashed | double | groove | ridge | inset | outset ]
  • border-width：indica al navegador el tamaño del borde，正常，se utiliza el valor en píxeles para esta propiedad，por ejemplo border-width: 5px，。
  • border-color：由于缺陷，请使用当前文本颜色。如果没有海运，则禁止禁运。例如，border-color: red。

市长网站不能使用单独的财产。 En su lugar，存在简写：border。 Con este 速记 podemos escribir sólo border: solid 5px red。

También Podemos controlar y dar un estilo different a cadaparte de los bordes, 例如：

border-width: 5px 10px 15px 20px; 
border-style: solid dashed dotted double; 
border-color: red green blue brown;
Enter fullscreen mode Exit fullscreen mode

替代文字

🔳 边距

Es la separación entre una caja y las cajas adyacentes。

El Margen es la ultima área del Box Model y se puede ver como una separación 隐形或透明 que ayuda a separar un elemento de otro.定义颜色或图像的颜色，这不是一个部分的宣传。

洛斯玛吉内斯（Los márgenes）是一个卡哈模型的核心，可以利用它来创造元素之间的空间。

Recuerda que los valores pueden serpositivos 或 negativos。

margin-top:    10px; 
margin-right:  20px; 
margin-bottom: 25px; 
margin-left:   5px;  
/* Los 4 valores son igual a esto: */
margin: 10px 20px 25px 5px;

margin: 10px;           /* Aplica a los cuatro lados */
margin: 10px 20px;      /* vertical | horizontal */
margin: 10px 20px 30px; /* top | horizontal | bottom */
Enter fullscreen mode Exit fullscreen mode

HTML 中的各种元素都是重要的，这些元素是导航器中的重要元素。

边距与填充

尽管存在相似的属性，但在使用相互组合时可能会出现一些不同的错误。存在差异可以为开发者网络带来好处。

属性边距和填充之间的差异

填充和边距是网络中重要的元素，可以在不同的空间中提供额外的空间。但是，您可以使用其他方式吗？

Para el padding, puedes utilizarlo en las siguientes situaciones:

  • 没有任何其他内容可以让您在内容上有所保留。
  • 一切都将发生在大海上。
  • Cuando se necesita espacio entre un elemento Interior y la caja padre。
  • 这就是现代空间中元素元素的背景。例如，如果您要使用不同的颜色，请使用不同的颜色（不同的颜色），但不要使用文本。
  • Cuando quieras aumentar el tamaño del elemento。例如：si quieres aumentar el tamaño de un botón。

Para el margin, puedes utilizarlo en las siguientes situaciones:

  • 元素的空间需要很大，因为图像和描述是分开的。
  • 使用 Margen 来确定与某些元素之间的距离。
  • 水平方向的中心。
  • Cuando quieras mover un elemento hacia arriba, hacia abajo o de lado a lado。
  • Cuando quieras sobreponer elementos。

注：注意事项：对于 los márgenes 的功能而言，许多想法是模棱两可的。

如果您在外部空间中聚集了一些要素，则可以使用财产边际。 El margen es como agregar un cojín alrededor del elemento。

El margen Sirve para aumentar la distancia entre hermanos。不存在任何与我们的元素之间的距离，以及与父亲的冲突padding。

El margen siempre tratara de aumentar la distancia entre hermanos, incluso si esosignifica pasar el margen al elemento padre。

在此情况下，Margen 元素和 vecino 元素融合 (o colapsarán) 处于统一空间。洛斯玛吉内斯的可折叠物品可能会导致性骚扰，因此我们建议您阅读以下文章：

卢皮塔科德

Entendiendo el Colapso de Márgenes（边距折叠）😓

Lupita Code 🌄 ・ 2021年6月15日

#css #西班牙语 #拉丁美洲

⬜ 大纲

La propiedad outline(contorno) es la línea que rodea a la caja entre el bordery el margin。

这是一张 CSS 盒模型的示意图，相关部分将在图中进行说明。

可以使用骰子名称来控制元素。与元素的边界线相连接，将属性轮廓与边框相混淆，属性轮廓之间的差异不会影响元素的尺寸，这与模型部分的形式无关。

属性大纲不是单独的装饰图形，而是主要的动机和ACCESIBILIDAD的动机。

属性轮廓是主要的交互元素，元素和输入是假长石:focus。 O bien en el elemento <form>que tenga la pseudoclase :focus-within。 Aqui una lista mas completa de donde usar 大纲：

  • 链接
  • 按钮
  • 表单字段/控件（文本字段、下拉框、单选按钮等）
  • 菜单项
  • 鼠标悬停触发的事件，例如工具提示
  • 小部件，例如日历选择器

假长石:focus是一种元素，可以激活并使用，点击一下即可，或者可以预选“TAB”字样，并且颜色会与罗德亚的光环有关。可以使用鼠标中的各种元素进行操作和操作。

在网络中使用鼠标进行导航的所有测验，在网络中使用主要媒介时，请使用许多常用的技术，例如：使用潘塔拉的用户，使用减少的移动方式，使用 avanzados (desarrollador)。因此，不会消除伪长石的轮廓:focus。

outlinees una 速记 para las siguientes propiedades：

  • outline-width接受正确的态度border-width。
  • outline-style接受 los mismos valores que border-style，例外hidden。
  • outline-color接受所有颜色和声明形式。 También la palabra clave invert。

轮廓线与美洲驼协会的属性相同，但outline-offset在轮廓线和元素边界之间有空间。

🆕 更新 de la propiedad 大纲

自动调整元素的属性轮廓。前部是由前部缺陷造成的。 Safari 除外的主要导航者的最终版本功能。

最重要的原则是代码片段：

* {
    outline: 1px solid red;
}
Enter fullscreen mode Exit fullscreen mode

这是一种小型的 CSS 调试工具，但border它会影响元素的尺寸。

👫 社区门户

凯莉·沃恩 (Kelly Vaughn) 公开在 Twitter 上发布了一张照片，解释了该游戏的模型。

Caroline Artz 提供的 CSS 模型交互演示令人难以置信，是 Angular 的完美解决方案：

。

Adam Argyle tambien 比较 3D 模型演示：

📋 结论：

☑️ Cada elemento HTML 和 pagina web 以及 caja 矩形。
☑️ El caja 内容包含文本、图片等。
☑️ El padding 包含内容。
☑️ El borde es una linea que rodea el padding y el content。
☑️ El margin es la separación entre una caja y las cajas adyacentes。

🔎资源：

感谢您🦸🏻‍♀️
社交方面的注意事项：

▶️YouTube
📷Instagram
🐦Twitter
🔵Facebook
🔲Codepen
✍️Medium
🎵TikTok

文章来源：https://dev.to/lupitacode/que-es-el-box-model-4mnj
使用 Tailwind CSS 实...
如何提升 webpack 构建速度...