Mô hình hộp Cascading Style Sheets [CSS] là một trong những chủ đề quan trọng nhất trong CSS được sử dụng để tạo kiểu cho các phần tử HTML. Mô hình hộp CSS là một vùng chứa chứa các thuộc tính hoặc lớp như đường viền, lề, phần đệm và chính nội dung đó
Nó được sử dụng để tổ chức các phần tử HTML theo cách thích hợp. Nó có thể được sử dụng như một bộ công cụ để tùy chỉnh bố cục của các phần tử khác nhau. 😃
Phạm vi của Điều
- Bài viết này cung cấp cho bạn một bức tranh rõ ràng về cách hoạt động của mô hình hộp CSS
- Bài viết này giúp bạn hiểu mô hình hộp CSS với các ví dụ hay
- Bài viết này đề cập đến các thành phần cốt lõi của CSS Box Model
- Trong bài viết này, chúng tôi sẽ phân tích mô hình hộp CSS và hướng dẫn bạn cách sử dụng các thuộc tính này
điều kiện tiên quyết
- Kiến thức cơ bản về HTML là bắt buộc
- Kiến thức cơ bản về các đơn vị tạo kiểu CSS là bắt buộc
Tôi hy vọng, mọi người đều có ý tưởng xây dựng một trang web với các phần tử HTML
Giới thiệu
Trong quá trình phát triển web, mọi thành phần HTML cấp khối, cho dù đó là hình ảnh hay văn bản, bạn thấy trên trang web đều là một hộp hình chữ nhật, mặc dù nó có vẻ chỉ là văn bản
Thật đấy. Tin tôi đi
Hãy xem tại sao phần tử HTML lại tự động tạo thành một hộp?
Mô hình hộp CSS tự động hình thành trên các phần tử HTML do các công cụ kết xuất của trình duyệt. CSS xác định các kiểu như vị trí, kích thước, màu sắc, v.v. thuộc tính của các hộp này
Mỗi hộp bao gồm bốn phần [hoặc khu vực], được xác định bởi các cạnh tương ứng của chúng. cạnh nội dung, cạnh đệm, cạnh đường viền và cạnh lề. Nó giúp bạn xây dựng một bố cục trang web tuyệt vời. Bạn có thể dễ dàng xây dựng bố cục phức tạp bằng cách sử dụng mô hình hộp CSS
tôi có bạn. Bạn có thể có một câu hỏi thời gian này
Nếu chúng ta không sử dụng các thuộc tính mô hình hộp này thì sao?
Thật vậy, việc sử dụng các thuộc tính mô hình hộp CSS sẽ giúp cuộc sống dễ dàng hơn rất nhiều;
Mô hình hộp là gì?
Trong CSS, thuật ngữ “box model” được sử dụng khi nói về thiết kế và bố cục. Mô hình hộp CSS về cơ bản là một hộp bao quanh mọi phần tử HTML. Tất cả các phần tử HTML có thể được coi là "hộp", điều này bao gồm thẻ div, thẻ p hoặc thẻ. Mỗi hộp có năm kích thước có thể sửa đổi
For example, if you add a
or
or element to your webpage and load it, it initially looks like it’s just a text. If you add some CSS colors, though, you can see the box shape like below :
- Đoạn mã cho một mô hình hộp cơ bản
Vì vậy, hãy khám phá các phần của CSS Box Model. Chúng ta có thể gọi nó là các bộ phận hoặc lớp
Các bộ phận trong mô hình hộp
Mô hình hộp chủ yếu bao gồm 4 phần
- Nội dung
- đệm
- Biên giới
- Lề
Nếu bạn đang có kế hoạch xây dựng một bố cục trang web tuyệt vời, bạn sẽ cần biết về lề, đường viền, phần đệm và nội dung
Chiều cao và chiều rộng mô tả kích thước của nội dung thực tế của hộp [văn bản, hình ảnh,…]
- khu vực nội dung
Vùng nội dung chứa nội dung thực của phần tử HTML chẳng hạn như văn bản hoặc hình ảnh. Văn bản bạn nhìn thấy trên trang web là nội dung thực. Nó nằm ở giữa hoặc trung tâm của mô hình hộp. Đây là khu vực mà văn bản hoặc hình ảnh sẽ được hiển thị. Kích thước của nó là chiều rộng nội dung và chiều cao nội dung
- Của cải
Vùng nội dung có một số thuộc tính như màu sắc, màu nền hoặc hình nền
2. khu vực đệm
Đệm là một hộp bao quanh nội dung. Không gian thừa xung quanh nội dung là phần đệm. Nó mở rộng vùng nội dung để bao gồm phần đệm của phần tử. Kích thước của nó là chiều rộng hộp đệm và chiều cao hộp đệm
Độ dày của phần đệm được xác định bởi các thuộc tính padding-top, padding-right, padding-bottom, padding-left và shorthand
- Thí dụ
Trong sơ đồ trên, khu vực xung quanh nội dung được đệm
- Đoạn mã
Đoạn mã cho Khu vực đệm
3. vùng biên giới
Đường viền là một hộp bao quanh phần đệm. Vùng viền, được giới hạn bởi cạnh viền, mở rộng vùng đệm để bao gồm các viền của phần tử. Kích thước của nó là chiều rộng hộp viền và chiều cao hộp viền
Độ dày của đường viền được xác định bởi thuộc tính border-width và border-height. Nó có các thuộc tính như chiều rộng, chiều rộng tối thiểu, chiều rộng tối đa, chiều cao, chiều cao tối thiểu và chiều cao tối đa
- Thí dụ
Trong sơ đồ trên, bạn thấy viền đen là vùng viền
Đường viền trên, dưới, trái và phải
- Đoạn mã
Đoạn mã cho khu vực biên giới
Hãy chuyển đến lớp mô hình hộp cuối cùng của chúng tôi. e. , lớp lề
4. vùng biên
Lề là một hộp bao quanh đường viền. Mục đích chính của lề là cung cấp khoảng trống giữa các phần tử HTML. Nó được sử dụng để tạo khoảng cách giữa các từ hoặc câu. Lề bao bọc nội dung, phần đệm và vùng viền. Kích thước của nó là chiều rộng hộp lề và chiều cao hộp lề
Bạn có thể sử dụng các thuộc tính lề trái, lề phải, lề trên và lề dưới
- Thí dụ
- Đoạn mã
Đoạn mã cho vùng lề
✨Hoan hô. Chúc mừng đã hoàn thành. Kudo✨
Hãy có một bản tóm tắt nhanh chóng của bài viết này
Tóm lược
Chúng ta đã thấy mô hình hộp được tạo ra như thế nào và đã thấy các lớp của mô hình hộp và thuộc tính của chúng. Chúng tôi cũng đã xem các ví dụ và đoạn mã
Bạn chỉ có thể tạo một văn bản nhỏ và có thể thử với các thuộc tính của mô hình hộp
Ghi chú. Tổng chiều rộng của hộp = lề trái + viền trái + đệm trái + chiều rộng + đệm phải + viền phải + lề phải
Tương tự, tổng chiều cao của hộp =lề trên + viền trên + đệm trên + chiều cao + đệm dưới + viền dưới + lề dưới
Ví dụ: mã CSS sau
Sơ đồ trên sẽ chỉ định kích thước hộp của từng khối thuộc về 'myClass'. Hơn nữa, mỗi hộp như vậy sẽ có tổng chiều cao 100px và chiều rộng 200px
✨Hết rồi✨
Nếu bạn muốn động viên tôi, bạn có thể nhấp vào liên kết bên dưới và mua cho tôi một ly cà phê. Nó giúp tôi viết nhiều bài sáng tạo hơn. Sự hỗ trợ của bạn có ý nghĩa rất lớn. Cảm ơn bạn