Chiều cao và chiều rộng CSS
- Previous Page Khoảng cách nội bộ CSS
- Next Page Mô hình khung CSS
CSS thiết lập chiều cao và chiều rộng
height và width Thuộc tính này được sử dụng để thiết lập chiều cao và chiều rộng của phần tử.
Thuộc tính height và width không bao gồm lề trong, viền hoặc lề ngoài. Nó thiết lập chiều cao hoặc chiều rộng của vùng bên trong lề trong, viền và lề ngoài!
Giá trị chiều cao và chiều rộng CSS
height và width Thuộc tính có thể thiết lập các giá trị sau:
auto- Mặc định. Trình duyệt tính toán chiều cao và chiều rộng.length- Định nghĩa chiều cao/chiều rộng bằng px, cm, v.v.%- Định nghĩa chiều cao/chiều rộng bằng phần trăm của khối bao gồm.initial- Thiết lập chiều cao/chiều rộng thành giá trị mặc định.inherit- Kế thừa chiều cao/chiều rộng từ giá trị của cha.
Ví dụ về chiều cao và chiều rộng CSS
Ví dụ
Thiết lập chiều cao và chiều rộng của phần tử <div>:
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
Ví dụ
Thiết lập chiều cao và chiều rộng của phần tử <div> khác:
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
Lưu ý:Hãy nhớ rằngheight và width Thuộc tính không bao gồm lề trong, viền hoặc lề ngoài! Chúng thiết lập chiều cao/chiều rộng của vùng bên trong lề trong, viền và lề ngoài!
Thiết lập max-width
max-width Thuộc tính này được sử dụng để thiết lập chiều rộng tối đa của phần tử.
Có thể sử dụng giá trị độ dài (ví dụ px, cm, v.v.) hoặc phần trăm của khối bao gồm (％) để chỉ định max-width (chiều rộng tối đa), hoặc đặt nó là none (giá trị mặc định. có nghĩa là không có chiều rộng tối đa).
Khi cửa sổ trình duyệt nhỏ hơn chiều rộng của phần tử (500px), sẽ xảy ra sự kiện trước đó <div> vấn đề. Sau đó, trình duyệt sẽ thêm thanh cuộn ngang vào trang.
Trong trường hợp này, sử dụng max-width Có thể cải thiện cách trình duyệt xử lý cửa sổ nhỏ.
Lưu ý:Kéo cửa sổ trình duyệt đến chiều rộng nhỏ hơn 500px để xem sự khác biệt giữa hai div!
Chiều cao của phần tử này là 100 pixel, chiều rộng tối đa là 500 pixel.
Ghi chú:max-width Giá trị của thuộc tính sẽ thay thế width(Chiều rộng).
Ví dụ
Chiều cao của phần tử <div> này là 100 pixel, chiều rộng tối đa là 500 pixel:
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
Các ví dụ khác
- Thiết lập chiều cao và chiều rộng của phần tử
- Ví dụ này minh họa cách thiết lập chiều cao và chiều rộng của các phần tử khác nhau.
- Thiết lập chiều cao và chiều rộng của hình ảnh bằng phần trăm
- Ví dụ này minh họa cách sử dụng phần trăm để thiết lập chiều cao và chiều rộng của hình ảnh.
- Thiết lập chiều rộng tối thiểu và tối đa của phần tử
- Ví dụ này minh họa cách sử dụng giá trị pixel để thiết lập chiều rộng tối thiểu và tối đa của phần tử.
- Set the minimum height and maximum height of the element
- This example demonstrates how to set the minimum height and maximum height of the element using pixel values.
Set CSS Dimension Attribute
| Attribute | Description |
|---|---|
| height | Set the height of the element. |
| max-height | Set the maximum height of the element. |
| max-width | Set the maximum width of the element. |
| min-height | Set the minimum height of the element. |
| min-width | Set the minimum width of the element. |
| width | Set the width of the element. |
- Previous Page Khoảng cách nội bộ CSS
- Next Page Mô hình khung CSS
