Bài đăng nổi bật


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

Post a Comment

أحدث أقدم