Bài 10: Chiều Rộng Và Chiều Cao Trong CSS | Tìm ở đây

Trang chủ » Height Là Gì Html » Bài 10: Chiều Rộng Và Chiều Cao Trong CSS | Tìm ở đây

Có thể bạn quan tâm

Cài đặt height (Chiều cao) và width (Chiều rộng) trong CSS

Hai thuộc tính height và  width được sử dụng để đặt chiều cao và chiều rộng tương ứng cho một phần tử trong CSS.

Thuộc tính height và width có thể được thiết lập giá trị mặc đinh là auto. Ngoài ra giá trị của 2 thuộc tính này sử dụng các đơn vị đo có trong CSS bao gồm pixcel (px), centimet (cm), point (pt), phần trăm (%)…

Ví dụ dưới đây minh họa cho một phần tử có chiều cao 200 pixels và chiều rộng là 50%

Ví dụ 1:

div { height: 200px; width: 50%; background-color: powderblue; } Ví dụ dưới đây minh họa cho một phần tử có chiều cao 100 pixels và chiều rộng 500 pixels.

Ví dụ 2:

div { height: 100px; width: 500px; background-color: powderblue; }

Chú ý:Thuộc tính height và width không bao gồm padding, borders(đường viền), hoặc margins(lề) của một phần tử mà chính bằng phần height/width nằm phía trong padding, border, và margin.

Thiết lập max-width

Thuộc tính max-width được sử dụng để thiết lập chiều rộng tối đa cho một phần tử.

max-width có thể nhận các giá trị chiều dài bao gồm pixcel (px), centimet (cm), point (pt), phần trăm (%).. hoặc giá trị none (đây là giá trị mặc định).

Sẽ có một vấn đề đặt ra đó là khi cửa số trình duyệt của chúng ta có chiều rộng nhỏ hơn chiều rộng một phần tử (500px) thì phần tử đó hiển thị như thế nào? Đơn giản chúng ta có thể sử dụng một thẻ <Div>. Sau đó trình duyệt sẽ thêm thanh cuộn ngang vào trang.

Thay vì việc phải sử dụng chiều rộng tối đa, trong trường hợp này, sẽ xử lý được các trình duyệt khi có cửa sổ nhỏ.

Mách nhỏ: Chúng ta cho cửa sổ trình duyệt xuống nhỏ hơn 500px, để thấy sự khác biệt giữa hai thẻ <div>

Ví dụ sau minh họa một phần tử <div> với chiều cao là 100 pixel và chiều rộng tối đa 500 pixel:

Ví dụ 3:

div { max-width: 500px; height: 100px; background-color: powderblue; }

Ví dụ minh họa:

1.Thiết lập chiều cao và chiều rộng của các phần tử khác nhau.

2. Thiết lập chiều cao và chiều rộng của một hình ảnh sử dụng giá trị chiều cao và chiều rộng là phần trăm.

3. Thiết lập chiều rộng tối thiểu và chiều rộng tối đa của một phần tử sử dụng một giá trị pixel.

4. Thiết lập chiều cao tối thiểu và chiều cao tối đa của một phần tử sử dụng một giá trị pixel.

Tất cả các thuộc tính về height và width trong CSS

Thuộc tính Mô tả
height thiết lập chiều cao cho một phần tử
max-height thiết lập chiều cao tối đa cho một phần tử
max-width thiết lập chiều rộng tối đa cho một phần tử
min-height thiết lập chiều cao tối thiểu cho một phần tử
min-width thiết lập chiều rộng tối thiểu cho một phần tử
width thiết lập chiều rộng cho một phần tử

Từ khóa » Height Là Gì Html