css height và width
Thuộc tính CSS height và width thường được sử dụng để xác định chiều cao và chiều rộng của một phần tử HTML.
Thuộc tính CSS max-width được sử dụng để chỉ định chiều rộng tối đa của một phần tử HTML.
Phần tử này có chiều cao 50px và chiều rộng 100%
CSS Height và Width
Thuộc tính height và width được sử dụng để thiết lập chiều cao và chiều rộng cho một phần tử HTML.
Thuộc tính chiều cao và chiều rộng không bao gồm phần đệm padding, đường viền border hoặc lề margin. Trình duyệt web sẽ xác định chiều cao/chiều rộng của một phần tử HTML mà không tính tới phần đệm padding, đường viền border và lề margin của phần tử đó.
Thuộc tính height và width có các giá trị sau:
- auto - Đây là mặc định. Trình duyệt tự động tính toán chiều cao và chiều rộng
- length - Xác định chiều cao/chiều rộng bằng px, cm, v.v.
- % - Xác định chiều cao/chiều rộng theo giá trị phần trăm của thẻ chứa
- initial - Đặt chiều cao/chiều rộng theo giá trị mặc định của nó
- inherit - Chiều cao/chiều rộng sẽ được kế thừa từ giá trị của phần tử cha của nó
CSS Height và Width - Một số ví dụ
Ví dụ 1: Đặt chiều cao và chiều rộng của phần tử <div>
<style> div { height: 200px; width: 50%; background-color: powderblue; } </style>
Ví dụ 2: Đặt chiều cao và chiều rộng cho phần tử <div> khác
<style> div { height: 100px; width: 500px; background-color: powderblue; } </style>
CSS Height và Width - Thuộc tính max-width
Thuộc tính max-width được sử dụng để thiết lập chiều rộng tối đa của một phần tử HTML.
Thuộc tính max-width có thể được chỉ định trong các giá trị xác định đơn vị đo như px, cm, v.v., hoặc phần trăm (%) của vùng chứa nó hoặc đặt thành auto (đây là mặc định. Có nghĩa là không có chiều rộng tối đa).
Sự cố với phần tử <div> trên sẽ xảy ra khi cửa sổ trình duyệt nhỏ hơn chiều rộng của phần tử (500px). Sau đó, trình duyệt sẽ thêm một thanh cuộn ngang vào trang.
Trong trường hợp này, việc sử dụng thuộc tính max-width thay thế sẽ cải thiện khả năng xử lý trên các thiết bị có màn hình nhỏ của trình duyệt.
width và thuộc tính max-width trên cùng một phần tử, và giá trị của thuộc tính width lớn hơn thuộc tính max-width, thì thuộc tính max-width sẽ được sử dụng (và thuộc tính width sẽ bị bỏ qua).Ví dụ
<style> div { max-width: 500px; height: 100px; background-color: powderblue; } </style>