Mga katangian ng CSS na nauugnay sa modelong kahon

Articles

Ipinaliwanag ng artikulong ito ang mga katangian ng CSS na nauugnay sa modelong kahon.

Matututuhan mo ang mga gamit at syntax para sa mga katangian gaya ng lapad, taas, at gilid (margin).

YouTube Video

HTML para sa Preview

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>

May Kaugnayan sa Modelong Kahon

Mga Katangian ng `width` at `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}

Ang mga katangiang width at height ay mga katangian ng CSS na ginagamit upang tukuyin ang lapad at taas ng isang elemento. Kadalasang ginagamit ang mga ito sa pagtatakda ng sukat ng mga block elements, larawan, bidyo, atbp.

Sa klase ng width-height-fixed, nakatakdang halaga ang inilalaan para sa lapad at taas.
Sa klase ng width-height-percent, porsiyentong halaga ang inilalaan para sa lapad at taas.

Mga halagang maaaring italaga

Ang mga katangiang width at height ay maaaring magkaroon ng sumusunod na mga halaga.

auto: Karaniwang laki. Awtomatikong ina-adjust ang laki batay sa sukat ng parent na elemento.
Nakasaad na halaga: Nagtatakda ng nakatakdang lapad sa piksel, porsiyento, o kaugnay na mga yunit.(ex: 100px, 50%, 10rem)
- Halimbawa, ang 250px ay nagtatalaga ng lapad ng elemento sa 250 na piksel, at ang 50% ay umaayon sa 50% ng sukat ng parent na elemento.
min-content: Umaayon sa pinakamababang laki ng nilalaman.
max-content: Umaayon sa pinakamalaking laki ng nilalaman.
fit-content: Ina-adjust ang laki ng elemento ayon sa sukat ng nilalaman.

Pagtatakda ng Minimum at Maximum na Halaga

Ang min-width, max-width, min-height, at max-height ay mga katangian ng CSS na ginagamit upang magtakda ng mga hangganan ng sukat tungkol sa lapad at taas ng isang elemento. Gamit ang mga ito, masisiguro mong nananatili ang isang elemento sa isang partikular na saklaw ng laki.

Mga katangian ng `margin` at `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}

Ang margin at padding ay mga katangian sa CSS na ginagamit upang kontrolin ang panlabas at panloob na espasyo ng mga elemento sa loob ng modelong kahon. Ginagamit ang mga ito upang ayusin ang espasyo sa pagitan ng mga elemento at upang magmukhang mas maayos ang itsura.

Sa margin-padding na klase, parehong margin at padding ay tinukoy. Mayroong espasyo ng margin sa labas ng solidong hangganan at espasyo ng padding sa loob ng solidong hangganan.
Sa margin-only na klase, tanging margin lamang ang tinukoy. Makikita mo na ang asul na bahagi ay mas maliit kumpara sa margin-padding na klase dahil walang espasyo ng padding sa loob ng solidong hangganan.
Sa no-margin na klase, parehong margin at padding ay itinakda sa 0. Makikita mo na ang asul na bahagi ay itinulak nang buo sa kaliwa dahil walang espasyo ng margin sa labas ng solidong hangganan.

Sa ganitong paraan, ang katangiang margin ay nagtatakda ng panlabas na espasyo ng isang elemento, inaayos ang distansya sa pagitan ng mga elemento. Sa kabilang banda, ang katangiang padding ay nagtatakda ng panloob na espasyo ng isang elemento, inaayos ang distansya sa pagitan ng nilalaman at hangganan.

Katangian ng `margin`

Itinakda ng katangiang margin ang panlabas na espasyo (margin) ng isang elemento. Ginagamit ito upang makagawa ng espasyo sa pagitan ng magkatabing mga elemento. Ang sumusunod na mga halaga ay maaaring itakda:.
Mga nakatakdang halaga: Maaari mong itakda ang laki ng margin sa pixels, mga yunit na may kaugnayan (em, rem), o porsyento.(ex: 10px, 1em, 5%)
auto: Kapaki-pakinabang para sa paglalagay ng block elements sa gitna. Kapag itinakda ang lapad, awtomatikong inaayos nito ang mga margin sa kaliwa at kanan.
Positibo at negatibong mga halaga: Ang positibong mga halaga ay nagpapalawak ng espasyo, samantalang ang negatibong mga halaga ay nagpapalapit sa mga elemento.

Pinaikling notasyon:

 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}

Ang katangiang margin ay maaaring tumanggap ng isa hanggang apat na halaga.

Isang halaga: Nalalapat sa lahat ng panig.
Dalawang halaga: Ang una ay nalalapat sa itaas at ibaba, ang pangalawa sa kaliwa at kanan.
Tatlong halaga: Nalalapat sa pagkakasunod ng itaas, kaliwa at kanan, ibaba.
Apat na halaga: Nalalapat sa pagkakasunod ng itaas, kanan, ibaba, kaliwa.

Katangiang `padding`

Gamit:

Ang padding na property ay nagtatakda ng panloob na espasyo (padding) ng isang elemento. Ginagamit ito upang lumikha ng espasyo sa pagitan ng nilalaman at hangganan ng isang elemento. Ang sumusunod na mga halaga ay maaaring itakda:.
Nakatakdang halaga: Tinutukoy ang sukat ng padding.(ex: 10px, 1em, 5%)
Hindi maaaring gumamit ng negatibong halaga. Ang mga halaga para sa padding ay kailangang positibong numero lamang.

Pinaikling notasyon:

 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}

Gaya ng margin, maaari kang tumukoy ng isa hanggang apat na halaga.

Isang halaga: Nalalapat sa lahat ng panig.
Dalawang halaga: Ang una ay nalalapat sa itaas at ibaba, ang pangalawa sa kaliwa at kanan.
Tatlong halaga: Nalalapat sa pagkakasunod ng itaas, kaliwa at kanan, ibaba.
Apat na halaga: Nalalapat sa pagkakasunod ng itaas, kanan, ibaba, kaliwa.

`box-sizing` na property

 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}

Ang box-sizing ay isang CSS na property na kumokontrol kung paano kinakalkula ang lapad at taas ng isang elemento.

Sa content-box na klase, ang lapad ng elemento ay 360px. Ang width ay 300px, kasama ang kaliwa at kanang padding na kabuuang 40px at kaliwa at kanang border na kabuuang 20px, kaya nagiging 360px ang kabuuan.
Sa border-box, ang lapad ng elemento ay 300px. Kasama na ang padding at border sa itinakdang width.

Mga halaga ng `box-sizing`

May pangunahing dalawang halaga para sa box-sizing: content-box at border-box, kung saan ang content-box ang default na halaga.

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

Kapag itinakda ang content-box, ang lapad at taas ng nilalaman lamang ang itinatakda ng width at height. Idinadagdag ang padding at border dito upang matukoy ang huling sukat. Sa madaling salita, ang width at height ay tumutukoy lamang sa lugar ng nilalaman.

Sa halimbawang ito, ang itinakdang width ay 200px, ngunit dahil idinagdag ang lapad ng kaliwa at kanang padding at border, ang huling aktwal na lapad ng elemento ay 260px.

`border-box`

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

Kapag itinakda ang border-box, kinakalkula ang width at height kasama ang padding at border. Sa madaling salita, ang itinakdang width at height ay nagiging kabuuang sukat ng nilalaman, padding, at border.

Sa kasong ito, ang itinakdang width ay 200px, at dahil kasama ang padding at border, nananatiling 200px ang huling aktwal na lapad ng elemento. Inaayos ang padding at border sa loob nito.

Buod ng mga pagkakaiba sa `box-sizing`

Property	Paraan ng Pagkalkula	Aktwal na Pagkalkula ng Lapad
`content-box` (default)	ang `width` ay tumutukoy lamang sa nilalaman. Idinagdag ang `padding` at `border`.	`width` + `padding` + `border`
`border-box`	`width` ay para sa lahat (kasama ang nilalaman, `padding`, `border`)	Ang tinukoy na `width` ay ginagamit nang walang pagbabago.

Mga Bentahe ng `box-sizing`

Ang paggamit ng border-box ay nagpapatatag ng layout. Ang pagdaragdag ng padding o border ay hindi binabago ang tinukoy na sukat, kaya nagiging mas madali ang mga kalkulasyon.
Ito ay kapaki-pakinabang kapag gumagawa ng mga flexible na layout. Sa mga responsive na disenyo o kumplikadong layout, ang border-box ay madalas na ginagamit upang maiwasan ang hindi inaasahang pagbabago sa sukat.

Paano ilapat ang `border-box` globally

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

Sa pamamagitan ng pagtatakda ng CSS sa ganitong paraan, maaari mong ilapat ang border-box sa lahat ng element upang maiwasan ang hindi inaasahang pagbabago sa sukat.

Buod

Kinokontrol ng box-sizing kung ang padding at border ay kasama sa width at height ng elemento.
Nagpapadali ang paggamit ng border-box sa mga kalkulasyon ng sukat at angkop ito para sa responsive na disenyo.

Ari-arian ng `visibility`

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

Ang ari-arian ng visibility ay ginagamit upang ipakita o itago ang mga elemento, ngunit hindi tulad ng ari-arian ng display, naaapektuhan nito ang layout kahit na ang elemento ay nakatago. Tinatago lamang nito ang elemento, pinapanatili ang orihinal na posisyon at laki nito nang hindi naaapektuhan ang layout ng ibang elemento.

Pangunahing Syntax

1element {
2    visibility: value;
3}

value: Isang halaga na tumutukoy sa visibility ng elemento.

Mga Uri ng Halaga

Ang ari-arian ng visibility ay maaaring itakda sa mga sumusunod na halaga:.

`visible`

Ang pagtukoy sa visible ay magpapakita sa elemento. Ito ang default na halaga.

`hidden`

Ang pagtukoy sa hidden ay magtatago sa elemento ngunit mananatili ang espasyo nito sa layout.

`collapse`

Ang collapse ay karaniwang ginagamit para sa mga hilera o kolum ng talahanayan. Ang elemento ay nagiging hindi nakikita at ang espasyo nito ay hindi rin pinapansin. Kapag inilapat sa mga hilera o kolum ng talahanayan, ang mga nakatagong hilera o kolum ay ganap na tinatanggal mula sa layout.
Gayunpaman, kapag ginamit sa mga regular na block o inline na elemento, maliban sa mga elemento ng table, ito ay kumikilos tulad ng hidden at ang espasyo ng layout ay nananatili.

`inherit`

Ang pagtukoy ng inherit ay magmamana ng halaga ng ari-ariang visibility mula sa parent na elemento.

Mga Pagkakaiba sa pagitan ng `visibility` at `display`

Narito ang mga sumusunod na pagkakaiba sa pagitan ng visibility at display.

Ang visibility: hidden ay itinatago ang elemento ngunit pinananatili ang espasyo at layout nito.
Ang display: none ay ganap na inaalis ang elemento mula sa layout, na nagpapahintulot sa ibang mga elemento na punan ang espasyong iyon.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video

Mga Katangian ng CSS para sa Pagpapakita ng Kodigo at mga Quotations Mga Katangian ng CSS na Kaugnay sa Background

Mga katangian ng CSS na nauugnay sa modelong kahon

YouTube Video

HTML para sa Preview

May Kaugnayan sa Modelong Kahon

Mga Katangian ng width at height

Mga halagang maaaring italaga

Pagtatakda ng Minimum at Maximum na Halaga

Mga katangian ng margin at padding

Katangian ng margin

Pinaikling notasyon:

Katangiang padding

Gamit:

Pinaikling notasyon:

box-sizing na property

Mga halaga ng box-sizing

content-box

border-box

Buod ng mga pagkakaiba sa box-sizing

Mga Bentahe ng box-sizing

Paano ilapat ang border-box globally

Buod

Ari-arian ng visibility

Pangunahing Syntax

Mga Uri ng Halaga

visible

hidden

collapse

inherit

Mga Pagkakaiba sa pagitan ng visibility at display

YouTube Video

Mga Katangian ng `width` at `height`

Mga katangian ng `margin` at `padding`

Katangian ng `margin`

Katangiang `padding`

`box-sizing` na property

Mga halaga ng `box-sizing`

`content-box`

`border-box`

Buod ng mga pagkakaiba sa `box-sizing`

Mga Bentahe ng `box-sizing`

Paano ilapat ang `border-box` globally

Ari-arian ng `visibility`

`visible`

`hidden`

`collapse`

`inherit`

Mga Pagkakaiba sa pagitan ng `visibility` at `display`