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 : (adsbygoogle = window.adsbygoogle || []).push({}); Đoạn mã cho một mô hình hộp cơ bảnVì 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ớpCác bộ phận trong mô hình hộpMô hình hộp chủ yếu bao gồm 4 phầnNội dungđệmBiên giớiLề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 dungChiề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 dungVù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 dungCủa cảiVù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ền2. 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à shorthandThí dụ (adsbygoogle = window.adsbygoogle || []).push({}); Trong sơ đồ trên, khu vực xung quanh nội dung được đệmĐoạn mãĐoạn mã cho Khu vực đệm3. 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 đaThí 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ớiHã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ênLề 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ướiThí 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àyTóm lượcChú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ộpGhi 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ảiTươ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ướiVí dụ: mã CSS sauSơ đồ 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 Mô hình hộp trong CSS là gì?

Mô hình hộp CSS là gì và tại sao nó lại quan trọng?

Một mô hình hộp đại diện cho cái gì?

4 thành phần của mô hình hộp là gì?