-  

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. Chúng ta có thể theo dõi toàn bộ các phần tại đây:

Phần 1: CSS Box mã sản phẩm - Cơ bạn dạng dành cho tất cả những người mới bắt đầuPhần 2: CSS Box mã sản phẩm 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 ở trong tính display

Các các bạn theo dõi những bài blog cá thể của mình tại phía trên nhé: https://phucluong.com/

Lý vì mình lựa chọn viết về CSS Box Model

Trong trái đất của CSS tuyệt web layout nói chung, có nhiều thứ cơ bản mà một lập trình viên giao diện đề nghị nắm vững. Nhưng 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 dạng nhưng lại vô cùng đặc biệt trong câu hỏi layout. Mình từng thấy chúng ta junior khác chỉ layout mẫu mã đối phó (thử sai), viết css theo bạn dạng năng hoặc kinh nghiệm tay nghề cá nhân, miễn sao tác dụng giống design hoặc chạy được là được.

Bạn đang xem:

Việc này có rất nhiều tác hại:

Các các bạn sẽ tự hình thành những kinh nghiệm không nên và sử dụng nhiều lần về sau.Sẽ bao hàm bug layout tiềm tàng và chỉ chờ 1 viên gạch men bị vỡ, cả layout đang vỡ; các bạn sẽ loay hoay đắn đo nên fix tự đâu hoặc chỉ nỗ lực tìm giải pháp lấp vá layout.Code của bạn sẽ khá khó maintain sau này, nhất là khi có tín đồ mới vào.Code của các bạn sẽ bị phân tích và đo lường (nếu có) cùng được reviews kém nếu tất cả một bên thứ 3 chú ý vào.Kiến thức ko vững cũng rất dễ bị vặn vẹo trong những buổi bỏng vấn.

Trong những bài tiếp theo, mình sẽ viết về đầy đủ chủ đề cơ phiên 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 giành riêng cho ai?

Bạn hãy tưởng tượng mình đã tham gia 1 trong các 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 như bạn cảm hứng không sáng sủa trả lời câu hỏi này, hoặc chỉ vấn đáp kiểu cụt ngủn “nó nói tới padding, margin, border của mấy loại element trên trang web”, thì nội dung bài viết này là dành cho bạn.

Xem thêm: Trang Web Được Truy Cập Nhiều Nhất Thế Giới, Top 30 Website Truy Cập Nhiều Nhất Việt Nam 2021

Mình khoác định bạn đã sở hữu chút kỹ năng cơ bạn dạng về CSS nên sẽ không giải thích chi tiết những phần bên cạnh phạm vi bài bác viết.

Xem thêm: Cách Học Đánh Máy Vi Tính Nhanh, Hướng Dẫn Đánh Máy Vi Tính Nhanh

CSS Box mã sản phẩm là gì?

Có một điều bạn luôn phải nhớ rằng bất kì element như thế nào trên website đều là một khối hình chữ nhật, kể cả những hình tròn, hình oval, hay những đoạn text lâu năm ngắn khác nhau:

*

Vậy sẽ giúp đỡ browser hiểu rằng một element rộng/cao từng nào để render cho chính xác và đúng ý của developer, box model là thứ cơ mà browser nhờ vào để tính toán. Nói triết lý hơn, box model trong CSS chỉ dễ dàng và đơn giản là một tập những quy tắc và phương pháp cộng trừ để giúp đỡ browser xác minh được chiều rộng, cao (và một trong những thứ khác) của một element.

Các nguyên tố của Box Model

Như mình share ở trên, bất kỳ element nào cũng là một khối hình chữ nhật, cùng nó bao hàm 4 thành phần: content, padding, border, với margin (tốt duy nhất là tránh việc Việt hóa phần lớn từ này