2010-01-28

Simple CSS Bài 9: Mô hình hộp

1/28/2010 09:42:00 AM Posted by Hoàng Dũng No comments
Trong CSS, box model (mô hình hộp) mô  tả cách mà CSS định dạng khối không gian bao quanh một thành phần. Nó bao gồm margin (lề), border (viền), padding (vùng đệm) và phần nội dung của đối tượng. Hình bên dưới mô tả cấu trúc minh họa mô hình hộp cho một thành phần web trong FireBug. (Một phần mở rộng rất hữu ích trong việc chỉnh sửa CSS)
Mô 
hình hộp trong Firefox
Mô hình hộp trong Firefox
Ví dụ: Với đoạn mã sau
1
textarea {
2
top: 5px;
3
left: 11px;
4
margin: 1px; (hay margin: 1px 1px 1px 1px;)
5
borderr: 1px; (hay border: 1px 1px 1px 1px;)
6
width: 458px;
7
height: 108px;
8
}
Thì khung văn bản (textarea) của bạn sẽ trông như thế này trong FireBug:
css-box-model-2
Hay trên trang web thì bạn sẽ nhìn thế này (với FireBug, bạn có thể nhìn thấy trực quan những thành phần của mô hình hộp, màu xanh nhạt: phần nội dung (content), màu tím: vùng đệm (padding), màu đỏ: viền (border), và màu vàng: lề (margin)
css-box-model-1


0 comments:

Post a Comment

Note: Only a member of this blog may post a comment.