Box Model trong CSS
Mỗi phần tử HTML của trang web được mô phỏng (model) giống như một chiếc hộp hình chữ nhật được hình thành từ bốn thành phần:
- Nội dung phần tử.
- Vùng Đệm (hay khoảng đệm).
- Vùng viền.
- Lề.
Thuật ngữ box model (mô hình hộp hoặc hộp mô phỏng) được dùng để chỉ phương pháp sử dụng các hộp để mô phỏng các phần tử HTML trên trang web.
Nội Dung Phần Tử
Nội dung phần tử có thể là vă bản, hình ảnh,hoặc kết hợp cả văn bản và hình ảnh.... và là phần trong cùng của box model.
Diện tích của nội dung phần tử phụ thuộc giá trị của các thuộc tính chiều rộng (width
) và chiều cao (height
) của phần tử:
.square {
width: 150px;
height: 150px;
border: 1px solid red;
}
Giá trị mặc định của cả hai thuộc tính width
và height
là auto
và trình duyệt sẽ tự động tính toán để hiển thị nội dung thực tế bên trong một cách phù hợp.
Với các phần tử như h1
, p
, div
... thì mặc định chiều ngang của chúng sẽ luôn chiếm 100% chiều ngang của phần tử cha:
h1, p, div {
border: 1px solid red;
}
Với các phần tử như a
, img
, span
thì mặc định chiều ngang và chiều dọc của chúng sẽ chiếm kích thước vừa đủ, phù hợp để hiển thị nội dung bên trong phần tử:
a, img, span {
border: 1px solid green;
}
Các phần tử như h1
, p
, div
thuộc kiểu hiển thị khối (block display) trong khi các phần tử như a
, img
span
thuộc kiểu hiển thị trong dòng (inline display). Chúng ta sẽ tìm hiểu về các kiểu hiển thị của phần tử HTML trong CSS ở các bài học tiếp theo.
Vùng Đệm
Vùng đệm (hay khoảng đệm) của một box model là phần diện tích bao ngoài nội dung phần tử và được thiết lập thông qua các thuộc tính padding trong CSS:
p {
padding: 30px 20px 20px 30px;
}
Chi tiết về các thuộc tính padding
để thiết lập vùng đệm sẽ được đề cập ở bài học tiếp theo.
Vùng Viền
Vùng viền là phần diện tích bao quanh vùng đệm và được thiết lập thông qua các thuộc tính border trong CSS:
p {
border: 1px solid red;
}
Chi tiết về các thuộc tính border
để thiết lập vùng đệm sẽ được đề cập ở bài học tiếp theo.
Lề
Lề của một box model là phần diện tích bao ngoài vùng viền và được thiết lập thông qua các thuộc tính margin trong CSS:
p {
margin: 30px 20px 20px 30px;
}
Chi tiết về các thuộc tính margin
để căn chỉnh lề sẽ được đề cập ở bài học tiếp theo.
- Posted by baobinhnet
- 2020-06-09 09:43:20