Właściwości CSS związane z modelem pudełkowym

Articles

Ten artykuł wyjaśnia właściwości CSS związane z modelem pudełkowym.

Możesz dowiedzieć się o zastosowaniach i składni właściwości takich jak szerokość (width), wysokość (height) i margines (margin).

YouTube Video

HTML do podglądu

css-box.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>Box Model Related CSS Properties</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-box.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Box Model Related CSS Properties</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Box Model Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>width and height</h3>
 23            <section>
 24                <header><h4>width: 250px; height: 150px;</h4></header>
 25                <section class="sample-view">
 26                    <div class="width-height-fixed">Fixed size(250px,150px)</div>
 27                </section>
 28            </section>
 29            <section>
 30                <header><h4>width: 50%; height: 50%;</h4></header>
 31                <section class="sample-view">
 32                    <div class="width-height-percent">Percentage size(50%,50%)</div>
 33                </section>
 34            </section>
 35            <section>
 36                <header><h4>width: min-content; height: min-content;</h4></header>
 37                <section class="sample-view">
 38                    <div class="width-height-min-content">This is an example of min-content.</div>
 39                </section>
 40            </section>
 41            <section>
 42                <header><h4>width: max-content; height: max-content;</h4></header>
 43                <section class="sample-view">
 44                    <div class="width-height-max-content">This is an example of max-content.</div>
 45                </section>
 46            </section>
 47            <section>
 48                <header><h4>width: fit-content; max-width: 150px;</h4></header>
 49                <section class="sample-view">
 50                    <div class="width-height-fit-content">This is an example of fit-content.</div>
 51                </section>
 52            </section>
 53        </article>
 54        <article>
 55            <h3>margin and padding</h3>
 56            <section style="height: auto;">
 57                <h4>Margin &amp; padding</h4>
 58                <header><h4>margin: 20px; padding: 15px;</h4></header>
 59                <section class="sample-view">
 60                    <div class="margin-padding">margin & padding</div>
 61                </section>
 62            </section>
 63            <section style="height: auto;">
 64                <h4>Margin only(no padding)</h4>
 65                <header><h4>margin: 20px; padding: 0;</h4></header>
 66                <section class="sample-view">
 67                    <div class="margin-only">margin only</div>
 68                </section>
 69            </section>
 70            <section style="height: auto;">
 71                <h4>No margin &amp; padding example</h4>
 72                <header><h4>margin: 0; padding: 0;</h4></header>
 73                <section class="sample-view">
 74                    <div class="no-margin">no margin & padding</div>
 75                </section>
 76            </section>
 77        </article>
 78        <article>
 79            <h3>box-sizing</h3>
 80            <section style="height: auto;">
 81                <header><h4>box-sizing: content-box</h4></header>
 82                <section class="sample-view">
 83                    <div style="width: 300px;">width: 300px</div>
 84                    <div class="content-box">Content Box</div>
 85                    <div style="width: 360px;">width: 360px</div>
 86                </section>
 87            </section>
 88            <section>
 89                <header><h4>box-sizing: border-box</h4></header>
 90                <section class="sample-view">
 91                    <div style="width: 300px;">width: 300px</div>
 92                    <div class="border-box">Border Box</div>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>visibility</h3>
 98            <section>
 99                <header><h4>visibility: visible</h4></header>
100                <section class="sample-view">
101                    <div class="visibility-visible">Visible Box</div>
102                </section>
103                <header><h4>visibility: hidden</h4></header>
104                <section class="sample-view">
105                    <div class="visibility-hidden">Hidden Box</div>
106                </section>
107                <header><h4>visibility: collapse</h4></header>
108                <section class="sample-view">
109                    <div class="visibility-collapse">Collapsed Box (Hold layout space)</div>
110                </section>
111                <header><h4>HTML</h4></header>
112                <pre>&lt;div class="visibility-collapse"&gt;Collapsed Box (Hold layout space)&lt;/div&gt;</pre>
113                <header><h4>visibility: collapse</h4></header>
114                <section class="sample-view">
115                    <table style="height: 200px; margin: auto;">
116                        <tr class="visibility-collapse">
117                            <td>Cell 1 (Remove layout space)</td>
118                        </tr>
119                        <tr>
120                            <td>Cell 2</td>
121                        </tr>
122                    </table>
123                </section>
124                <header><h4>HTML</h4></header>
125<pre>
126&lt;table style="height: 200px; margin: auto;"&gt;
127    &lt;tr class="visibility-collapse"&gt;
128        &lt;td&gt;Cell 1 (Remove layout space)&lt;/td&gt;
129    &lt;/tr&gt;
130    &lt;tr&gt;
131        &lt;td&gt;Cell 2&lt;/td&gt;
132    &lt;/tr&gt;
133&lt;/table&gt;
134</pre>
135            </section>
136        </article>
137    </main>
138</body>
139</html>

Powiązane z Modelem Pudełkowym

Właściwości `width` i `height`

 1.width-height-fixed {
 2    width: 250px;
 3    height: 150px;
 4    background-color: lightblue;
 5}
 6
 7.width-height-percent {
 8    width: 50%;
 9    height: 50%;
10    background-color: lightblue;
11}
12
13.width-height-min-content {
14    width: min-content;
15    height: min-content;
16    background-color: lightblue;
17}
18
19.width-height-max-content {
20    width: max-content;
21    height: max-content;
22    background-color: lightblue;
23}
24
25.width-height-fit-content {
26    width: fit-content;
27    max-width: 150px;
28    background-color: lightblue;
29}

Właściwości width i height są właściwościami CSS używanymi do określania szerokości i wysokości elementu. Są one szczególnie używane przy ustawianiu rozmiaru elementów blokowych, obrazów, filmów itp.

W klasie width-height-fixed określane są stałe wartości szerokości i wysokości.
W klasie width-height-percent określane są wartości procentowe dla szerokości i wysokości.

Wartości, które można określić

Właściwości width i height mogą mieć następujące wartości.

auto: Rozmiar domyślny. Automatycznie dostosowuje rozmiar względem elementu nadrzędnego.
Stałe wartości: Określa stałą szerokość w pikselach, procentach lub jednostkach względnych.(ex: 100px, 50%, 10rem)
- Na przykład, 250px ustawia rozmiar elementu na 250 pikseli, a 50% ustawia go na 50% rozmiaru elementu nadrzędnego.
min-content: Dopasowuje minimalny rozmiar zawartości.
max-content: Dopasowuje maksymalny rozmiar zawartości.
fit-content: Dostosowuje rozmiar elementu odpowiednio do rozmiaru zawartości.

Określanie Minimalnych i Maksymalnych Wartości

min-width, max-width, min-height i max-height to właściwości CSS używane do ustawiania ograniczeń rozmiaru szerokości i wysokości elementu. Używając ich, możesz upewnić się, że element pozostaje w określonym zakresie rozmiarów.

Właściwości `margin` i `padding`

 1.margin-padding {
 2    margin: 20px; /* Margin outside the element */
 3    padding: 15px; /* Padding inside the element */
 4    border: 1px solid #333;
 5    background-color: lightblue;
 6    width: 300px;
 7    height: 40px;
 8}
 9
10.margin-only {
11    margin: 20px; /* Margin outside the element */
12    padding: 0; /* No padding inside the element */
13    border: 1px solid #333;
14    background-color: lightblue;
15    width: 300px;
16    height: 40px;
17}
18
19.no-margin {
20    margin: 0; /* No margin outside the element */
21    padding: 0; /* No padding inside the element */
22    border: 1px solid #333;
23    background-color: lightblue;
24    width: 300px;
25    height: 40px;
26}

Margin i padding to właściwości w CSS używane do kontrolowania zewnętrznych i wewnętrznych odstępów między elementami w modelu pudełkowym. Służą do dopasowania przestrzeni między elementami i poprawienia ich wyglądu.

W klasie margin-padding są określone zarówno margin, jak i padding. Przestrzeń margin znajduje się na zewnątrz obramowania, a przestrzeń padding wewnątrz obramowania.
W klasie margin-only określona jest tylko właściwość margin. Widać, że niebieski obszar jest mniejszy w porównaniu do klasy margin-padding, ponieważ wewnątrz obramowania brakuje przestrzeni padding.
W klasie no-margin zarówno margin, jak i padding są ustawione na 0. Widać, że niebieski obszar jest przesunięty maksymalnie w lewo, ponieważ poza obramowaniem nie ma przestrzeni margin.

W ten sposób właściwość margin ustawia zewnętrzną przestrzeń elementu, dostosowując odległość między elementami. Natomiast właściwość padding ustawia wewnętrzną przestrzeń elementu, dostosowując odległość między zawartością a obramowaniem.

Właściwość `margin`

Właściwość margin ustawia zewnętrzną przestrzeń (margines) elementu. Służy do tworzenia przestrzeni między sąsiadującymi elementami. Można określić następujące wartości:.
Wartości stałe: Można określić rozmiar marginesu w pikselach, jednostkach względnych (em, rem) lub procentach.(ex: 10px, 1em, 5%)
auto: Przydatne do wyśrodkowywania elementów blokowych. Kiedy szerokość jest określona, marginesy z lewej i prawej strony są automatycznie dopasowywane.
Wartości dodatnie i ujemne: Wartości dodatnie zwiększają przestrzeń, a wartości ujemne zbliżają elementy do siebie.

Notacja skrócona:

 1div.one-value {
 2    margin: 20px;
 3}
 4
 5div.two-value {
 6    /* top-bottom left-right */
 7    margin: 10px 5px;
 8}
 9
10div.three-value {
11    /* top left-right bottom */
12    margin: 10px 5px 15px;
13}
14
15div.four-value {
16    /* top right bottom left */
17    margin: 10px 5px 15px 20px;
18}

Właściwość margin może przyjmować od jednej do czterech wartości.

Jedna wartość: Dotyczy wszystkich stron.
Dwie wartości: Pierwsza dotyczy góry i dołu, druga lewej i prawej strony.
Trzy wartości: Dotyczy kolejno góry, lewej i prawej oraz dołu.
Cztery wartości: Dotyczy kolejno góry, prawej, dołu i lewej strony.

Właściwość `padding`

Funkcja:

Właściwość padding ustawia wewnętrzną przestrzeń (padding) elementu. Służy do tworzenia przestrzeni między zawartością a obramowaniem elementu. Można określić następujące wartości:.
Wartości stałe: Określają rozmiar odstępu (padding).(ex: 10px, 1em, 5%)
Nie można używać wartości ujemnych. Wartości odstępu (padding) można określić wyłącznie jako liczby dodatnie.

Notacja skrócona:

 1div.one-value {
 2    padding: 20px;
 3}
 4
 5div.two-value {
 6    /* top-bottom left-right */
 7    padding: 10px 5px;
 8}
 9
10div.three-value {
11    /* top left-right bottom */
12    padding: 10px 5px 15px;
13}
14
15div.four-value {
16    /* top right bottom left */
17    padding: 10px 5px 15px 20px;
18}

Podobnie jak w przypadku margin, można określić od jednej do czterech wartości.

Jedna wartość: Dotyczy wszystkich stron.
Dwie wartości: Pierwsza dotyczy góry i dołu, druga lewej i prawej strony.
Trzy wartości: Dotyczy kolejno góry, lewej i prawej oraz dołu.
Cztery wartości: Dotyczy kolejno góry, prawej, dołu i lewej strony.

Właściwość `box-sizing`

 1/* Default content-box : 300px + 2 * 20px + 2 * 10px = 360px */
 2.content-box {
 3    width: 300px;
 4    padding: 20px;
 5    border: 10px solid blue;
 6    box-sizing: content-box;
 7    background-color: lightblue;
 8}
 9
10/* Using border-box */
11.border-box {
12    width: 300px;
13    padding: 20px;
14    border: 10px solid red;
15    box-sizing: border-box;
16    background-color: lightcoral;
17}

box-sizing to właściwość CSS, która kontroluje sposób obliczania szerokości i wysokości elementu.

W klasie content-box szerokość elementu wynosi 360px. Szerokość (width) wynosi 300px, lewy i prawy padding łącznie 40px, a lewy i prawy border łącznie 20px, co daje 360px.
W przypadku border-box szerokość elementu wynosi 300px. padding i border są uwzględnione w określonej szerokości (width).

Wartości `box-sizing`

Istnieją głównie dwie wartości dla box-sizing: content-box i border-box, przy czym domyślną wartością jest content-box.

`content-box`

 1.content-box {
 2    box-sizing: content-box;
 3    width: 200px;
 4    padding: 20px;
 5    border: 10px solid black;
 6}
 7/*
 8260px = 200px(width) +
 920px(padding-left) + 20px(padding-right) +
1010px(border-left) + 10px(border-right)
11*/

Gdy określono content-box, tylko szerokość i wysokość zawartości są ustawiane za pomocą width i height. padding i border są do niej dodawane w celu określenia ostatecznego rozmiaru. Innymi słowy, width i height odnoszą się tylko do obszaru zawartości.

W tym przykładzie określona szerokość (width) wynosi 200px, ale po dodaniu szerokości lewego i prawego padding oraz border, ostateczna rzeczywista szerokość elementu wynosi 260px.

`border-box`

1.border-box {
2    width: 200px;
3    padding: 20px;
4    border: 10px solid black;
5    box-sizing: border-box;
6}

Gdy określono border-box, width i height są obliczane z uwzględnieniem padding i border. Innymi słowy, określone width i height stają się całkowitym rozmiarem zawartości, padding i border.

W tym przypadku określona szerokość (width) wynosi 200px, a ponieważ padding i border są również uwzględnione, ostateczna rzeczywista szerokość elementu pozostaje na poziomie 200px. padding i border są dostosowane w jego obrębie.

Podsumowanie różnic w `box-sizing`

Własność	Metoda Obliczeń	Rzeczywiste Obliczenie Szerokości
`content-box` (domyślnie)	`width` odnosi się tylko do zawartości. Dodawane są wartości `padding` i `border`.	`width` + `padding` + `border`
`border-box`	`width` to wszystko (obejmuje zawartość, `padding`, `border`)	Określona `width` jest używana tak, jak podano.

Zalety `box-sizing`

Użycie border-box stabilizuje układ. Dodawanie padding lub border nie zmienia określonego rozmiaru, co ułatwia obliczenia.
Jest przydatny podczas tworzenia elastycznych układów. W responsywnych projektach lub złożonych układach border-box jest często używany, aby uniknąć nieoczekiwanych wahań rozmiaru.

Jak zastosować `border-box` globalnie

1*,
2*::before,
3*::after {
4    box-sizing: border-box;
5}

Ustawiając CSS w ten sposób, możesz zastosować border-box do wszystkich elementów, aby uniknąć nieoczekiwanych zmian rozmiaru.

Podsumowanie

box-sizing kontroluje, czy padding i border są uwzględnione w width i height elementu.
Użycie border-box ułatwia obliczenia rozmiaru i nadaje się do projektowania responsywnego.

Właściwość `visibility`

 1.visibility-visible {
 2    visibility: visible;
 3}
 4
 5.visibility-hidden {
 6    visibility: hidden;
 7}
 8
 9.visibility-collapse {
10    visibility: collapse;
11}

Właściwość visibility służy do pokazywania lub ukrywania elementów, ale w przeciwieństwie do właściwości display, wpływa na układ nawet wtedy, gdy element jest ukryty. Ukrywa tylko element, zachowując jego pierwotne położenie i rozmiar, bez wpływu na układ innych elementów.

Podstawowa składnia

1element {
2    visibility: value;
3}

value: Wartość określająca widoczność elementu.

Typy wartości

Właściwość visibility może być ustawiona na następujące wartości:.

`visible`

Określenie visible spowoduje wyświetlenie elementu. To jest domyślna wartość.

`hidden`

Określenie hidden ukryje element, ale jego miejsce w układzie zostanie zachowane.

`collapse`

collapse jest głównie używany dla wierszy lub kolumn tabeli. Element staje się niewidoczny, a jego miejsce również jest ignorowane. Gdy są stosowane do wierszy lub kolumn tabeli, ukryte wiersze lub kolumny są całkowicie usuwane z układu.
Jednakże, gdy jest używany z regularnymi elementami blokowymi lub liniowymi, z wyjątkiem elementów tabeli, zachowuje się jak hidden, a przestrzeń układu jest zachowana.

`inherit`

Określenie wartości inherit spowoduje dziedziczenie wartości właściwości visibility z elementu nadrzędnego.

Różnice między `visibility` a `display`

Istnieją następujące różnice między visibility a display.

visibility: hidden ukrywa element, ale zachowuje jego przestrzeń i układ.
display: none całkowicie usuwa element z układu, umożliwiając innym elementom wypełnienie tej przestrzeni.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

Właściwości CSS do wyświetlania kodu i cytatów Właściwości CSS związane z tłem

Właściwości CSS związane z modelem pudełkowym

YouTube Video

HTML do podglądu

Powiązane z Modelem Pudełkowym

Właściwości width i height

Wartości, które można określić

Określanie Minimalnych i Maksymalnych Wartości

Właściwości margin i padding

Właściwość margin

Notacja skrócona:

Właściwość padding

Funkcja:

Notacja skrócona:

Właściwość box-sizing

Wartości box-sizing

content-box

border-box

Podsumowanie różnic w box-sizing

Zalety box-sizing

Jak zastosować border-box globalnie

Podsumowanie

Właściwość visibility

Podstawowa składnia

Typy wartości

visible

hidden

collapse

inherit

Różnice między visibility a display

YouTube Video

Właściwości `width` i `height`

Właściwości `margin` i `padding`

Właściwość `margin`

Właściwość `padding`

Właściwość `box-sizing`

Wartości `box-sizing`

`content-box`

`border-box`

Podsumowanie różnic w `box-sizing`

Zalety `box-sizing`

Jak zastosować `border-box` globalnie

Właściwość `visibility`

`visible`

`hidden`

`collapse`

`inherit`

Różnice między `visibility` a `display`