[Học CSS] Box Model và các thuộc tính [NEW]



Mô hình hộp là kỹ thuật cơ bản nhất trong CSS Layout và dùng để bạn mô tả khoảng cách mà mỗi phần tử trên website sở hữu, hay nói cách khác là kỹ thuật tinh chỉnh khoảng cách hiển thị cho từng phần tử trên website. .

Kỹ thuật Box Model trong CSS bao gồm 4 phần quan trọng:

  • Lề: Khoảng cách từ bên ngoài của phần tử.
  • Biên giới: Đường viền của phần tử.
  • Đệm: Khoảng cách từ bên trong phần tử.
  • Content: Nội dung trong phần tử.

4 phần này chúng ta có hình ảnh (mượn từ W3Scools) như sau:

[Học CSS] Box Model và các thuộc tính [NEW]

Và trong 4 thành phần trên, phần nội dung chúng ta sẽ không có thuộc tính CSS nào để biểu diễn vì nó là nội dung trong phần tử. 3 phần còn lại sẽ có các thuộc tính CSS đại diện sau:

margin: top right bottom left;

border: top right bottom left;

padding: top right bottom left;

Cách sử dụng 3 thuộc tính này mình sẽ nói chi tiết bên dưới.

Đệm

Padding có nghĩa là chúng ta sẽ đặt khoảng cách được tính từ Nội dung đến đường viền của phần tử, đơn giản như vậy. Padding được khai báo trong CSS bởi thuộc tính padding với các giá trị tuần tự trên cùng bên phải dưới cùng bên trái (trên> phải> dưới> trái) và giá trị là số có đơn vị đo.

Ví dụ, bên dưới tôi có một thẻ <div> và tôi sẽ sử dụng padding để tạo khoảng cách trên và dưới là 20px, trái và phải 15px.

Tuy nhiên, nếu bạn muốn đặt phần đệm cho trên cùng và dưới cùng một giá trị và bên trái và bên phải cùng một giá trị, bạn có thể chỉ cần viết giá trị là 20px 10pxtức là trên và dưới sẽ có 20px và trái và phải sẽ có 10px.

Nếu bạn nhập một giá trị duy nhất, nó sẽ căn chỉnh cả 4 mặt với giá trị đó, ví dụ: nếu bạn chỉ nhập 20px, nó sẽ tạo khoảng cách cho cả 4 mặt là 20px.

Ngoài thuộc tính padding, thuộc tính này còn có 4 thuộc tính phụ khác là padding-top, padding-bottom, padding-leftpadding-right và mỗi thuộc tính là để đặt giá trị cho từng mặt cụ thể.

Biên giới

Border có nghĩa là một thuộc tính để bạn tạo đường viền cho phần tử và nó sẽ được khai báo cùng với thuộc tính border trong CSS.

Thuộc tính đường viền này bạn sẽ viết theo cấu trúc sau:

border: [size] [type] [color];

Ví dụ mình muốn tạo một đường viền, đường viền là 1px, kiểu trơn và màu đỏ, mình sẽ viết như sau:

border: 1px solid red;

Trong biên giới có một số loại được hỗ trợ nhưsolid,dotted, double,groove,ridge, insetoutset.

Giống như các thẻ Mô hình Hộp khác, đường viền cũng có các thẻ phụ border-top, border-right, border-bottomborder-left.

Xem ví dụ về đường viền

Lề

Trong khi Padding có nhiệm vụ tạo khoảng cách giữa Content và Border thì Margin sẽ có tác dụng tạo khoảng cách từ Border ra ngoài, nói cách khác, nó sẽ giúp bạn tinh chỉnh khoảng cách giữa các phần tử. Để hiểu rõ hơn, vui lòng xem ví dụ bên dưới.

Bạn thấy đấy #box1#box2 Có khoảng trống không? Đó là lề, bạn có thể nhấp qua tab CSS để xem #box2 Tôi đã thêm margin: 32px 0 0 0tức là nó sẽ tạo ra một khoảng trống trên đầu trang #box2 và nếu không thì không tạo, viết tương tự như padding là 4 giá trị sẽ sắp xếp theo phía trên bên phải phía dưới bên trái.

Và nó cũng có một số thuộc tính phụ margin-top, margin-right, margin-bottommargin-left.

Mô hình hộp kiểm với các công cụ dành cho nhà phát triển

Trên trình duyệt Google Chrome và Firefox, có một bộ công cụ được tích hợp sẵn dành cho các nhà phát triển trang web được gọi là Công cụ dành cho nhà phát triển. Công cụ này có rất nhiều chức năng nhưng trong bài viết này tôi hướng dẫn các bạn cách sử dụng nó để kiểm tra Box Model mà thôi.

Để bật tính năng này, hãy nhấn. Chìa khóa F12 trên bàn phím, sau đó nhấp vào tab Computed (Google Chrome) hoặc Box Model (Firefox) ở phía bên phải ..

css-box-model-developer-tools

Trong khung đó, bạn sẽ thấy nó được mô tả rõ ràng, vùng màu xanh là Contentmàu xanh lá cây là Đệmmàu cam là Biên giới và màu da là Lề.

Để xem thông tin của phần tử bạn muốn, hãy nhấp vào nút phần tử tìm kiếm ở phía bên trái (Firefox và Google Chrome đều ở cùng một vị trí).

css-box-model-developer-tools-find-element

Bây giờ bạn có thể di chuột qua một phần tử trên trang web và nhấp để xem Mô hình Hộp ở phía bên tay phải, bạn có thể thử nhấp vào từng ô giá trị trong ngăn Mô hình Hộp và thay đổi giá trị để xem sự thay đổi. thay đổi của nó (sẽ biến mất sau khi bạn làm mới trình duyệt của mình).

css-box-model-developer-tools-edit

Phần kết

Trên đây là tất cả các khái niệm về Box Model mà bạn cần nắm vững để có thể làm việc với CSS Layout, thoạt nghe thì có vẻ đơn giản nhưng sau này khi bạn áp dụng vào website sẽ thấy rất quan trọng vì nó có thể Giao diện sẽ không được như mong đợi nếu bạn không hiểu cách sử dụng Box Model đúng cách.

Đánh giá nội dung này

Tiếp tục đọc trong bộ truyện