Mô hình hộp [Box model]
Một phần tử HTML được coi là một Box.
Mô hình hộp [Box model] có nghĩa là một phần tử HTML sẽ bao gồm các thành phần: margin, border, padding, và content [nội dung của phần tử].
Mô hình hộp [Box model] cho phép chúng ta thêm bo viền xung quanh phần tử , và xác định khoảng cách giữa các phần tử.
Hình ảnh dưới đây minh họa cho mô hình hộp [Box model]
Margin
Border
Padding
Content [nội dung của phần tử]
Giải thích các thành phần trên:
- Margin - là phần nằm bên ngoài của border. Margin trong suốt.
- Border - là đường viền bao xung quanh của padding và content.
- Padding - là phần bao xung quanh content [nội dung của phần tử], nằm giữa padding và content.
- Content - là nội dung thực tế của phần tử
div {
border:1px solid black;
padding:30px;
margin: 20px;
}Xem ví dụ
Width và Height của một phần tử HTML
Để thiết lập chính xác width và height của một phần tử hiển thị đúng trên tất cả trình duyệt, trước hết bạn cần hiểu rõ về mô hình hộp [Box model].
Quạn trọng: Khi bạn thiết lập thuộc tính width và height của các phần tử bằng CSS, bạn cần thiết lập width và height của phần nội dung. Để tính toàn kích thước đầy đủ của phần tử, bạn cần phải tính thêm cả padding, border và margin. |
Dưới đây là công thức tính tổng Width [Height] của một phần tử HTML:
- Tổng width = width + left margin + right margin + left border + right border + left padding + right padding;
- Tổng height = height + top margin + bottom margin + top border + bottom border + top padding + bottom padding;
div {
width:300px;
height:300px;
padding: 50px;
border:10px solid black;
}Xem ví dụ
Tại sao việc xác định chính xác tổng width [height] lại quan trọng ? phải > dưới > trái] và giá trị là số kèm theo đơn vị đo lường.
Ví dụ ở dưới mình có một cái thẻ Tuy nhiên, nếu bạn muốn thiết lập padding cho top và bottom cùng giá trị, left và right
cùng giá trị thì có thể viết giá trị theo cách ngắn gọn là Còn nếu bạn nhập một giá trị duy nhất thì nó sẽ căn đều cho 4 mặt với giá trị đó, ví dụ như bạn chỉ nhập 20px thì nó sẽ tạo khoảng cách cho 4 mặt đều là 20px. Ngoài thuộc tính padding thì thuộc tính này còn có 4 thuộc tính con khác đó là Border nghĩa là thuộc tính để bạn tạo viền cho phần tử và nó sẽ được khai báo bằng thuộc tính Thuộc tính border này bạn sẽ viết theo
cấu trúc như sau: Ví dụ mình muốn tạo một cái viền, viền có kích thước 1px, kiểu trơn và màu viên là đỏ thì sẽ viết như sau: Trong border có hỗ trợ một số type như Giống như các thẻ trong Box Model khác, border cũng có các thẻ con là Xem ví dụ về border Trong khi Padding có nhiệm vụ tạo khoảng cách giữa phần Content với Border thì Margin sẽ có tác dụng tạo khoảng cách từ Border trở ra ngoài, nói dễ hiểu thì nó sẽ giúp bạn tinh chỉnh khoảng cách giữa các phần tử với nhau. Để dễ hiểu hơn thì các bạn hãy xem ví dụ bên dưới. Bạn thấy Và nó cũng có một số thuộc tính con là Trên trình duyệt Google Chrome và Firefox có tích hợp sẵn một bộ công cụ dành cho các nhà phát triển website mang tên Developer Tools. Công cụ này có rất nhiều chức năng nhưng ở bài này mình chỉ
bày cho bạn cách sử dụng nó để kiểm tra Box Model thôi. Để bật nó, bạn ấn phím F12 trên bàn phím, sau đó ấn vào tab Computed [Google Chrome] hoặc Box Model [Firefox] bên tay phải.. Trong khung đó bạn sẽ thấy nó mô tả rõ ràng, vùng màu xanh là Content, xanh lá cây
là Padding, cam là Border và màu da là Margin. Để xem thông tin của phần tử bạn muốn thì ấn vào nút tìm kiếm phần tử bên tay trái [Firefox và Google Chrome đều cùng vị trí]. Bây giờ bạn có thể rê con chuột vào một phần tử nào đó trên website và nhấp vào để xem Box Model bên tay phải, bạn có thể thử nhấp vào từng ô giá trị bên khung Box Model và thay đổi giá trị để xem sự thay đổi của nó [sẽ mất sau khi bạn
refresh trình duyệt]. Ở trên là tất cả các khái niệm về Box
Model mà bạn cần nắm vững để có thể làm việc với CSS Layout, thoạt nhìn thì nó cũng có vẻ đơn giản nhưng việc sau này bạn ứng dụng vào website sẽ rất quan trọng vì có thể giao diện sẽ không được như ý muốn nếu không hiểu cách vận dụng Box Model hợp lý. Thạch Phạm Bé 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.20px 10px, tức là top và bottom sẽ có 20px và left và right sẽ có 10px.padding-top, padding-bottom, padding-left và padding-right và mỗi thuộc tính là để thiết lập giá trị cho từng mặt cụ thể.Border
border trong CSS.border: [size] [type] [color];
border: 1px solid red;
solid,dotted, double,groove,ridge, inset vàoutset.border-top, border-right, border-bottom và border-left.Margin
#box1 và #box2 có một khoảng trắng chứ? Đó là margin, bạn hãy ấn qua tab CSS xem thì sẽ thấy ở #box2 mình có gắn thêm margin: 32px 0 0 0, tức là nó sẽ tạo ra một
khoảng trắng ở trên đầu của #box2 và các mặt khác thì không tạo ra, cách viết tương tự như padding là 4 giá trị sẽ sắp xếp theo top right bottom left.margin-top, margin-right, margin-bottom và margin-left.Kiểm tra Box Model với Developer Tools
Lời kết
Chủ Đề