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ị:

Sử dụng box model

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

Download - Giáo trình thuật toán

8 + 9 =

Tags:

0 Lời bình

Gửi Lời bình

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

BÀI VIẾT LIÊN QUAN

BẠN MUỐN HỌC LẬP TRÌNH?

GỌI NGAY

098 953 44 58

Đăng ký tư vấn lộ trình học lập trình

Đăng ký tư vấn, định hướng lộ trình học và giải đáp các thắc mắc về ngành nghề – Miễn phí – Online.

14 + 11 =

TƯ VẤN VỀ LỘ TRÌNH HỌC NGHỀ LẬP TRÌNH TẠI CODEGYM
TƯ VẤN VỀ LỘ TRÌNH HỌC NGHỀ LẬP TRÌNH TẠI CODEGYM