Thuộc tính width trong css

Giới thiệu nội dung bài xích viết

Như trong bài viết về sử dụng CSS vào HTML anh đã phân chia sẻ, những thuộc tính được áp dụng trong CSS nhằm giúp hiển thị, định dạng các bộ phận trong HTML khi ta lập trình web. Trong nội dung bài viết hôm nay anh sẽ tiếp tục share cho các bạn về thuộc tính height cùng width trong CSS cần sử dụng để tùy chỉnh chiều cao và dài cho thành phần HTML.

Bạn đang xem: Thuộc tính width trong css

Anh sẽ trình bày và phía dẫn cách làm cho từng thuộc tính thông qua các ví dụ như minh hoạ. Trước hết, các các bạn sẽ được mày mò các giá chỉ trị có trong nằm trong tính height với width bao gồm auto, length, phần trăm, initial, inherit. Tiếp nối tiếp tục đi qua các thuộc tính max-width, min-width, max-height, min-height trong xây dựng web CSS.Cụ thể cách làm việc như cụ nào với từng thuộc tính, các bạn tiếp tục gọi những chia sẻ dưới đây của anh để đọc thêm nhé!

1. Nằm trong tính height cùng width vào css

Chúng ta áp dụng thuộc tính height và width để cấu hình thiết lập chiều cao cùng dài cho một phần tử HTML

Thuộc tính height và width có thể có những giá trị sau.

auto : đây là thuộc tính khoác định. Trình trông nom sẽ tính chiều cao và lâu năm cho 1 phần tử HTML

length : áp dụng px, cm, và những đơn vị đo không giống để xác minh chiều cao và dài cho phần tử HTML

% : sử dụng tỷ lệ để tính giá trị độ cao và dài mang đến các bộ phận HTML

initial : thiết lập cấu hình chiều cao và dài cho giá trị thuở đầu của bộ phận HTML inherit : cấu hình thiết lập chiều cao cùng dài được kế thừa từ bộ phận cha

Ví dụ dưới đây ta tạo ra một thẻ div có chiều cao là 200px cùng chiều dài là chỉ chiếm 50%

123456789101112

Ví dụ bạn có thể thiết lập chiều cao là 100px cùng chiều lâu năm là 500px như sau

123456789101112

2. ở trong tính max-width trong css

Chúng ta sử dụng thuộc tính max-width để cấu hình thiết lập giá trị maximum (giá trị bự nhất) của chiều nhiều năm của một trong những phần tử HTML.

Xem thêm: Cách Làm Thu Nhỏ Màn Hình Máy Tính, Cách Thu Nhỏ Màn Hình Máy Tính Đơn Giản

Giá trị max-width có thể là px, cm, hoặc %. Ví dụ nếu như ta thực hiện thẻ div nếu chiều dài của thẻ div mà lớn hơn chiều nhiều năm của trình trông nom thì nó sẽ mở ra một thanh kéo ngang vì vậy thì rất phiền toái cho người tiêu dùng vì họ đề nghị kéo chuột mới thấy hết mọi nội dung còn lại.

Chúng ta thực hiện max-width để giải quyết và xử lý bất cập trên.

12345678910111213141516171819202122

Set the max-width of an element

This div element has a height of 100px and a max-width of 500px:

Nếu ta thay đổi kích thước của trình duyệt nhỏ lại thì auto thẻ div đang tự điều chỉnh cho vừa với trình duyệt.