Функции `padding`, `border`, `width`, `height` и `display` CSS Properties

Функции свойств CSS `padding`, `border`, `width`, `height` и `display`

2024-07-12

Свойства в блочной модели

прокладка

padding Используется для управления пространством между содержимым элемента и границей. Отступ можно установить отдельно для каждой стороны элемента (сверху, справа, снизу, слева). Единицей заполнения могут быть пиксели (px), проценты (%) и т. д.

.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

граница

border Используется для установки границы элемента, включая ширину, стиль и цвет границы.

.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

атрибут размера

ширина

width Используется для установки ширины элемента. Единицами измерения могут быть пиксели (px), проценты (%), ширина области просмотра (vw) и т. д.width Устанавливает только ширину области содержимого, исключая отступы, границы и поля.

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

высота

height Используется для установки высоты элемента. Единицами измерения могут быть пиксели (px), проценты (%), единицы высоты области просмотра (vh) и т. д.height Устанавливает только высоту области содержимого, исключая отступы, границы и поля.

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

Свойства макета

отображать

display Свойства используются для определения типа отображения элемента. К общим ценностям относятся:

block: элементы уровня блока занимают всю ширину родительского контейнера и по умолчанию переносятся.
inline: строчные элементы занимают только ширину своего содержимого и не переносятся.
inline-block: встроенные элементы уровня блока располагаются как строчные элементы, но ширину и высоту можно установить.
none: Скрытые элементы не отображаются на странице и не занимают места.
flex: включить гибкую компоновку блоков и расположить дочерние элементы в линию.
grid: Включает макет сетки, располагая дочерние элементы в сетке.

.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

Обзор

путем объединения padding、border、width、height иdisplay и другие атрибуты, вы можете гибко управлять размером, интервалом и расположением элементов. Эти свойства являются основой для создания адаптивных и красивых веб-страниц. Вот подробный пример, показывающий, как использовать эти свойства вместе для создания элемента уровня блока с отступами, границами и определенной шириной и высотой:

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

В этом примере.box Элемент настраивается как элемент уровня блока шириной 300 пикселей и высотой 150 пикселей, с отступом 20 пикселей и сплошной черной рамкой толщиной 5 пикселей. Этот параметр гарантирует, что между содержимым элемента и границей будет достаточно места, а граница четко определяет внешнюю границу элемента.

Надеюсь, эти объяснения будут полезны. Если у вас возникнут дополнительные вопросы или вам понадобятся дополнительные примеры, дайте мне знать!

Обмен технологиями