Compartilhamento de tecnologia

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

Propriedades no modelo de caixa

preenchimento

padding Usado para controlar o espaço entre o conteúdo do elemento e a borda pode ser definido separadamente para cada lado do elemento (superior, direito, inferior, esquerdo). A unidade de preenchimento pode ser pixels (px), porcentagem (%), 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

fronteira

border Usado para definir a borda do elemento, incluindo largura, estilo e cor da borda.

.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 tamanho

largura

width Usado para definir a largura do elemento. A unidade pode ser pixels (px), porcentagem (%), unidade de largura da janela de visualização (vw), etc.width Define apenas a largura da área de conteúdo, excluindo preenchimento, bordas e margens.

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

altura

height Usado para definir a altura do elemento. A unidade pode ser pixels (px), porcentagem (%), unidade de altura da janela de visualização (vh), etc.height Define apenas a altura da área de conteúdo, excluindo preenchimento, bordas e margens.

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

Propriedades de layout

mostrar

display Propriedades são usadas para definir o tipo de exibição do elemento. Os valores comuns incluem:

• block: os elementos no nível do bloco ocupam toda a largura do contêiner pai e serão agrupados por padrão.
• inline: os elementos embutidos ocupam apenas a largura de seu conteúdo e não serão quebrados.
• inline-block: os elementos embutidos em nível de bloco são organizados como elementos embutidos, mas a largura e a altura podem ser definidas.
• none: os elementos ocultos não aparecem na página e não ocupam espaço.
• flex: habilite o layout de caixa flexível e organize os elementos filhos em uma linha.
• grid: ativa o layout da grade, organizando os elementos filhos em uma grade.

.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

Visão geral

combinando padding、border、width、height edisplay e outros atributos, você pode controlar com flexibilidade o tamanho, o espaçamento e o layout dos elementos. Essas propriedades são a base para a construção de páginas web responsivas e bonitas. Aqui está um exemplo abrangente que mostra como usar essas propriedades juntas para criar um elemento em nível de bloco com preenchimento, bordas e largura e altura específicas:

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

Neste exemplo,.box O elemento é configurado como um elemento de nível de bloco com largura de 300 pixels e altura de 150 pixels, com 20 pixels de preenchimento e 5 pixels de borda preta sólida. Esta configuração garante que haja espaço suficiente entre o conteúdo do elemento e a borda, enquanto a borda define claramente o limite externo do elemento.

Espero que essas explicações sejam úteis. Informe-nos se tiver mais dúvidas ou precisar de mais exemplos!