Khái niệm Box Model trong CSS

Khái niệm Box Model trong CSS

Box Model trong CSS là một định dạng khung, hộp bao quang một thành phần nào đó. Trong CSS Box Model bao gồm: width, height, padding, margin, border và các tùy chọn khác nữa.

box model trong CSS

box model trong CSS

Width và height

Đây là hai thuộc tính qui định độ rộng, chiều cao của đối tượng:
Ví dụ:

1
<!-- p{      width: 300px;      height: 50px; } -->

Ngoài đơn vị px ra bạn cũng có thể sử dụng các đơn vị khác được qui định trong css cho trường hợp này, bạn có thể tham khảo đơn vị trong css

Ngoài ra bạn có thể sử dụng:

  • max-width: Qui định chiều rộng tối đa cho một thành phần trong web.
  • min-width: Qui định chiều rộng tối thiểu cho một thành phần trong web.
  • max-height: Qui định chiều cao tối đa cho một thành phần trong web.
  • min-height: Qui định chiều cao tối thiểu cho một thành phần trong web.

Bạn sử dụng các trường hợp trên cho thành phần mà bạn chư xác định được có chiều rộng là bạn nhiêu. Bạn cần giới hạn lại phòng khi tp đó rộng hay cao quá sẽ vỡ mất giao diện chúng ta.

Margin và padding

Margin: Canh lề đối tượng, thuộc tính này cho phép bạn qui định khoảng cách từ đối tượng đang xét ra phía bên ngoài nó. (xem hình trên)

Thuộc tính này có cấu trúc viết như sau:

1
2
3
4
5
6
7
8
9
10
<!--
 
margin:<margin-top> | <margin-right> | <margin-bottom> | <margin-left>;
 
Hoặc: margin:<value1>|< value2>;
 
// Value 1 là giá trị margin-top và margin- bottom.
//Value2 là giá trị margin-left và margin-right.
 
-->

Padding: Đây là vùng đệm, đối tượng này cho phép bạn qui định khoảng cách từ đối tượng đang xét với thành phần trong nó. (Xem hình trên)

Thuộc tính này có cấu trúc tương tự như margin:

1
2
3
4
5
6
7
8
9
10
<!--
 
padding:<padding-top> | <padding-right> | <padding-bottom> | <padding-left>;
 
Hoặc: padding:<value1>|< value2>;
 
// Value 1 là giá trị padding-top và margin- bottom.
// Value2 là giá trị padding-left và margin-right.
 
-->

Thuộc tính Border

Đây là một thành phần cũng khá quan trong trong một trang web, border trong css cho phép bạn qui định viền của đối tượng giúp trang trí, nhấn mạnh, đóng khung…

Cấu trúc border bao gồm:

  • Border-width: Thành phần Border-width qui định độ lớn của viền, có các giá trị: thin (mảnh), medium (vừa), thick (dày), hay là một giá trị đo cụ thể như pixels, cm…
  • Border-color: Qui định màu sắc của viền.
  • Border-style: Qui định kiểu viền ví dụ các style của border như sau:

border styles

border styles

Cú pháp của border:

1
2
3
<!--
     border:<border-width> |<border-color> |<border-style>;
-->

Kết luận: Vậy là chúng ta đã tìm hiểu cơ bản về box model trong css. Mọi đóng góp vui lòng comment nha.
Các bạn nào chưa bao giờ đụng đến CSS thì làm bài tập sau sẽ rõ hơn về phần này.

bài tập về box model trong css

bài tập về box model trong css

 

Bạn thấy bài viết này như thế nào?: 
No votes yet
Ảnh của Tommy Tran

Tommy owner Express Magazine

Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies

  • Skype ID: tthanhthuy

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
Tính năng REST Export trong Drupal 8 View

Tính năng REST Export trong Drupal 8 View

This blog is all about REST Export feature of Drupal 8’ view. Let me first brief you about what is the REST api and than I will explain you how REST Export

Sandbox là gì?

Sandbox là gì?

"Sandbox" là gì mà các nhà phát triển dạo gần đây cứ liên tục đề cập đến? Sử dụng sandbox thế nào để tạo các ứng dụng xuất sắc hơn?

Hướng dẫn gửi dữ liệu đi bằng Curl post

Hướng dẫn gửi dữ liệu đi bằng Curl post

Ở bài viết này mình sẽ hướng dẫn các bạn sử dụng curl để gửi dữ liệu sang một site khác. cái này khó ở phần thiết lập các thuộc tính curl_setopt thôi nhưng không sao đừng có nản  mình sẽ cung cấp cho các bạn một function mà mình đã làm sẵn các bạn chỉ cần sử dụng function đó và chạy thui ...

Công ty diệt chuột T&C

 

Diet con trung