CSS Model box

Dẫn nhập

Ở bài học trước chúng ta đã biết CÁCH SỬ DỤNG MÀU TRONG CSS

Trong bài học ngày hôm nay chúng ta sẽ cùng tìm hiểu về CSS Model box 

---

Nội dung chính

Để đọc hiểu bài này, bạn nên có kiến thức về:

• TỔNG QUAN HTML CƠ BẢN
• TỔNG QUAN CSS CƠ BẢN

Trong bài này, Kteam sẽ cùng bạn tìm hiểu về:

• Cấu trúc của CSS Model box 
• Set up model box mặc định cho blog

Các thao tác được thực hành trên project của bài trước, bạn có thể tải xuống project ở cuối bài CÁCH SỬ DỤNG MÀU TRONG CSS

Lưu ý: Bài viết nhằm tóm tắt nội dung thực hiện project & giúp bạn nắm bắt các phần được hướng dẫn một cách đơn giản nhất. Tuy nhiên, hãy theo dõi video để học hỏi các kiến thức và kỹ thuật chi tiết nhất từ tác giả.

---

Cấu trúc của CSS Model box 

Tất cả các phần tử trong HTML đều được cấu trúc theo mô hình Model Box (hay còn gọi là cấu trúc hộp). Model box gồm các thuộc tính như: lề, đường viền, khoảng trống, nội dung. Bao bọc xung quanh phần tử HTML, được sử dụng khi đề cập đến trong quá trình thiết kế hoặc phân chia bố cục cho các thành phần. 

Cùng Kteam tham khảo mô hình bên dưới để hiểu hơn về Model Box: 

Trong đó: 

• Content: Vùng hiển thị nội dung (text, image, …) của phần tử HTML
• Padding: Vùng đệm khoảng cách từ nội dung (content) đến đường viền (Border), bao quanh bốn mặt của Content
• Border: Đường viền bao xung quanh phần tử HTML, bao quanh bốn mặt của Padding
• Margin: Khoảng cách từ đường viền (Border) của phần tử này đến các phần tử khác hoặc các phần của trang Web (viền trang web), bao quanh bốn mặt của Border.

Lưu ý:

• Bình thường bạn không nhìn thấy mô hình Model Box xung quanh các phần tử do mặc định các thuộc tính của Model box đều là 0.

• Mọi người thường nhầm lẫn padding và margin do border thường không hiển thị, nắm chắc khái niệm cơ bản sẽ giúp bạn tránh được sự nhầm lẫn này và dễ dàng hơn trong việc phân chia bố cục trang web.

---

Kích thước Model Box

Kích thước chỉ định một phần tử HTML chưa bao gồm kích thước của Model box:

Kích thước một model box bao gồm kích thước phần tử và kích thước thuộc tính của hộp đó như: 

• Chiều rộng Model Box = Chiều rộng  + Padding trái + Padding phải + Border trái + Border phải + Margin trái + Margin phải
• Chiều cao Model Box = Chiều cao  + Padding trên + Padding dưới + Border trên + Border dưới + Margin trên + Margin dưới
• Vì vậy khi tăng hay giảm kích thước các yếu tố Model Box thì kích thước phần tử cũng tăng hoặc giảm theo.

Ví dụ: 

img{
    width:500px;
    height: 300px;

    padding: 50px;
    margin-top: 50px;
    border: 20px solid green;

}

Cho kết quả như hình bên dưới:

Trong đó:

• Chiều rộng Model Box = Chiều rộng hình + 2 * Padding + 2 * Border = 500 + 2 * 50 + 2 * 20 = 640 px
• Chiều cao Model Box = Chiều cao hình + 2 * Padding + 2 * Border + Margin-top = 300 + 2* 50 + 2 * 20 + 50 = 490 px

---

Border trong Model Box

Thuộc tính Border cho phép bạn chỉ định định dạng của đường viền như:  kiểu đường viền, độ dày đường viền, màu sắc đường viền của một phần tử nào đó.

Thuộc tính vị trí

Như hình minh họa mô hình Model Box, bạn có thể thấy Border gồm 4 phía là trái, phải , trên dưới tương ứng 4 thuộc tính vị trí:

• Border-top
• Border-right
• Border-bottom
• Border-left

Bạn cũng có thể sử dụng Border như một thuộc tính tổng quát để chỉ định giá trị cùng lúc cho 4 thuộc tính vị trí trên

Thuộc tính định dạng

Ngoài vị trí, bạn có thể chỉ định giá trị màu sắc cho border qua thuộc tính:

Border-color: giá trị;

Trong đó, giá trị có thể là mã màu hex, rgb, tên màu,….

Độ dày (hay có thể hiểu là độ rộng) của đường viền được thể hiện qua thuộc tính 

Border-width: giá trị;

Trong đó, giá trị có thể là px, thin, medium, thick

Kiểu đường viền được thể hiện qua thuộc tính Border-style như đường nét thẳng, đường chấm tròn, đường gạch đứt, đường viền đôi: 

Một số kiểu đường viền:

• dotted: đường viền cấu thành từ những dấu chấm tròn.
• dashed: đường viền cấu thành từ những nét gạch ngang đứt
• solid: đường viền cấu thành từ nét thẳng
• double: đường viền được cấu thành từ 2 nét thẳng song song
• inherit: đường viền được thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài)

Ngoài ra còn có các kiểu đường viền như none, hidden, groove, ridge, inset, outset mà bạn có thể tham khảo trong link bên dưới: 

https://www.w3schools.com/css/css_border.asp

Thuộc tính kết hợp

Thực tế, khi sử dụng ít khi bạn chỉ định riêng lẻ từng thuộc tính cho border mà sử dụng thuộc tính kết hợp để code bớt rườm rà.

Border- <vị trí>: width  style  color;

Lưu ý: width, style, color có thể ở vị trí bất kỳ

Ví dụ: 

h1{
    border: 2px solid red;
}

---

Padding & Margin trong CSS

Padding dùng để tạo không gian giữa nội dung và đường viền (bên trong border) , còn Margin để tạo không gian giữa đường viền của phần tử này với phần tử khác (bên ngoài Border). Nhìn chung, chúng đều là khoảng cách tính từ viền và định khoảng không gian cho phần tử. Cả hai thuộc tính trên đều được xác định bởi khoảng cách của các vị trí

Cú pháp Padding:

Padding: <giá trị top> <giá trị right> <giá trị bottom> <giá trị left>

hoặc

Padding: <giá trị top – bottom> <giá trị right – left> 

Cú pháp Margin:

Margin: <giá trị top> <giá trị right> <giá trị bottom> <giá trị left>

hoặc

Margin: <giá trị top – bottom> <giá trị right – left> 

Các nhóm giá trị hữu dụng với margin & padding: 

• Giá trị độ dài: như px, pt, cm,…
• Giá trị %: padding (margin) bằng bao nhiêu % chiều rộng phần tử chứa.
• Giá trị thừa kế: được thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài)

Trong đó, padding không nhận giá trị âm, Margin có nhận giá trị âm & auto. 

Ví dụ:

h1{
    margin: 10px 20px 10px 20px;

    margin: 10px 20px;

    padding: 10px 20px 10px 20px;

    padding: 10px 20px;
}

---

Cấu trúc model box mặc định

*{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

}

 

Để dễ dàng chỉnh padding và border tránh mặc định, giúp căn chỉnh element dễ dàng tránh nhầm lẫn, và khó bảo trì.

---

Project tham khảo 

Nếu việc thực hành theo hướng dẫn không diễn ra suôn sẻ như mong muốn. Bạn cũng có thể tải xuống PROJECT THAM KHẢO ở link bên dưới! 

---

Kết Luận

Ở bài này chúng ta đã biết cách sử dụng CSS model box .

Ở bài học xong chúng ta sẽ cùng làm quen với các khái niệm quan trọng đó là ID ,CLASS TRONG HTML VÀ FLOAT TRONG CSS.

Cảm ơn các bạn đã theo dõi bài viết, hãy để lại bình luận và góp ý để giúp phát triển bài viết tốt hơn. Đừng quên: “Luyện tập - Thử thách – Không Ngại Khó”.

 

 

---

Tài liệu 

Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học CSS Model box dưới dạng file PDF trong link bên dưới.

Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com

Đừng quên like hoặc +1 Google để ủng hộ Kteam và tác giả nhé! 

---

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng. 

 

---

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.