Sử dụng box model.
Dùng border, background, padding, margin để định dạng kết quả như hình dưới đây:
Lần lượt tiến hành theo các bước hướng dẫn sau đây:
Bước 1: Tạo tài liệu mới html gồm đầy đủ các phần head, body. Trong body có sử dụng các thẻ div, p như sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sử dụng Boxmodel</title>
</head>
<body>
<div>
<p>Mô hình hộp trong CSS về cơ bản là một hộp bao quanh phần tử HTML.
Nó bao gồm: lề (margin), viền (border), phần đệm (padding) và nội dung (content)</p>
<p>Mô hình hộp trong CSS về cơ bản là một hộp bao quanh phần tử HTML.
Nó bao gồm: lề (margin), viền (border), phần đệm (padding) và nội dung (content)</p>
<p>Mô hình hộp trong CSS về cơ bản là một hộp bao quanh phần tử HTML.
Nó bao gồm: lề (margin), viền (border), phần đệm (padding) và nội dung (content)</p>
</div>
</body>
</html>Kết quả hiển thị:
Bước 2: Nhúng CSS định dạng hiển thị của thẻ div
Tạo class có tên boxmodel cho thẻ div:
<div class="boxmodel">
Và định nghĩa bộ chọn .boxmodel ở thẻ <style>:
<style>
.boxmodel{
margin: 0 auto;
width: 800px;
border: 10px;
padding: 10px;
border-color: chartreuse aqua blue blueviolet;
border-style: solid;
}
</style>Trong đó:
- Thuộc tính width để quy định kích thước chiều rộng của div, giá trị là 800px
- Thuộc tính border để quy định viền của div, có độ dày 10px
- Thuộc tính border-color để quy định màu của viền (tuân thủ quy tắc chiều kim đồng hồ + quy tắc đối xứng)
- Thuộc tính border-style để quy định kiểu của viền, nét liền solid
- Thuộc tính padding để quy định khoảng cách từ nội dung đến viền 10px
- Thuộc tính margin nhận giá trị “0 auto” để căn div ra giữa cửa sổ hiển thị
Lưu ý: Lần lượt thêm các thuộc tính trên và chạy thử trên trình duyệt để xem sự thay đổi và hiểu ý nghĩa các thuộc tính
Kết quả hiển thị:
Bước 3: Viết bộ chọn html quy định hiển thị cho các thẻ p
.boxmodel p{
border: 3px dotted darkred;
padding: 10px;
}Kết quả hiển thị:
Bước 4: Lần lượt viết các bộ chọn id cho các thẻ p để quy định hiển thị
Trong html:
<div class="boxmodel">
<p id="boxmodel1">Mô hình hộp trong CSS về cơ bản là một hộp bao quanh phần tử HTML.
Nó bao gồm: lề (margin), viền (border), phần đệm (padding) và nội dung (content)</p>
<p id="boxmodel2">Mô hình hộp trong CSS về cơ bản là một hộp bao quanh phần tử HTML.
Nó bao gồm: lề (margin), viền (border), phần đệm (padding) và nội dung (content)</p>
<p id="boxmodel3">Mô hình hộp trong CSS về cơ bản là một hộp bao quanh phần tử HTML.
Nó bao gồm: lề (margin), viền (border), phần đệm (padding) và nội dung (content)</p>
</div>Định nghĩa các bộ chọn id trong CSS:
#boxmodel1{
margin-bottom: 20px;
}
#boxmodel2{
margin-bottom: 40px;
}
#boxmodel3{
margin-bottom: 60px;
}Trong đó:
- Thuộc tính margin-bottom để quy định khoảng cách lề dưới của các div, lần lượt là 20px, 40px, 60px
Kết quả hiển thị cuối cùng:
Trên đây CodeGym đã cùng với bạn thực hành sử dụng box model. Hãy chụp ảnh màn hình và nộp bài thực hành của bạn trên CodeGymX để cùng nhau luyện tập nhé!
0 Lời bình