Thuộc tính max-width trong CSS | Thiết lập chiều rộng tối đa cho phần tử HTML

Posted on by mtoplistChuyên mục:Top List

Thuộc tính max-width trong CSS

Để dễ dàng tiếp thu bài hướng dẫn này thì trước tiên bạn cần xem qua:

  • Thuộc tính width trong CSS

1) Nhắc lại “các thành phần của một phần tử”

– Thông thường, cấu trúc của một phần tử HTML sẽ bao gồm bốn thành phần:

  • margin (phần lề nằm giữa đường viền của phần tử với các phần tử xung quanh)
  • border (đường viền của phần tử)
  • padding (vùng đệm nằm giữa đường viền của phần tử với nội dung của phần tử)
  • content (nội dung của phần tử)

– Dưới đây là hình ảnh minh họa về cấu trúc của một phần tử HTML.

margin

border

padding

content

2) Thuộc tính max-width trong CSS

– Thuộc tính max-width được sử dụng để thiết lập “chiều rộng tối đa” cho phần nội dung của phần tử, điều đó có nghĩa là chiều rộng phần nội dung của phần tử sẽ không bao giờ có thể vượt quá giá trị của thuộc tính này (Xem ví dụ)

– Lưu ý: Đối với phần tử sử dụng thuộc tính width, nếu chiều rộng phần nội dung của cha nó nhỏ hơn chiều rộng của nó thì nó sẽ bị tràn ra ngoài. Còn đối với phần tử sử dụng thuộc tính max-width, nếu chiều rộng phần nội dung của cha nó nhỏ hơn chiều rộng của nó thì nó sẽ tự động thu hẹp lại để có thể nằm gọn bên trong phần nội dung của cha nó (Xem ví dụ)

– Thuộc tính max-width thường được sử dụng trong việc thiết kế Web Responsive.

(bạn sẽ được tìm hiểu chi tiết về cách thiết kế Web Responsive trong các bài hướng dẫn sau)

3) Cách sử dụng thuộc tính max-width trong CSS

– Để sử dụng thuộc tính max-width, ta dùng cú pháp như sau:

max-width: none|length|percent|initial|inherit;

– Trong đó, ta thấy giá trị của thuộc tính max-width có thể được xác định bởi một trong năm loại:

none

– Không thiết lập chiều rộng tối đa cho phần nội dung của phần tử.

Xem ví dụ

length

– Thiết lập chiều rộng tối đa cho phần nội dung của phần tử dựa theo một giá trị cụ thể (giá trị này có thể được xác định theo đơn vị px, em, cm, ….)

Xem ví dụ

percent

– Thiết lập chiều rộng tối đa cho phần nội dung của phần tử dựa theo tỷ lệ phần trăm chiều rộng phần nội dung của phần tử chứa nó.

Xem ví dụ

initial

– Sử dụng giá trị mặc định của nó.

(mặc định thì thuộc tính max-width có giá trị là none)

Xem ví dụ

inherit

– Kế thừa giá trị thuộc tính max-width từ phần tử cha của nó.

Xem ví dụ

mtoplist