Các thuộc tính CSS liên quan đến mô hình hộp

Articles

Bài viết này giải thích các thuộc tính CSS liên quan đến mô hình hộp.

Bạn có thể tìm hiểu về các trường hợp sử dụng và cú pháp cho các thuộc tính như chiều rộng, chiều cao và khoảng cách lề.

YouTube Video

HTML để Xem trước

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>

Liên quan đến Mô hình Hộp

Thuộc tính `width` và `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}

Thuộc tính width và height là các thuộc tính CSS dùng để xác định chiều rộng và chiều cao của một phần tử. Các thuộc tính này đặc biệt được sử dụng khi thiết lập kích thước cho các phần tử khối, hình ảnh, video, v.v.

Trong lớp width-height-fixed, các giá trị cố định được xác định cho chiều rộng và chiều cao.
Trong lớp width-height-percent, các giá trị phần trăm được xác định cho chiều rộng và chiều cao.

Các giá trị có thể được chỉ định

Thuộc tính width và height có thể có các giá trị sau đây.

auto: Kích thước mặc định. Tự động điều chỉnh kích thước so với phần tử cha.
Giá trị cố định: Xác định chiều rộng cố định bằng pixel, phần trăm, hoặc đơn vị tương đối.(ex: 100px, 50%, 10rem)
- Ví dụ, 250px đặt kích thước phần tử thành 250 pixel, và 50% đặt nó bằng 50% kích thước phần tử cha.
min-content: Đặt vừa kích thước nhỏ nhất của nội dung.
max-content: Đặt vừa kích thước lớn nhất của nội dung.
fit-content: Điều chỉnh kích thước phần tử phù hợp với kích thước nội dung.

Xác định Giá trị Tối thiểu và Tối đa

min-width, max-width, min-height và max-height là các thuộc tính CSS được sử dụng để đặt giới hạn kích thước liên quan đến chiều rộng và chiều cao của một phần tử. Bằng cách sử dụng những thuộc tính này, bạn có thể đảm bảo rằng một phần tử nằm trong một phạm vi kích thước cụ thể.

Thuộc tính `margin` và `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 và padding là các thuộc tính được sử dụng trong CSS để kiểm soát khoảng cách bên ngoài và bên trong của các phần tử trong mô hình hộp. Chúng được sử dụng để điều chỉnh khoảng cách giữa các phần tử và sắp xếp giao diện gọn gàng hơn.

Trong lớp margin-padding, cả margin và padding đều được chỉ định. Có khoảng trống margin ở bên ngoài đường viền và khoảng trống padding ở bên trong đường viền.
Trong lớp margin-only, chỉ có margin được chỉ định. Bạn có thể thấy rằng khu vực màu xanh nhỏ hơn so với lớp margin-padding vì không có khoảng trống padding ở bên trong đường viền.
Trong lớp no-margin, cả margin và padding đều được đặt là 0. Bạn có thể thấy rằng khu vực màu xanh được đẩy hoàn toàn sang bên trái vì không có khoảng trống margin ở bên ngoài đường viền.

Theo cách này, thuộc tính margin đặt khoảng cách bên ngoài của một phần tử, điều chỉnh khoảng cách giữa các phần tử. Ngược lại, thuộc tính padding đặt khoảng cách bên trong của một phần tử, điều chỉnh khoảng cách giữa nội dung và đường viền.

Thuộc tính `margin`

Thuộc tính margin đặt khoảng cách bên ngoài (margin) của một phần tử. Nó được sử dụng để tạo khoảng cách giữa các phần tử liền kề. Các giá trị sau có thể được chỉ định:.
Giá trị cố định: Bạn có thể chỉ định kích thước của margin bằng pixel, đơn vị tương đối (em, rem), hoặc phần trăm.(ex: 10px, 1em, 5%)
auto: Hữu ích để căn giữa các phần tử khối. Khi chiều rộng được chỉ định, nó tự động điều chỉnh các khoảng trống margin trái và phải.
Giá trị dương và âm: Giá trị dương mở rộng khoảng cách, trong khi giá trị âm đưa các phần tử lại gần nhau hơn.

Cách viết tắt:

 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}

Thuộc tính margin có thể nhận từ một đến bốn giá trị.

Một giá trị: Áp dụng cho tất cả các cạnh.
Hai giá trị: Giá trị đầu tiên áp dụng cho trên và dưới, giá trị thứ hai áp dụng cho trái và phải.
Ba giá trị: Áp dụng theo thứ tự trên, trái và phải, dưới.
Bốn giá trị: Áp dụng theo thứ tự trên, phải, dưới, trái.

Thuộc tính `padding`

Chức năng:

Thuộc tính padding thiết lập khoảng cách bên trong (padding) của một phần tử. Nó được sử dụng để tạo khoảng cách giữa nội dung và đường viền của một phần tử. Các giá trị sau có thể được chỉ định:.
Giá trị cố định: Xác định kích thước của padding.(ex: 10px, 1em, 5%)
Không thể sử dụng giá trị âm. Giá trị padding chỉ có thể được chỉ định là số dương.

Cách viết tắt:

 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}

Giống như margin, bạn có thể chỉ định từ một đến bốn giá trị.

Một giá trị: Áp dụng cho tất cả các cạnh.
Hai giá trị: Giá trị đầu tiên áp dụng cho trên và dưới, giá trị thứ hai áp dụng cho trái và phải.
Ba giá trị: Áp dụng theo thứ tự trên, trái và phải, dưới.
Bốn giá trị: Áp dụng theo thứ tự trên, phải, dưới, trái.

Thuộc tính `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 là một thuộc tính CSS kiểm soát cách tính chiều rộng và chiều cao của một phần tử.

Trong lớp content-box, chiều rộng của phần tử là 360px. width là 300px, cộng với padding trái và phải tổng cộng 40px và border trái và phải tổng cộng 20px, thành tổng cộng 360px.
Trong border-box, chiều rộng của phần tử là 300px. padding và border được bao gồm trong width đã chỉ định.

Các giá trị của `box-sizing`

Chủ yếu có hai giá trị cho box-sizing: content-box và border-box, trong đó content-box là giá trị mặc định.

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

Khi content-box được chỉ định, chỉ chiều rộng và chiều cao nội dung được thiết lập bởi width và height. padding và border được thêm vào để xác định kích thước cuối cùng. Nói cách khác, width và height chỉ đề cập đến vùng nội dung.

Trong ví dụ này, width được chỉ định là 200px, nhưng khi cộng thêm chiều rộng của padding và border trái và phải, chiều rộng thực tế cuối cùng của phần tử là 260px.

`border-box`

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

Khi border-box được chỉ định, width và height được tính bao gồm cả padding và border. Nói cách khác, width và height được chỉ định trở thành kích thước tổng của nội dung, padding và border.

Trong trường hợp này, width được chỉ định là 200px, và do padding và border cũng được bao gồm, nên chiều rộng thực tế cuối cùng của phần tử vẫn là 200px. padding và border được điều chỉnh trong đó.

Tóm tắt sự khác biệt của `box-sizing`.

Thuộc tính	Phương pháp Tính toán	Tính toán Chiều rộng Thực tế
`content-box` (mặc định)	`width` chỉ đề cập đến nội dung. `padding` và `border` được thêm vào.	`width` + `padding` + `border`
`border-box`	`width` là tất cả (bao gồm nội dung, `padding`, `border`)	`width` được chỉ định sẽ được giữ nguyên.

Ưu điểm của `box-sizing`.

Sử dụng border-box giúp bố cục ổn định. Thêm padding hoặc border không làm thay đổi kích thước được chỉ định, giúp tính toán đơn giản hơn.
Điều này hữu ích khi tạo bố cục linh hoạt. Trong các thiết kế responsive hoặc bố cục phức tạp, border-box thường được sử dụng để tránh sự dao động kích thước không mong muốn.

Cách áp dụng `border-box` trên toàn cầu.

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

Bằng cách thiết lập CSS như vậy, bạn có thể áp dụng border-box cho tất cả các phần tử để tránh sự thay đổi kích thước không mong muốn.

Tóm tắt

box-sizing kiểm soát xem padding và border có được bao gồm trong width và height của phần tử hay không.
Sử dụng border-box giúp việc tính toán kích thước dễ dàng hơn và phù hợp với thiết kế responsive.

Thuộc tính `visibility`.

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

Thuộc tính visibility được sử dụng để hiển thị hoặc ẩn các phần tử, nhưng không giống như thuộc tính display, nó vẫn ảnh hưởng đến bố cục ngay cả khi phần tử bị ẩn. Nó chỉ ẩn phần tử, giữ nguyên vị trí và kích thước ban đầu mà không ảnh hưởng đến bố cục của các phần tử khác.

Cú pháp Cơ bản

1element {
2    visibility: value;
3}

value: Một giá trị xác định khả năng hiển thị của phần tử.

Các loại giá trị.

Thuộc tính visibility có thể được đặt thành các giá trị sau:.

`visible`

Chọn visible sẽ hiển thị phần tử. Đây là giá trị mặc định.

`hidden`

Chỉ định hidden sẽ làm ẩn phần tử nhưng không gian bố cục của nó vẫn được giữ lại.

`collapse`

collapse chủ yếu được sử dụng cho các hàng hoặc cột trong bảng. Phần tử trở nên vô hình và không gian của nó cũng bị bỏ qua. Khi được áp dụng cho các hàng hoặc cột trong bảng, các hàng hoặc cột bị ẩn sẽ bị xóa hoàn toàn khỏi bố cục.
Tuy nhiên, khi được sử dụng trên các phần tử block hoặc inline thông thường, ngoại trừ các phần tử bảng, nó hoạt động giống như hidden và không gian bố cục được giữ lại.

`inherit`

Chỉ định inherit sẽ thừa hưởng giá trị thuộc tính visibility từ phần tử cha.

Sự khác biệt giữa `visibility` và `display`

Có các sự khác biệt sau giữa visibility và display.

visibility: hidden làm ẩn phần tử nhưng giữ lại không gian và bố cục của nó.
display: none xóa hoàn toàn phần tử khỏi bố cục, cho phép các phần tử khác điền vào khoảng không gian đó.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

Các thuộc tính CSS cho hiển thị mã và trích dẫn Thuộc tính CSS liên quan đến nền

Các thuộc tính CSS liên quan đến mô hình hộp

YouTube Video

HTML để Xem trước

Liên quan đến Mô hình Hộp

Thuộc tính width và height

Các giá trị có thể được chỉ định

Xác định Giá trị Tối thiểu và Tối đa

Thuộc tính margin và padding

Thuộc tính margin

Cách viết tắt:

Thuộc tính padding

Chức năng:

Cách viết tắt:

Thuộc tính box-sizing

Các giá trị của box-sizing

content-box

border-box

Tóm tắt sự khác biệt của box-sizing.

Ưu điểm của box-sizing.

Cách áp dụng border-box trên toàn cầu.

Tóm tắt

Thuộc tính visibility.

Cú pháp Cơ bản

Các loại giá trị.

visible

hidden

collapse

inherit

Sự khác biệt giữa visibility và display

YouTube Video

Thuộc tính `width` và `height`

Thuộc tính `margin` và `padding`

Thuộc tính `margin`

Thuộc tính `padding`

Thuộc tính `box-sizing`

Các giá trị của `box-sizing`

`content-box`

`border-box`

Tóm tắt sự khác biệt của `box-sizing`.

Ưu điểm của `box-sizing`.

Cách áp dụng `border-box` trên toàn cầu.

Thuộc tính `visibility`.

`visible`

`hidden`

`collapse`

`inherit`

Sự khác biệt giữa `visibility` và `display`