Thứ Bảy, 28 tháng 12, 2013
CSS Box mẫu
Tất cả các phần tử HTML có thể được coi như hộp. Trong CSS, thuật ngữ "hộp mô hình" được sử dụng khi nói về thiết kế và bố trí.
Các mô hình hộp CSS cơ bản là một hộp bao quanh các phần tử HTML, và nó bao gồm: lợi nhuận, biên giới, đệm, và nội dung thực tế.
Các mô hình hộp cho phép chúng ta đặt một đường viền xung quanh các yếu tố và các yếu tố không gian trong mối quan hệ với các yếu tố khác.
Những hình ảnh dưới đây minh họa mô hình hộp:
Lời giải thích của các bộ phận khác nhau:
- Lợi nhuận - Xóa một khu vực xung quanh biên giới. Tỷ suất lợi nhuận không có một màu nền, nó là hoàn toàn minh bạch
- Biên giới - Một biên giới mà đi xung quanh đệm và nội dung. Biên giới được thừa kế từ tài sản màu sắc của hộp
- Đệm - Xóa một khu vực xung quanh nội dung. Padding bị ảnh hưởng bởi màu nền của hộp
- Nội dung - Nội dung của hộp, nơi mà văn bản và hình ảnh xuất hiện
Để thiết lập chiều rộng và chiều cao của một phần tử một cách chính xác trong tất cả các trình duyệt, bạn cần phải biết làm thế nào mô hình hộp hoạt động.
Chiều rộng và chiều cao của một phần tử
 | Quan trọng: Khi bạn thiết lập chiều rộng và chiều cao các thuộc tính của một phần tử với CSS, bạn chỉ cần thiết lập chiều rộng và chiều cao của khu vực nội dung . Để tính toán kích thước đầy đủ của một phần tử, bạn cũng phải thêm padding, biên giới và lợi nhuận. |
|---|
Tổng chiều rộng của các phần tử trong ví dụ dưới đây là 300px:
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
padding:10px;
border:5px solid gray;
margin:10px;
Chúng ta hãy làm như toán học:
250px (chiều rộng)
+ 20px (trái + đệm bên phải)
+ 10px (trái + biên phải)
+ 20px (lề trái + phải)
= 300px
Giả sử rằng bạn chỉ có 250px của không gian. Chúng ta hãy làm một phần tử với tổng chiều rộng của 250px:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
<body>
<img src="css.gif" width="250" height="250">
<div class="ex">The picture above is 250px wide.
The total width of this element is also 250px.</div>
</body>
</html>
Thử nó cho mình »
Tổng chiều rộng của một yếu tố cần được tính toán như thế này:
Tổng chiều rộng yếu tố = chiều rộng + đệm + đệm bên trái bên phải + biên trái + + biên phải lề trái lề phải +
Tổng chiều cao của một phần tử phải được tính toán như thế này:
Tổng số yếu tố chiều cao = chiều cao + đệm + đệm đầu dưới + + biên giới hàng đầu biên giới phía dưới + lề trên + lề dưới
Vấn đề tương thích trình duyệt
IE8 và phiên bản trước của IE, bao gồm padding và biên giới sở hữu chiều rộng.
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét