Lời tựa
Bài viết này là phần 2 của series về box mã sản phẩm của mình. Bạn cũng có thể theo dõi toàn bộ các phần trên đây:
Phần 1: CSS Box mã sản phẩm - Cơ phiên bản dành cho tất cả những người mới bắt đầuPhần 2: CSS Box model và box-sizing: border-box là gì vậy?Phần 3: CSS Box model - những cách hiển thị element với nằm trong tính display
Các chúng ta theo dõi những bài blog cá nhân của bản thân tại đây nhé: GrabCV blog
Lý vì mình lựa chọn viết về CSS Box Model
Trong trái đất của CSS giỏi web layout nói chung, có không ít thứ cơ bạn dạng mà một lập trình sẵn viên giao diện cần nắm vững. Mà lại mình lựa chọn Box mã sản phẩm để giới thiệu thứ nhất vì nó siêu cơ bản nhưng lại vô cùng quan trọng trong việc layout. Bản thân từng thấy chúng ta junior khác chỉ layout hình trạng đối phó (thử sai), viết css theo bạn dạng năng hoặc kinh nghiệm cá nhân, miễn sao công dụng giống design hoặc chạy được là được.
Bạn đang xem: Box-sizing là gì
Việc này có tương đối nhiều tác hại:
Các bạn sẽ tự hình thành những kinh nghiệm không đúng và áp dụng nhiều lần về sau.Sẽ bao gồm bug layout tiềm ẩn và chỉ hóng 1 viên gạch bị vỡ, cả layout đã vỡ; các bạn sẽ loay hoay lần chần nên fix tự đâu hoặc chỉ cố gắng tìm giải pháp lấp vá layout.Code của các bạn sẽ rất khó maintain sau này, nhất là khi có người mới vào.Code của bạn sẽ bị audit (nếu có) với được review kém nếu bao gồm một mặt thứ 3 chú ý vào.Kiến thức không vững cũng khá dễ bị vặn vẹo vẹo trong các buổi rộp vấn.Trong những bài tiếp theo, mình đã viết về gần như chủ đề cơ phiên bản và cũng khá quan trọng khác của CSS như Inheritance, Cascade, Specificity, BFC, Flexbox, Grid…
Bài viết này dành riêng cho ai?
Bạn hãy tưởng tượng mình đã tham gia một buổi phỏng vấn cùng được hỏi câu “Box mã sản phẩm trong CSS là gì?”. Nếu bạn cảm hứng không lạc quan trả lời thắc mắc này, hoặc chỉ vấn đáp kiểu cụt ngủn “nó nói đến padding, margin, border của mấy mẫu element bên trên trang web”, thì bài viết này là giành riêng cho bạn.
Mình mặc định bạn đã sở hữu chút kiến thức cơ phiên bản về CSS nên sẽ không còn giải thích cụ thể những phần bên cạnh phạm vi bài xích viết.
Xem thêm: Hiện Tượng Siêu Dẫn Là Gì ? Tìm Hiểu Ý Nghĩa Của Nó Đối Với Nhân Loại?
CSS Box model là gì?
Có một điều giả dụ bạn luôn phải đừng quên bất kì element làm sao trên website đều là một trong 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ứ cơ mà browser dựa vào để tính toán. Nói kim chỉ nan hơn, box mã sản phẩm trong CSS chỉ dễ dàng và đơn giản là một tập những 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ố trong những thứ khác) của một element.
Các yếu tố của Box Model
Như mình share ở trên, bất cứ element nào cũng là một khối hình chữ nhật, cùng nó bao gồm 4 thành phần: content, padding, border, cùng margin (tốt duy nhất là tránh việc Việt hóa phần lớn từ này