CSS Box Model – Cách sử dụng Box Model trong CSS

CSS Box Model là một khung bao quanh một thành phần trên trang web, bao gồm các thành phần sau: edge, border, padding và content. CSS Box Model được sử dụng để phát triển thiết kế và cấu trúc của một trang web. Nó cung cấp cho người dùng một bộ công cụ để cá nhân hóa bố cục của các thành phần khác nhau trên trang web.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

Tổng quan CSS Box Model là gì

Theo CSS Box Model, trình duyệt web cung cấp cho mỗi thành phần trên trang web một hình hộp chữ nhật. Các thuộc tính CSS như width, height, padding, border và margin sẽ quyết định không gian mà một thành phần sẽ chiếm trên trang web. CSS Box Model chứa các thuộc tính khác nhau trong CSS, bao gồm Border, Margin, Padding và Content.

Các thành phần trên trang web có thể được miêu tả bằng một hoặc nhiều hình hộp chữ nhật. Một CSS Box Model là một hộp chứa các thuộc tính như Edge, Border, Padding và Content. Nó được sử dụng để tạo ra bố cục và cấu trúc của một trang web.

Hướng dẫn CSS Box Model

CSS Box Model là một mô hình mô tả cách các phần tử HTML được hiển thị trên màn hình. CSS Box Model bao gồm bốn phần chính:

• Content là phần chứa nội dung của phần tử HTML.
• Padding là khoảng trống xung quanh nội dung của phần tử HTML.
• Border là đường viền xung quanh phần tử HTML.
• Margin là khoảng trống xung quanh phần tử HTML và các phần tử HTML khác.

Dưới đây là một số ví dụ về cách sử dụng CSS Box Model:

Điều chỉnh kích thước của nội dung

Bạn có thể sử dụng thuộc tính width và height để điều chỉnh kích thước của nội dung của phần tử HTML.

Ví dụ: sau đây là một ví dụ về cách sử dụng CSS Box Model để điều chỉnh kích thước của nội dung của một phần tử HTML:

<div style="width: 100px; height: 100px;">
  This is a div with a width of 100px and a height of 100px.
</div>

Trong ví dụ này, kích thước của nội dung của phần tử HTML được điều chỉnh thành 100px theo chiều rộng và 100px theo chiều cao.

Thêm khoảng trống xung quanh nội dung

Bạn có thể sử dụng thuộc tính padding để thêm khoảng trống xung quanh nội dung của phần tử HTML.

Ví dụ: sau đây là một ví dụ về cách sử dụng CSS Box Model để thêm khoảng trống xung quanh nội dung của một phần tử HTML:

<div style="padding: 10px;">
  This is a div with padding of 10px.
</div>

Trong ví dụ này, khoảng trống xung quanh nội dung của phần tử HTML được thêm là 10px theo tất cả các phía.

Thêm đường viền xung quanh phần tử HTML

Bạn có thể sử dụng thuộc tính border để thêm đường viền xung quanh phần tử HTML.

Ví dụ: sau đây là một ví dụ về cách sử dụng CSS Box Model để thêm đường viền xung quanh một phần tử HTML:

<div style="border: 1px solid black;">
  This is a div with a 1px solid black border.
</div>

Trong ví dụ này, đường viền xung quanh phần tử HTML có độ dày 1px và màu đen.

Thêm khoảng trống xung quanh phần tử HTML và các phần tử HTML khác

Bạn có thể sử dụng thuộc tính margin để thêm khoảng trống xung quanh phần tử HTML và các phần tử HTML khác.

Ví dụ: sau đây là một ví dụ về cách sử dụng CSS Box Model để thêm khoảng trống xung quanh một phần tử HTML:

<div style="margin: 10px;">
  This is a div with margin of 10px.
</div>

Trong ví dụ này, khoảng trống xung quanh phần tử HTML và các phần tử HTML khác được thêm là 10px theo tất cả các phía.

Border Field

Đây là khu vực giữa padding-box và margin. Tỷ lệ của nó được xác định bởi chiều rộng và chiều cao của đường biên. Vùng biên được tạo ra bằng các thuộc tính như border-style, border-width và border-color.

Margin Field

Khu vực này bao gồm vùng giữa đường biên và cạnh của margin-box. Kích thước của vùng margin bằng với chiều rộng và chiều cao của margin-box. Nó được sử dụng để tách sản phẩm khỏi các node hàng xóm.

Padding Field

Khu vực này yêu cầu việc thêm padding cho thành phần trên trang web. Thực chất, đây là không gian xung quanh khu vực chủ đề và bên trong border-box. Chiều rộng và chiều cao của hộp padding quyết định tỷ lệ của nó.

Content Field

Khu vực này bao gồm nội dung như văn bản, hình ảnh hoặc các phương tiện số khác. Nó được giới hạn bởi mép thông tin, và tỷ lệ của nó được quyết định bởi chiều rộng và chiều cao của hộp content.

Elements of the width and height

Thông thường, khi bạn gán chiều rộng và chiều cao của một thành phần bằng cách sử dụng các thuộc tính CSS width và height, điều này có nghĩa là bạn chỉ đặt chiều rộng và chiều cao của khu vực chủ đề của thành phần đó. Chiều rộng và chiều cao bổ sung của hộp unit được dựa trên một loạt ảnh hưởng.

Kích thước khu vực mà một hộp thành phần có thể chiếm trên trang web được đo như sau-

Kích thước của hộp

Size of the box	Properties of CSS
Height	height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
Width	width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

Thêm ví dụ cụ thể:

<!DOCTYPE html> 
<head> 
<title>CSS Box Model</title> 
<style> 
            .main 
{ 
                font-size:30px; 
                font-weight:bold; 
                Text-align:center; 
            } 
            .gfg 
{ 
                margin-left:50px; 
                border:50px solid Purple; 
                width:300px; 
                height:200px; 
                text-align:center; 
                padding:50px; 
            } 
            .gfg1 
{ 
                font-size:40px; 
                font-weight:bold; 
                color:black; 
                margin-top:60px; 
                background-color:purple; 
            } 
            .gfg2 
{ 
                font-size:20px; 
                font-weight:bold; 
                background-color:white; 
            } 
</style> 
</head> 
<body> 
<div class = "main">CSS Box-Model Property</div> 
        	<div class = "gfg"> 
            <div class = "gfg1">Lap Trinh Vien</div> 
            <div class = "gfg2">A best portal for learn Technologies</div> 
</div> 
</body> 
</html>

Kết Quả:

Ưu và Nhược điểm CSS Box Model

Ưu điểm

• Giúp tạo ra cấu trúc và bố cục cho trang web một cách dễ dàng hơn.
• Có thể tùy chỉnh kích thước và vị trí của các thành phần trên trang web.
• Cho phép bạn kiểm soát khoảng cách giữa các thành phần trên trang web.

Nhược điểm

• Gây khó khăn khi cố gắng nối các phần tử trên trang web lại với nhau.
• Không hoàn toàn có thể tùy biến để đáp ứng tất cả yêu cầu thiết kế của người dùng.

Lời khuyên CSS Box Model

• Hãy sử dụng CSS Box Model như một công cụ để tạo ra bố cục và cấu trúc cho trang web của bạn, nhưng đừng quá lạm dụng nó.
• Đảm bảo rằng các thành phần trên trang web của bạn được căn chỉnh chính xác để đảm bảo tính thẩm mỹ và khả năng tương thích trên nhiều thiết bị khác nhau.