Giá trị inline-block
Chúng ta đã được có thể mất một
thời gian dài để tạo ra một mạng lưới các hộp, và khiến chúng lấp đầy chiều rộng
của trình duyệt và bao bọc đẹp đẽ (khi trình duyệt thay đổi kích cỡ), bằng cách
sử dụng tài sản thuộc tính float.
Tuy nhiên, giá trị inline-block của thuộc tính display làm cho điều này dễ dàng
hơn. Các phần tử inline-block giống
như các phần tử inline nhưng chúng có thể có chiều rộng và chiều cao.
Theo cách cũ - bằng cách sử dụng
float (lưu ý rằng chúng ta cũng cần phải chỉ định thêm thuộc tính clear cho các phần tử sau khi chúng thành các hộp trôi nổi):
.floating-box {
float: left;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}
.after-box {
clear: left;
}
Tác dụng tương tự có thể đạt
được bằng cách sử dụng giá trị inline-block của thuộc tính display (lưu ý rằng thuộc tính clear là không cần thiết):
.floating-box {
display: inline-block;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}
Mô hình hộp trong CSS
Mô hình hộp (box model)
Tất cả các phần tử HTML có thể
được xem như các hộp (box). Trong CSS, thuật ngữ "mô hình hộp" (box
model) được sử dụng khi nói về thiết kế và bố cục.
Mô hình hộp trong CSS chủ yếu
là một hộp, cái dùng để bao bọc xung quanh mọi phần tử HTML. Nó bao gồm:
margin, border, padding, và nội dung thực tế.
Hình dưới đây minh hoạ về mô
hình hộp:
Giải thích về các thành phần khác nhau:
- Content - nội dung của hộp, nơi xuất hiện văn bản và hình ảnh.
- Padding - khoảng cách giữa nội dung và đường viền (border). Padding là trong suốt.
- Border - đường viền bao quanh padding và nội dung.
- Margin - không gian bên ngoài border (khoảng cách giữa border và các thành phần khác bên ngoài. Margin là trong suốt.
Mô hình hộp cho phép chúng ta
thêm một đường viền xung quanh các phần tử, và để xác định khoảng cách giữa các
phần tử.
div {
width: 300px;
padding: 25px;
border: 25px solid
navy;
margin: 25px;
}
Chiều rộng và chiều cao của một phần tử
Để thiết lập chiều rộng và chiều cao của một phần tử chính xác trong tất cả các trình duyệt, bạn cần phải biết mô hình hộp làm việc ra sao.
Giả sử chúng ta muốn định kiểu
(đặt style) cho phần tử <div> có chiều rộng là 350px:
div {
width: 350px;
padding: 10px;
border: 5px solid
gray;
margin: 0;
}
Dưới đây là tính toán về chiều
rộng tổng thể:
320px (chiều rộng)
+ 20px (padding trái + phải)
+ 10px (đường viền trái + phải)
+ 0px (margin trái + phải)
= 350px
Chiều rộng tổng thể của một phần tử nên được tính như sau:
Chiều rộng tổng thể = chiều rộng
+ padding trái + padding phải + đường viền trái + đường viền phải + margin trái
+ margin phải
Chiều cao tổng thể của một phần tử nên được tính như sau:
Chiều cao tổng thể = chiều
cao + padding trên + padding dưới + đường viền trên + đường viền dưới + margin
trên + margin dưới
Tự làm bài tập!
CodeLean.vn
Facebook: CodeLean Community
Đăng nhận xét