Compartir tecnología

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Propiedades en el modelo de caja.

relleno

padding Se utiliza para controlar el espacio entre el contenido del elemento y el borde. El relleno se puede configurar por separado para cada lado del elemento (superior, derecho, inferior, izquierdo). La unidad de relleno puede ser píxeles (px), porcentaje (%), etc.

.element {
    padding: 10px; /* 上下左右的内边距都为10像素 */
    padding-top: 20px; /* 上边距为20像素 */
    padding-right: 15px; /* 右边距为15像素 */
    padding-bottom: 10px; /* 下边距为10像素 */
    padding-left: 5px; /* 左边距为5像素 */
}
1
2
3
4
5
6
7

borde

border Se utiliza para establecer el borde del elemento, incluido el ancho, el estilo y el color del borde.

.element {
    border: 2px solid #000; /* 设置2像素宽的实线黑色边框 */
    border-width: 2px; /* 设置边框宽度 */
    border-style: solid; /* 设置边框样式 */
    border-color: #000; /* 设置边框颜色 */
    border-radius: 5px; /* 设置圆角边框 */
}
1
2
3
4
5
6
7

atributo de tamaño

ancho

width Se utiliza para establecer el ancho del elemento. La unidad puede ser píxeles (px), porcentaje (%), unidad de ancho de la ventana gráfica (vw), etc.width Solo establece el ancho del área de contenido, excluyendo el relleno, los bordes y los márgenes.

.element {
    width: 200px; /* 设置宽度为200像素 */
    width: 50%; /* 设置宽度为父元素宽度的50% */
}
1
2
3
4

altura

height Se utiliza para establecer la altura del elemento. La unidad puede ser píxeles (px), porcentaje (%), unidad de altura de la ventana gráfica (vh), etc.height Solo establece la altura del área de contenido, excluyendo el relleno, los bordes y los márgenes.

.element {
    height: 100px; /* 设置高度为100像素 */
    height: 50%; /* 设置高度为父元素高度的50% */
}
1
2
3
4

Propiedades de diseño

mostrar

display Las propiedades se utilizan para definir el tipo de visualización de un elemento. Los valores comunes incluyen:

• block: Los elementos a nivel de bloque ocupan todo el ancho del contenedor principal y se ajustarán de forma predeterminada.
• inline: Los elementos en línea solo ocupan el ancho de su contenido y no se ajustarán.
• inline-block: Los elementos en línea a nivel de bloque están organizados como elementos en línea, pero se puede establecer el ancho y el alto.
• none: Los elementos ocultos no aparecen en la página y no ocupan espacio.
• flex: habilite el diseño de cuadro flexible y organice los elementos secundarios en una línea.
• grid: habilita el diseño de cuadrícula, organizando elementos secundarios en una cuadrícula.

.element-block {
    display: block; /* 设置为块级元素 */
}

.element-inline {
    display: inline; /* 设置为内联元素 */
}

.element-inline-block {
    display: inline-block; /* 设置为内联块级元素 */
}

.element-none {
    display: none; /* 隐藏元素 */
}

.container-flex {
    display: flex; /* 启用弹性布局 */
}

.container-grid {
    display: grid; /* 启用网格布局 */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Descripción general

combinando padding、border、width、height ydisplay y otros atributos, puede controlar de manera flexible el tamaño, el espaciado y el diseño de los elementos. Estas propiedades son la base para crear páginas web hermosas y responsivas. Aquí hay un ejemplo completo que muestra cómo usar estas propiedades juntas para crear un elemento a nivel de bloque con relleno, bordes y un ancho y alto específicos:

.box {
    width: 300px;
    height: 150px;
    padding: 20px;
    border: 5px solid #000;
    display: block;
}
1
2
3
4
5
6
7

En este ejemplo,.box El elemento está configurado como un elemento a nivel de bloque con un ancho de 300 píxeles y una altura de 150 píxeles, con 20 píxeles de relleno y 5 píxeles de borde negro sólido. Esta configuración garantiza que haya suficiente espacio entre el contenido del elemento y el borde, mientras que el borde define claramente el límite exterior del elemento.

Espero que estas explicaciones sean útiles. ¡Avíseme si tiene más preguntas o necesita más ejemplos!