Box model trong CSS
Box - model (Mô hình hộp) là cách mà CSS định dạng khối không gian bao quanh một thành phần. Trong HTML, tất cả các thành phần đều tồn tại một hộp bao quanh nó
Các thành phần của Boxmodel gồm:
- Margin:Canh lề của Box so với các thành phần còn lại
- Border:Đường viền của Box
- Padding:Vùng đệm từ nội dung của Box ra đến đường viền
Margin tạo ra khoảng cách giữa các Box-model với nhau, có 4 thành phần của margin tương ứng với 4 cạnh của Box:
- Margin-top
- Margin-right
- Margin-bottom
- Margin-left
3 đoạn paragraph này sử dụng margin mặc định
Đoạn văn bản số 1
Đoạn văn bản số 2
Đoạn văn bản số 3
Điều chỉnh Margin-top:35px và margin-bottom:33px cho đoạn văn bản số 2Đoạn văn bản số 1
Đoạn văn bản số 2
Đoạn văn bản số 3
Border xác định các đường viền trong một Box-model, các thuộc tính của một Border gồm:- Border-style: Kiểu đường viền
- Border-color: Màu sắc của đường viền
- Border-width: Độ dày của đường viền
- Kiểu Solid
- Kiểu Dashed
- Kiểu Dotted
- Kiểu Double
- Padding-top
- Padding-right
- padding-bottom
- Padding-left
Đoạn văn bản số 1
Đoạn văn bản số 2
Đoạn văn bản số 3
Điều chỉnh padding-top:10px và padding-bottom:5px cho đoạn văn bản số 2Đoạn văn bản số 1
Đoạn văn bản số 2
Đoạn văn bản số 3
Một số cách viết tắt cho các thuộc tính của Box - model
Các thuộc tính của Margin, Border, Padding áp dụng cho 4 cạnh của một box, do đó, thay vì khai báo thuộc tính cho từng cạnh ta có thể khai báo theo trình tự và trình duyệt tự hiểu các giá trị của mỗi cạnh:
Margin: Thay vì Style="margin-top: 2px; margin-right:3px; margin-bottom:4px; margin-left:5px;", có thể viết ngắn gọn lại thành Style="margin: 2px 3px 4px 5px"
Border Thay vì viết Style="border-width:2px; border-style:solid; border-color:green" có thể viết ngắn gọn lại thành: Style="border: 2px solid green". Thứ tự để viết tắt cho Border là border-width; border-style; border-color.
Padding:Cách viết tắt của Padding tương tự với Margin, có thể viết ngắn gọn thành: Style="padding: 2px 3px 4px 5px"
0 nhận xét:
Post a Comment