Trình duyệt sử dụng mô hình hộp CSS để xác định cách một phần tử sẽ xuất hiện trên trang web. Mô hình hộp biểu thị kích thước của một phần tử và đường viền, phần đệm và lề của phần tử đó. Bạn có thể tạo kiểu riêng cho từng phần tử này.
Mọi phần tử được bao quanh bởi một hộp. Có thể hiểu cách hoạt động của các hộp này là một phần thiết yếu của việc định vị các mục theo cách bạn muốn trên trang web.
Mô hình hộp CSS được sử dụng để xác định cách hộp xuất hiện và cách định vị hộp trên trang web. Mô hình này đề cập đến bốn thành phần — nội dung, phần đệm, đường viền và lề — tạo nên một hộp trong CSS. Hướng dẫn này sẽ thảo luận về những điều cơ bản của mô hình hộp CSS và các phần chính của nó.
Mô hình hộp CSS
Mô hình hộp CSS là cấu trúc được áp dụng cho tất cả các hộp trong CSS. Mô hình hộp này hướng dẫn trình duyệt về cách các phần khác nhau của hộp tạo ra một phần tử sẽ xuất hiện trên trang web. Mô hình hộp đại diện cho nội dung, phần đệm, đường viền và lề của hộp.
Hãy xem xét từng phần tử của mô hình hộp:
- Nội dung. Nội dung của hộp, nơi văn bản, biểu mẫu, hình ảnh và các phần tử web khác sẽ xuất hiện.
- Lớp đệm. Khoảng trống giữa nội dung của hộp và đường viền của hộp. Phần đệm cho hộp là trong suốt.
- Đường viền. Đường viền bao quanh nội dung của hộp hoặc xung quanh phần đệm của hộp nếu giá trị phần đệm được chỉ định.
- Số tiền ký quỹ. Khoảng cách giữa mép ngoài của đường viền và các phần tử khác trên trang web. Phần đệm cho hộp là trong suốt.
Hãy thảo luận về từng thành phần này và cách sử dụng chúng từng thành phần một.
Khu vực nội dung
Vùng nội dung nằm ở trung tâm của mô hình hộp. Đây là nơi văn bản, hình ảnh và các phần tử khác xuất hiện trong phần tử web. Chúng tôi sử dụng thuộc tính CSS chiều cao và chiều rộng để xác định kích thước của vùng nội dung.
Theo mặc định, kích thước của một vùng nội dung sẽ bằng kích thước của các phần tử của nó. Nếu bạn có một dòng văn bản, hộp sẽ dài và cao bằng dòng văn bản.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Giả sử chúng ta muốn thiết kế một hộp có chiều cao 200px x chiều rộng 200px. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:
<html>
<p>This is a box.</p>
</html>
<style>
p {
height: 200px;
width: 200px;
}
</style>
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Chúng tôi đã sử dụng thẻ
HTML để tạo một đoạn văn bản. Hãy nhớ rằng mọi yếu tố trong thiết kế web đều nằm trong một hộp, vì vậy mô hình hộp sẽ áp dụng cho thẻ
của chúng tôi. Trong mã CSS của chúng tôi, chúng tôi tạo một quy tắc đặt chiều cao của tất cả các thẻ
thành 200px. Chúng tôi cũng đặt chiều rộng của tất cả các thẻ
thành 200px.
Để tìm hiểu thêm về chiều rộng và chiều cao cũng như khu vực nội dung CSS, hãy đọc hướng dẫn dành cho người mới bắt đầu của chúng tôi về chiều cao và chiều rộng CSS.
Vùng đệm
Vùng đệm mở rộng vùng nội dung. Nó tạo ra một khoảng cách giữa nội dung của một hộp và đường viền của nó. Phần đệm thường được sử dụng để tạo biểu ngữ và các yếu tố thông báo khác trên trang web.
Để áp dụng phần đệm cho một hộp, chúng ta có thể sử dụng thuộc tính phần đệm CSS. Giả sử chúng ta muốn áp dụng một padding 25px xung quanh hộp cuối cùng của chúng ta. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:
<html>
<p>This is a box.</p>
</html>
<style>
p {
height: 200px;
width: 200px;
padding: 20px;
}
</style>
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Chúng tôi đã chỉ định thuộc tính “padding” và đặt giá trị của nó thành 20px. Điều này tạo ra khoảng cách 20px giữa vùng nội dung của hộp và đường viền của hộp.
Bây giờ có một khoảng cách giữa hộp của chúng ta và mép của trang.
Khu vực biên giới
Khu vực đường viền là nơi đường viền cho một hộp sẽ xuất hiện. Các đường viền được tô màu bên ngoài bất kỳ phần đệm nào. Bạn có thể sử dụng bất kỳ màu nào để tạo kiểu cho đường viền. Cũng có một số thiết kế tích hợp cho đường viền.
Giả sử chúng ta muốn thêm một đường viền màu xanh nhạt rộng 5px xung quanh hộp của chúng ta. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:
<html>
<p>This is a box.</p>
</html>
<style>
p {
height: 200px;
width: 200px;
padding: 20px;
border: 5px solid lightblue;
}
</style>
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Chúng tôi sử dụng thuộc tính CSS “border” để xác định đường viền màu xanh lam nhạt rộng 5px. Đường viền này sử dụng kiểu "solid", tạo ra một đường viền đơn. Lưu ý rằng đường viền của chúng ta được tách biệt với nội dung của hộp của chúng ta. Điều này là do chúng tôi đã chỉ định một khoảng đệm 20px xung quanh hộp của chúng tôi.
Khu vực ký quỹ
Vùng lề là lớp ngoài cùng của mô hình hộp. Khu vực này tạo ra một khoảng trống ngăn cách một phần tử với các phần tử khác trên trang web.
Giả sử chúng ta muốn tạo một khoảng trống 10px giữa hai hộp trên một trang web. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:
<html>
<p>This is a box.</p>
<p>This is another box.</p>
</html>
<style>
p {
height: 200px;
width: 200px;
padding: 20px;
border: 5px solid lightblue;
margin: 10px;
}
</style>
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Lần này, chúng tôi đã chỉ định hai hộp trong tệp HTML của mình. Sau đó, chúng tôi đã áp dụng lề 10px cho hộp của mình bằng cách sử dụng thuộc tính “margin”.
Như bạn có thể thấy, bây giờ có một khoảng cách 10px giữa các hộp của chúng ta. Điều này là do chúng tôi đã áp dụng một mức lợi nhuận cho các hộp của chúng tôi. Điều này tạo ra khoảng cách giữa đường viền của các hộp của chúng tôi và các phần tử khác trên trang web.
Để tìm hiểu thêm về vùng ký quỹ, hãy đọc hướng dẫn của chúng tôi về vùng ký quỹ CSS.
Tính toán chiều rộng và chiều cao
Một sai lầm mà người mới bắt đầu thường mắc phải là giả định rằng chiều cao của một phần tử và chiều rộng của nó chiếm phần đệm, lề và đường viền. Điều này không chính xác.
Thuộc tính chiều cao và chiều rộng cho phép bạn đặt chiều cao và chiều rộng của vùng nội dung của một phần tử web. Điều này không tính đến các yếu tố khác trên trang web.
Nếu chúng tôi muốn biết mẫu hộp hoàn chỉnh của chúng tôi trước đó chiếm bao nhiêu dung lượng, chúng tôi sẽ cần chạy một phép tính nhanh. Dưới đây là các giá trị mà chúng tôi đã chỉ định trong ví dụ về "vùng ký quỹ" của chúng tôi từ phần trước:
- Chiều cao:200px
- Chiều rộng:200px
- Đệm:20px
- Lề:10px
- Đường viền:5px
Để tính chiều rộng, chúng ta có thể sử dụng công thức sau:
- 200px (chiều rộng) +
- 40px (phần đệm trái và phải) +
- 10px (viền trái và phải) +
- 20px (lề trái và phải)
Điều này khiến chúng tôi có tổng cộng 270px .
Để tính chiều cao, chúng tôi sẽ sử dụng chiều cao của hộp. Chúng tôi cũng sẽ sử dụng các giá trị trên cùng và dưới cùng cho phần đệm, đường viền và lề.
Kết luận
Mô hình hộp CSS là cấu trúc được sử dụng để hiển thị một phần tử trên trang web. Mọi phần tử trong HTML đều là một hình hộp chữ nhật. Mô hình hộp xác định cách nội dung, phần đệm, đường viền và lề xuất hiện cho một hộp.
Bạn có muốn tìm hiểu thêm về cách thiết kế trang web bằng CSS? Hãy xem hướng dẫn Cách học CSS của chúng tôi. Hướng dẫn này chứa danh sách các tài nguyên học tập hàng đầu mà bạn có thể sử dụng để xây dựng kiến thức về CSS.