Hỏi Đáp

CSS Box Model và box-sizing: border-box là gì vậy?

Lời nói đầu

Bài viết này là phần 2 của loạt bài về mô hình hộp của tôi. Bạn có thể theo dõi tất cả các tập tại đây:

Phần 1: Mô hình hộp CSS – Kiến thức cơ bản cho người mới bắt đầu Phần 2: Mô hình hộp CSS và Kích thước hộp: Hộp viền là gì? Phần 3: Mô hình hộp css – một cách để hiển thị các phần tử bằng thuộc tính display

Bạn đang xem: Box-sizing border-box là gì

.

Theo dõi bài đăng trên blog cá nhân của tôi tại đây: https://phucluong.com/

Tại sao tôi chọn viết mô hình hộp css

Trong thế giới bố cục web hoặc css nói chung, các nhà phát triển front-end cần phải nắm vững nhiều kiến ​​thức cơ bản. Nhưng tôi chọn mô hình hộp để trang trải đầu tiên vì nó rất cơ bản nhưng rất quan trọng trong bố cục. Tôi đã thấy các đàn em khác chỉ cần sắp xếp bố cục (thử và sai) và viết css bằng trực giác hoặc kinh nghiệm cá nhân, miễn là kết quả giống với thiết kế hoặc tác phẩm.

Điều này rất nguy hiểm:

  • Bạn sẽ hình thành trải nghiệm sai lầm của riêng mình, sử dụng nó nhiều lần.
  • Sẽ có những lỗi về bố cục tiềm ẩn và khi một viên gạch bị vỡ, toàn bộ bố cục sẽ bị hỏng; bạn sẽ rất khó khăn khi không biết phải sửa nó ở đâu hoặc chỉ cố gắng tìm cách sửa chữa với bố cục.
  • Mã của bạn sẽ khó duy trì sau này, đặc biệt là khi có người mới tham gia.
  • Mã của bạn sẽ được kiểm tra (nếu có) và bị xếp loại kém nếu bên thứ ba nhìn thấy.
  • Không đủ kiến ​​thức cũng có thể dễ bị bóp méo trong các cuộc phỏng vấn.

Trong bài viết tiếp theo, tôi sẽ viết về một số chủ đề cơ bản và rất quan trọng khác của css như kế thừa, thác nước, tính đặc trưng, ​​bfc, flexbox, lưới …

Bài báo này được viết cho ai?

Giả sử bạn đang tham gia một cuộc phỏng vấn và bạn được hỏi câu hỏi “Mô hình hộp trong css là gì?”. Nếu bạn không tự tin trả lời câu hỏi này, hoặc chỉ trả lời ngắn gọn “nó nói về phần đệm, lề, đường viền trên các phần tử trên trang web”, thì bài viết này là dành cho bạn.

Tôi cho rằng bạn đã có một số hiểu biết cơ bản về CSS, vì vậy tôi sẽ không giải thích chi tiết về nó ngoài phạm vi của bài viết này.

Mô hình hộp css

là gì?

Một điều bạn phải luôn nhớ là bất kỳ phần tử nào trên trang web đều là một khối hình chữ nhật, bao gồm hình tròn, hình bầu dục hoặc văn bản có độ dài khác nhau:

Tất cả element trên trang web đều là các khối hình chữ nhật.

Do đó, để giúp trình duyệt hiểu chiều rộng / chiều cao của một phần tử để hiển thị chính xác và theo ý định của nhà phát triển, mô hình hộp là một đối tượng tính toán mà trình duyệt dựa vào. Về mặt lý thuyết, mô hình hộp trong CSS chỉ là một tập hợp các quy tắc và công thức cộng trừ giúp trình duyệt xác định chiều rộng và chiều cao (và những thứ khác) của một phần tử.

Các phần tử của mô hình hộp

Như tôi đã chia sẻ ở trên, bất kỳ phần tử nào cũng là một khối chữ nhật bao gồm 4 phần tử: nội dung, phần đệm, đường viền và lề (tốt nhất không nên Việt hóa những từ này 😃). Mỗi phần tử có một đường viền ngoài tương ứng: cạnh nội dung, cạnh đệm, cạnh viền, cạnh lề.

  • content : là vùng chứa nội dung của phần tử, có chiều rộng / chiều cao được xác định bởi các thuộc tính chiều rộng và chiều cao. Vùng này thường chứa văn bản, hình ảnh, video …
  • padding : Cho biết chiều rộng của vùng đệm xung quanh vùng nội dung
  • viền : chỉ định chiều rộng (và kiểu) của đường viền xung quanh phần đệm
  • margin : cho biết chiều rộng của lề xung quanh đường viền

Là nhà phát triển, bạn có thể dễ dàng xem các thuộc tính này của một phần tử một cách trực quan thông qua các công cụ phát triển trình duyệt.

Box model được minh họa trực quan trên dev tools của trình duyệt

Công thức đơn giản mặc định:

  • width element = width content width + left padding + right padding + left border + right border
  • height element = content chiều cao + lề trên + lề dưới + viền trên + viền dưới

Thuộc tính css tương ứng:

  • Chiều rộng / Chiều cao của nội dung : chiều rộng, chiều cao
  • padding : padding, padding left, padding right, padding top, padding- bottom
  • border : viền, viền trái, viền phải, viền trên, viền dưới

Các thuộc tính cơ bản của box model

Bạn có thể nhận thấy rằng tôi đã không liệt kê các lề trong công thức. Mặc dù lề là một phần của mô hình hộp và nằm trong phần tử, nhưng nó không được tính vào chiều rộng / chiều cao của phần tử.

Bạn có hỏi tôi sự khác biệt giữa lề và đệm là gì không. Mình sẽ có bài viết chi tiết sau, nhưng nói một cách đơn giản thì margin là vùng bên ngoài đường viền, còn padding là vùng bên trong đường viền, khi nào sử dụng margin / padding cũng là một điều cơ bản của các lập trình viên. Cần phải nắm vững (bạn có thể google để tìm hiểu thêm về sự khác biệt giữa chúng).

Mọi chuyện đã kết thúc, hãy quay lại hiện tại:

Câu hỏi khó chịu 1:

Khi bố trí một trang web, bạn chắc chắn sẽ tăng hoặc giảm phần đệm của các phần tử hoặc thêm đường viền để làm cho chúng đẹp hơn (ví dụ: theo thiết kế mới của nhà thiết kế). Vấn đề là khi bạn thực hiện các thay đổi ở trên, tổng chiều rộng của phần tử thay đổi và toàn bộ bố cục di chuyển vì những thay đổi đó.

Một ví dụ dễ hiểu:

element (width) = 200px (content) + 40px (padding) = 240px Khi bạn tăng padding lên 60px, chiều rộng của phần tử sẽ tăng lên 260px và nó sẽ đẩy bố cục thay đổi. Để khắc phục điều này, bạn phải giảm chiều rộng của nội dung xuống 180px để đảm bảo tổng chiều rộng vẫn là 240px. Giá như nội dung sẽ tự giãn ra để giữ nguyên chiều rộng.

Khi bạn thay đổi padding, nó sẽ làm thay đổi layout như hình bên dưới: Thay đổi padding làm thay đổi layout tổng

Khi bạn thay đổi đường viền, nó cũng thay đổi bố cục như sau:

Câu hỏi 2 khó chịu:

Một lỗi bố cục phổ biến khác là khi chiều rộng của phần tử con tràn khỏi phần tử mẹ

Lỗi layout thường gặp khi element con tràn ra khỏi cha

Giải pháp hiện tại

Mô hình hộp đã được cập nhật (cách đây khá lâu) với thuộc tính box-sizing, 2 giá trị chính là: content-box và border-box

  • content-box: Tất cả các phần tử được mặc định là content-box, đó là những gì tôi đã phân tích ở trên. Một lần nữa lưu ý rằng các thuộc tính chiều rộng và chiều cao chỉ được sử dụng để xác định chiều rộng / chiều cao của nội dung.
  • khung viền: Thuộc tính chiều rộng và chiều cao sẽ tự động bao gồm nội dung, phần đệm và đường viền cũng như chiều rộng của nội dung. Nếu chúng tôi thay đổi phần đệm và đường viền, phần đệm và đường viền sẽ tự động chia tỷ lệ để đảm bảo rằng kích thước của toàn bộ phần tử không thay đổi, Điều này có nghĩa là toàn bộ bố cục sẽ không thay đổi.

Và khi box-sizing ra đời, “rất hiếm nhà phát triển (ý kiến ​​cá nhân) muốn quay ngược thời gian và sử dụng box-sizing với giá trị của content-box một lần nữa, ngoại trừ những trường hợp đặc biệt của dự án. ”(vui lòng cho tôi biết nếu bạn có bất kỳ tình huống nào cần sử dụng hộp nội dung)

công thức định cỡ hộp: border-box:

  • Chiều rộng phần tử = chiều rộng = chiều rộng nội dung (tự động) + phần đệm bên trái + phần đệm bên phải + đường viền trái + đường viền bên phải
  • chiều cao phần tử = chiều cao = chiều cao nội dung (tự động) + lề trên + lề dưới lề + viền trên + viền dưới

box-sizing: border-box giải quyết các vấn đề về layout rất tốt

Một trang web có hàng nghìn phần tử, liệu có thể thêm thuộc tính kích thước hộp vào mỗi phần tử không?

Tất nhiên, chúng tôi không phải thêm từng phần tử theo cách thủ công, với sự trợ giúp của công cụ chọn chung *, chúng tôi chỉ cần một dòng css đơn giản:

Với đoạn mã trên, tất cả các phần tử sẽ được căn chỉnh với đường viền, tất nhiên bạn vẫn có thể dễ dàng ghi đè từng phần tử cụ thể mà bạn muốn.

Lưu ý

Để bài viết không phức tạp hơn, tôi cố gắng trình bày trường hợp đơn giản và điển hình nhất, lược bỏ một số chi tiết khác. Ví dụ: chiều rộng / chiều cao của một phần tử cũng bị ảnh hưởng bởi nhiều yếu tố khác như chiều rộng tối thiểu, chiều rộng tối đa, chiều cao tối thiểu, chiều cao tối đa, hiệu ứng flexbox …

Kết luận

Cảm ơn bạn đã đọc đến cuối. Hy vọng bài viết này đã bổ sung một số kiến ​​thức về mô hình hộp css cho các bạn.

Mô hình hộp

là một cái gì đó rất cơ bản và được bất kỳ nhà phát triển front-end nào sử dụng hầu như hàng ngày. Vì vậy, nếu bạn chưa thành thạo, hãy dành thời gian tìm hiểu thêm. Nếu bạn có phản hồi hay góp ý gì cho bài viết, hãy để lại bình luận bên dưới.

Tiếp tục đến bài viết cuối cùng trong loạt bài này: Phần 3: Mô hình hộp CSS – Cách hiển thị các phần tử bằng cách sử dụng thuộc tính hiển thị

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Back to top button