Lập box la gì
Show
Khi các bạn học qua Box Model trong CSS thì sẽ thấy có một đặc điểm khi sử dụng Padding và Border thì cái khung phần tử của bạn sẽ bị biến đổi kích thước nếu bạn có đặt thêm thuộc tính Vậy thì nếu bây giờ bạn muốn làm cho phần tử của mình phải giữ nguyên kích thước mặc dù có cộng thêm padding và border thì sẽ cần phải dùng
đến thuộc tính box-sizing. box-sizing là một thuộc tính sẽ giúp bạn có thể tính toán và làm chủ được kích thước của một phần tử dựa vào thuộc tính width và height đã được thiết lập bên trong. Hay nói cách khác, là bạn sẽ muốn thuộc tính Lưu ý về cách viết
Trong đó, nếu viết không có tiền
tố là dành cho trình duyệt IE8, Opera 7, Firefox và Google chrome bản mới. Các giá trị của box-sizingHiện tại
Lưu ý: Như vậy với ba giá trị này, mình khuyến khích các bạn chỉ nên sử dụng giá trị Nên sử dụng box-sizing cho toàn bộ phần tửTheo kinh nghiệm của mình thì khi viết CSS cho website, bạn hãy sử dụng Để thiết lập
Lời kếtMặc dù box-sizing có thể là không quan trọng đến mức bắt buộc sử dụng nhưng có thể nó sẽ giúp bạn giải đáp về thắc mắc là tại sao thiết lập kích thước cho phần tử là như vậy mà thêm padding, border vào nó lại hiển thị theo với kích thước khác. Và trên một số trường hợp, nó sẽ giúp bạn dễ dàng quản lý kích thước các phần tử nhờ vào việc tùy chỉnh lại giá trị box-sizing như mình đã đề cập ở trên. Thạch PhạmBé Thạch 18 tuổi, hiện công tác tại AZDIGI với vị trí giữ xe và viết thuê tại ThachPham.Com. Sở thích nghiên cứu về website, DevOps, SysAdmin và xăm mình nữa. Phương châm sống của bé là "No Pain, No Gain". Hiện tại blog tạm đóng bình luận vì mình cần tập trung thời gian vào cập nhật bài viết. Bình luận sẽ mở ra cho đến khi mình sẵn sàng. Bài viết được sự cho phép của tác giả Lương Văn Phúc Bà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 phần 1 và phần 3 (cuối) tại: Phần 1: CSS Box Model – Cơ bản dành cho người mới bắt đầu Phần 3: CSS Box Model – Các cách hiển thị element với thuộc tính display 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. Có một điều nế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: Tất cả element trên trang web đều là các khối hình chữ nhật.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ác thuộc tính cơ bản của box model 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 Thay đổi padding làm thay đổi layout tổngThêm border làm thay đổi
layout tổngVấn đề từng gây khó chịu 2:Một lỗi layout thường gặp khác là chiều rộng của element con bị tràn ra khỏi cha
Lỗi layout thường gặp khi element con tràn ra khỏi cha 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 box-sizing: border-box:
giải
quyết các vấn đề về layout rất tốtTrang web có cả nghìn element, liệu việc thêm thuộc tính Tất nhiên là chúng ta sẽ không phải thêm thủ công vào từng element, với sự giúp đỡ của Universal selector
Với đoạn code trên, tất cả element sẽ được canh chỉnh theo
Lưu ýĐể không làm bài viết phức tạp hơn, mình cố gắng trình bày những trường hợp đơn giản và điển hình nhất và bỏ qua một số chi tiết khác. Ví dụ: Chiều rộng/cao của element còn bị ảnh hưởng bởi nhiều yếu tố khác như Lời kếtCảm ơn bạn vì đã đọc đến tận cuối bài. Hi vọng bài viết đã bổ sung thêm phần nào kiến thức về CSS Box model cho bạn. Box model là nội dung khá cơ bản và được sử dụng hầu như mỗi ngày của bất kì frontend developer nào. Vì thế nếu bạn chưa nắm vững nó thì hãy dành thời gian tìm hiểu thêm nhé. Bài viết gốc được đăng tải tại grab-cv.com Có thể bạn quan tâm:
Xem thêm các vị trí tuyển dụng it lương cao tại TopDev |