NTM Solutions

Facebook Youtube Google+

Thứ Tư, 4 tháng 4, 2018

Tự học CSS - Bài 08 - Mô hình hộp

Quay về mục lục TỰ HỌC CSS

1.    Mô hình hộp trong CSS

Mỗi phần tử HTML được xem như những chiếc hộp. Thuật ngữ “Mô hình hộp” thường được đề cập khi nhắc đến thiết kế layout.
Mô hình hộp trong CSS là 01 chiếc hộp bao xung quanh mỗi phần tử HTML. Nó bao gồm: margin, border, padding và dữ liệu thực. Sau đây là hình minh họa mô hình hộp:

Các phần margin, border và padding ta đã học trong các bài 04, 05 và 06.
Ví dụ:
div {
    width
: 300px;
    border
: 25px solid green;
    padding
: 25px;
    margin
: 25px;
}

2.    Bề rộng và Chiều cao của phần tử

Trong CSS, khi ta thiết lập width và height nghĩa là ta đang thiết lập cho vùng dữ liệu(content) mà thôi.
Kích thước thật sự của phần tử HTML bao gồm cả margin, padding và border (cộng thêm giá trị vào).
Ví dụ sau đây sẽ định dạng bề rộng của thẻ div tổng cộng 350px.
div {
    width
: 320px;
    padding
: 10px;
    border
: 5px solid gray;
    margin
: 0;
}
width + padding + border + margin
Trong đó:
padding-left + padding-right = 10px + 10px
border-left + border-right = 5px + 5px
margin-left = margin-right = 0px
Như vậy, ta có kết quả: 320px + 10px + 10px + 5px + 5px = 350px
Nếu vẫn chưa rõ các bạn xem thêm video clip sau: