[Thực hành] Sử dụng box model

Tổng quan

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: 

Leave a Reply

Your email address will not be published. Required fields are marked *