[Tự học CSS] – Tìm hiểu về thuộc tính max-width của CSS chỉ trong 2 phút.

6875 lượt xem
Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay

Chào các bạn, hôm nay chúng ta lại gặp nhau trong một loạt bài hướng dẫn dùng CSS cơ bản của Giuseart.com. Hôm nay mình sẽ giới thiệu đến các bạn một thuộc tính hay được sử dụng trong CSS, đó là thuộc tính max-width. Cùng tìm hiểu nhé!

Khái niệm, định nghĩa

Mặc định các khối phần tử trong HTML sẽ có chiều rộng tối đa (full viền, trải dài từ trái sang phải). Tuy nhiên, trong một số trường hợp, ta cần phải giới hạn chiều rộng (theo px, em hoặc %) cho một số phần tử để nó hiển thị đúng theo yêu cầu thiết kế , ta phải dùng tới thuộc tính max-width. Max-width trong CSS dùng để thiết lập chiều rộng tối đa cho một phần tử.

Cấu trúc:

Trong đó, tag là tất cả phần tử HTML, ngoài trừ các phần tử table. Các giá trị có thể sử dụng cho thuộc tính max-width như sau:

  • Đơn vị: (max-width: 50px): chiều rộng tính từ mép ngoài cùng bên trái của phần tử, đơn vị có thể là px, em hoặc %,…
  • None: (max-width: none): không sử dụng chiều rộng lớn nhất, đây là dạng mặc định của phần tử.
  • Inherit: (max-width: inherit): xác định thừa hưởng thuộc tính từ phần tử cha (phần tử bao ngoài).

Ví dụ thuộc tính max-width trong CSS

Bạn có thể theo dõi ví dụ sau đây để hiểu cách hoạt động của thuộc tính max-width trong CSS:

Ví dụ 1: Đặt giá trị max-width: 500px cho phần tử.

Đoạn này có chiều rộng tối đa là 500px và có bo viền độ dày 3px

Ví dụ 2: Đặt giá trị max-width: 200px cho phần tử.

Đoạn này có chiều rộng tối đa là 500px và có bo viền độ dày 3px

Điều kiện sử dụng

Thuộc tính max-width sử dụng được trên các trình duyệt Opera, Chrome, Cốc Cốc, IE (ngoại trừ IE6; IE8 vẫn dùng được nhưng phải có !Doctype.

Khi đã sử dụng thuộc tính max-width, chiều rộng của box sẽ không vượt qua giá trị của max-width.

Thật dễ hiểu phải không nào, cái này rất quan trọng để sau này ta có thể áp dụng vào Responsive cho Website nên các bạn bạn cần phải nhắm chắc và hiểu rõ bản chất của thuộc tính này…

4.3/5 - (6 bình chọn)
Chia sẻ bài viết:

Thông báo chính thức: Ninh Bình Web (thuộc GiuseArt) không hợp tác với bất kỳ ai để bán giao diện Wordpress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebookzalo chính thức.

Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!

Thẻ tìm kiếm:

Bài viết mới cập nhật:

1 những suy nghĩ trên “[Tự học CSS] – Tìm hiểu về thuộc tính max-width của CSS chỉ trong 2 phút.

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *