Trang chủ » Blog » [Thực hành] Sử dụng box model- Codegym.vn

[Thực hành] Sử dụng box model- Codegym.vn

bởi CodeGym | 26/12/2023 16:30 | Bài thực hành | Blog

Sử dụng box model.

Dùng border, background, padding, margin để định dạng kết quả như hình dưới đây:

Sử dụng box model

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é!

Tags: