Hướng dẫn box-sizing css là gì
1) Chức năng & cách sử dụng- Thông thường, khi chúng ta sử dụng thuộc tính width (height) để thiết lập chiều rộng (chiều cao) cho một phần tử thì mặc định chiều rộng (chiều cao) đó chỉ là chiều rộng (chiều cao) của phần nội dung content của phần tử mà thôi. Show - Tuy nhiên, với việc sử dụng thuộc tính box-sizing thì chúng ta có thể tùy chỉnh lại việc khi sử dụng thuộc tính width (height) để thiết lập chiều rộng (chiều cao) thì chiều rộng (chiều cao) đó chỉ là của phần nội dung hay là của nguyên cả phần tử (bao gồm luôn phần đường viền & vùng đệm) - Cú pháp:
- Trong đó, value có thể được xác định dựa theo một trong bốn loại giá trị:
2) Tầm quan trọng của thuộc tính box-sizing- Thuộc tính box-sizing là một thuộc tính rất quan trọng trong việc thiết kế giao diện cho trang web, nó giúp chúng ta "đơn giản hóa" việc xác định kích thước của phần tử khi xây dựng bố cục trang.
Xem ví dụ - Lưu ý: Phía trên chỉ là một ví dụ nhỏ về tầm quan trọng của thuộc tính box-sizing, sau này có rất nhiều trường hợp mà các bạn cần phải sử dụng đến nó thì mới có thể giải quyết được vấn đề, vì vậy các bạn cần phải đặc biệt ghi nhớ thuộc tính này. Lời tựaBài viết này là phần 2 của series về box model của mình. Bạn có thể theo dõi tất cả các phần tại đây: Phần 1: CSS Box Model - Cơ bản dành cho người mới bắt đầu Các bạn theo dõi các bài blog cá nhân của mình tại đây nhé: https://phucluong.com/ Lý do mình chọn viết về CSS Box ModelTrong thế giới của CSS hay web layout nói chung, có rất nhiều thứ cơ bản mà một lập trình viên giao diện cần nắm vững. Nhưng mình chọn Box Model để giới thiệu đầu tiên vì nó rất cơ bản nhưng lại vô cùng quan trọng trong việc layout. Mình từng thấy các bạn junior khác chỉ layout kiểu đối phó (thử sai), viết css theo bản năng hoặc kinh nghiệm cá nhân, miễn sao kết quả giống design hoặc chạy được là được. Việc này có rất nhiều tác hại:
Trong các bài tiếp theo, mình sẽ viết về những chủ đề cơ bản và cũng rất quan trọng khác của CSS như Inheritance, Cascade, Specificity, BFC, Flexbox, Grid… Bài viết này dành cho ai?Bạn hãy tưởng tượng mình đang tham gia một buổi phỏng vấn và được hỏi câu “Box model trong CSS là gì?”. Nếu bạn cảm giác không tự tin trả lời câu hỏi này, hoặc chỉ trả lời kiểu cụt ngủn “nó nói về padding, margin, border của mấy cái element trên trang web”, thì bài viết này là dành cho bạn. Mình mặc định bạn đã có chút kiến thức cơ bản về CSS nên sẽ không giải thích chi tiết những phần ngoài phạm vi bài viết. CSS Box Model là gì?Có một điều bạn luôn phải nhớ là bất kì element nào trên trang web đều là một khối hình chữ nhật, kể cả các hình tròn, hình oval, hay các đoạn text dài ngắn khác nhau: Vậy để giúp browser biết được một element rộng/cao bao nhiêu để render cho chính xác và đúng ý của developer, box model là thứ mà browser dựa vào để tính toán. Nói lý thuyết hơn, box model trong CSS chỉ đơn giản là một tập các quy tắc và công thức cộng trừ để giúp browser xác định được chiều rộng, cao (và một số thứ khác) của một element. Các thành phần của Box ModelNhư mình chia sẻ ở trên, bất kì element nào cũng là một khối hình chữ nhật, và nó bao gồm 4 thành phần: content, padding, border, và margin (tốt nhất là không nên Việt hóa những từ này 😃 ). Mỗi thành phần đều có một đường biên bên ngoài tương ứng: content edge, padding edge, border edge, margin edge.
Là một developer, bạn có thể dễ dàng xem được các thuộc tính này của các element rất trực quan thông qua DevTools của browser. Công thức tính đơn giản mặc định:
Các thuộc tính css tương ứng:
Có thể bạn để ý mình không liệt kê Có bạn từng hỏi mình Tất cả chỉ là quá khứ, hãy cùng quay về hiện tại:Vấn đề từng gây khó chịu 1:Khi layout một trang web, chắc chắn sẽ có những lúc bạn tăng giảm Ví dụ cho dễ hiểu: Element (chiều rộng) = 200px (content) + 40px (padding) = 240px Khi bạn tăng Khi bạn thay đổi padding, nó sẽ làm thay đổi layout như hình bên dưới: Giải pháp hiện tạiBox model được nâng cấp (rất lâu rồi) với thuộc tính
Và khi Công thức tính theo |