Sifat-sifat CSS berkaitan dengan model kotak

Articles

Artikel ini menerangkan sifat-sifat CSS yang berkaitan dengan model kotak.

Anda boleh mempelajari tentang kes penggunaan dan sintaks untuk sifat-sifat seperti lebar (width), tinggi (height), dan margin.

YouTube Video

HTML untuk Pratonton

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>

Berkaitan Model Kotak

Sifat-sifat `width` dan `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}

Sifat width dan height adalah sifat CSS yang digunakan untuk menentukan lebar dan tinggi sesuatu elemen. Ini terutamanya digunakan apabila menetapkan saiz elemen blok, imej, video, dan sebagainya.

Dalam kelas width-height-fixed, nilai tetap ditetapkan untuk lebar dan tinggi.
Dalam kelas width-height-percent, nilai peratusan ditetapkan untuk lebar dan tinggi.

Nilai yang boleh ditetapkan

Sifat width dan height boleh mempunyai nilai berikut.

auto: Saiz lalai. Melaraskan saiz secara automatik berbanding elemen induk.
Nilai tetap: Menetapkan lebar tetap dalam bentuk piksel, peratusan, atau unit relatif.(ex: 100px, 50%, 10rem)
- Sebagai contoh, 250px menetapkan saiz elemen kepada 250 piksel, dan 50% menetapkannya kepada 50% daripada saiz elemen induk.
min-content: Menyesuaikan saiz minimum kandungan.
max-content: Menyesuaikan saiz maksimum kandungan.
fit-content: Melaraskan saiz elemen secara sesuai berdasarkan saiz kandungan.

Menentukan Nilai Minimum dan Maksimum

min-width, max-width, min-height, dan max-height adalah sifat CSS yang digunakan untuk menetapkan had saiz lebar dan tinggi sesuatu elemen. Menggunakan sifat-sifat ini, anda boleh memastikan elemen kekal dalam julat saiz tertentu.

Sifat-sifat `margin` dan `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 dan padding adalah sifat yang digunakan dalam CSS untuk mengawal jarak luar dan dalam elemen dalam model kotak. Ia digunakan untuk melaraskan jarak antara elemen dan untuk merapikan penampilan.

Dalam kelas margin-padding, kedua-dua margin dan padding ditentukan. Terdapat ruang margin di luar sempadan pepejal dan ruang padding di dalam sempadan pepejal.
Dalam kelas margin-only, hanya margin ditentukan. Anda boleh melihat bahawa kawasan biru lebih kecil berbanding kelas margin-padding kerana tiada ruang padding di dalam sempadan pepejal.
Dalam kelas no-margin, kedua-dua margin dan padding ditetapkan kepada 0. Anda boleh melihat bahawa kawasan biru ditolak sepenuhnya ke kiri kerana tiada ruang margin di luar sempadan pepejal.

Dengan cara ini, sifat margin menetapkan jarak luar elemen, melaraskan jarak antara elemen. Sebaliknya, sifat padding menetapkan jarak dalam elemen, melaraskan jarak antara kandungan dan sempadan.

Sifat `margin`

Sifat margin menetapkan jarak luar (margin) bagi sesuatu elemen. Ia digunakan untuk mencipta jarak antara elemen yang bersebelahan. Nilai berikut boleh ditentukan:.
Nilai tetap: Anda boleh menentukan saiz margin dalam piksel, unit relatif (em, rem), atau peratusan.(ex: 10px, 1em, 5%)
auto: Berguna untuk menjajarkan elemen blok di tengah. Apabila lebar ditentukan, ia secara automatik melaraskan margin kiri dan kanan.
Nilai positif dan negatif: Nilai positif mengembangkan ruang, manakala nilai negatif mendekatkan elemen.

Notasi ringkas:

 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}

Sifat margin boleh mengambil dari satu hingga empat nilai.

Satu nilai: Digunakan untuk semua sisi.
Dua nilai: Yang pertama digunakan untuk atas dan bawah, yang kedua untuk kiri dan kanan.
Tiga nilai: Digunakan mengikut turutan atas, kiri dan kanan, bawah.
Empat nilai: Diterapkan dalam urutan atas, kanan, bawah, kiri.

Sifat `padding`

Fungsi:

Sifat padding menetapkan ruang dalaman (padding) sesuatu elemen. Ia digunakan untuk mencipta ruang antara kandungan dan sempadan elemen. Nilai berikut boleh ditentukan:.
Nilai tetap: Menentukan saiz padding.(ex: 10px, 1em, 5%)
Nilai negatif tidak boleh digunakan. Nilai padding hanya boleh ditentukan sebagai nombor positif.

Notasi ringkas:

 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}

Seperti margin, anda boleh menetapkan dari satu hingga empat nilai.

Satu nilai: Digunakan untuk semua sisi.
Dua nilai: Yang pertama digunakan untuk atas dan bawah, yang kedua untuk kiri dan kanan.
Tiga nilai: Digunakan mengikut turutan atas, kiri dan kanan, bawah.
Empat nilai: Diterapkan dalam urutan atas, kanan, bawah, kiri.

Sifat `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 adalah sifat CSS yang mengawal bagaimana lebar dan tinggi elemen dikira.

Dalam kelas content-box, lebar elemen adalah 360px. width adalah 300px, dengan padding kiri dan kanan sebanyak 40px dan border kiri dan kanan sebanyak 20px, menjadikan jumlah keseluruhan 360px.
Dalam border-box, lebar elemen adalah 300px. padding dan border dimasukkan dalam width yang ditentukan.

Nilai `box-sizing`

Terdapat dua nilai utama untuk box-sizing: content-box dan border-box, dengan content-box sebagai nilai lalai.

`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*/

Apabila content-box ditentukan, hanya lebar dan tinggi kandungan yang ditetapkan oleh width dan height. padding dan border ditambahkan untuk menentukan saiz akhir. Dalam kata lain, width dan height hanya merujuk kepada kawasan kandungan.

Dalam contoh ini, width yang ditentukan adalah 200px, tetapi dengan lebar padding dan border kiri dan kanan ditambah, lebar sebenar elemen akhirnya adalah 260px.

`border-box`

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

Apabila border-box ditentukan, width dan height dikira termasuk padding dan border. Dalam kata lain, width dan height yang ditentukan menjadi jumlah keseluruhan saiz kandungan, padding, dan border.

Dalam kes ini, width yang ditetapkan adalah 200px, dan kerana padding dan border turut disertakan, lebar sebenar akhir elemen kekal 200px. padding dan border diselaraskan di dalamnya.

Ringkasan perbezaan `box-sizing`

Ciri	Kaedah Pengiraan	Pengiraan Lebar Sebenar
`content-box` (lalai)	`width` merujuk hanya kepada kandungan. `padding` dan `border` ditambah.	`width` + `padding` + `border`
`border-box`	`width` merangkumi semua (termasuk kandungan, `padding`, `border`)	`width` yang ditetapkan digunakan sebagaimana adanya.

Kelebihan `box-sizing`

Menggunakan border-box menstabilkan susun atur. Menambahkan padding atau border tidak mengubah saiz yang ditetapkan, menjadikan pengiraan lebih mudah.
Ia berguna semasa mencipta susun atur yang fleksibel. Dalam reka bentuk responsif atau susun atur kompleks, border-box sering digunakan untuk mengelakkan perubahan saiz yang tidak dijangka.

Cara menerapkan `border-box` secara global

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

Dengan menetapkan CSS dengan cara ini, anda boleh menerapkan border-box pada semua elemen untuk mengelakkan perubahan saiz yang tidak dijangka.

Ringkasan

box-sizing mengawal sama ada padding dan border dimasukkan dalam width dan height elemen.
Menggunakan border-box memudahkan pengiraan saiz dan sesuai untuk reka bentuk responsif.

Ciri `visibility`

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

Ciri visibility digunakan untuk menunjukkan atau menyembunyikan elemen, tetapi tidak seperti ciri display, ia mempengaruhi susun atur walaupun elemen tersebut disembunyikan. Ia hanya menyembunyikan elemen, mengekalkan kedudukannya dan saiz asalnya tanpa mempengaruhi susun atur elemen lain.

Sintaks Asas

1element {
2    visibility: value;
3}

value: Nilai yang menentukan keterlihatan elemen.

Jenis nilai

Ciri visibility boleh ditetapkan kepada nilai-nilai berikut:.

`visible`

Menentukan visible akan memaparkan elemen tersebut. Ini adalah nilai lalai.

`hidden`

Menentukan hidden akan menyembunyikan elemen tetapi ruang susunannya akan dikekalkan.

`collapse`

collapse biasanya digunakan untuk baris atau lajur dalam jadual. Elemen menjadi tidak kelihatan dan ruangnya juga diabaikan. Apabila diterapkan pada baris atau lajur jadual, baris atau lajur yang tersembunyi akan sepenuhnya dikeluarkan dari susunan.
Namun, apabila digunakan pada elemen blok atau selari biasa, kecuali elemen jadual, ia bertindak seperti hidden dan ruang susunan dikekalkan.

`inherit`

Menentukan inherit akan mewarisi nilai sifat visibility dari elemen induk.

Perbezaan antara `visibility` dan `display`

Berikut adalah perbezaan antara visibility dan display.

visibility: hidden menyembunyikan elemen tetapi mengekalkan ruang dan susunannya.
display: none sepenuhnya mengeluarkan elemen dari susunan, membolehkan elemen lain mengisi ruang tersebut.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Sifat CSS untuk Paparan Kod dan Petikan Ciri-ciri CSS berkaitan dengan latar belakang

Sifat-sifat CSS berkaitan dengan model kotak

YouTube Video

HTML untuk Pratonton

Berkaitan Model Kotak

Sifat-sifat width dan height

Nilai yang boleh ditetapkan

Menentukan Nilai Minimum dan Maksimum

Sifat-sifat margin dan padding

Sifat margin

Notasi ringkas:

Sifat padding

Fungsi:

Notasi ringkas:

Sifat box-sizing

Nilai box-sizing

content-box

border-box

Ringkasan perbezaan box-sizing

Kelebihan box-sizing

Cara menerapkan border-box secara global

Ringkasan

Ciri visibility

Sintaks Asas

Jenis nilai

visible

hidden

collapse

inherit

Perbezaan antara visibility dan display

YouTube Video

Sifat-sifat `width` dan `height`

Sifat-sifat `margin` dan `padding`

Sifat `margin`

Sifat `padding`

Sifat `box-sizing`

Nilai `box-sizing`

`content-box`

`border-box`

Ringkasan perbezaan `box-sizing`

Kelebihan `box-sizing`

Cara menerapkan `border-box` secara global

Ciri `visibility`

`visible`

`hidden`

`collapse`

`inherit`

Perbezaan antara `visibility` dan `display`