Bài 32: CSS các thuộc tính của thẻ Div

Thiết lập chiều cao và chiều rộng

Các height và width tính chất này được sử dụng để thiết lập chiều cao và chiều rộng của một phần tử.

Các height và width có thể được thiết lập để tự động (đây là mặc định. Có nghĩa là trình duyệt tính chiều cao và chiều rộng), hoặc được quy định trong các giá trị chiều dài, như px, cm, vv, hoặc theo phần trăm (%) của khối chứa .

<Div> yếu tố này có độ cao 100 pixel, rộng 500 pixel.

Lưu ý: height và width tính không bao gồm đệm, biên giới, hoặc lợi nhuận; họ thiết lập chiều cao / chiều rộng của khu vực bên trong đệm, biên giới, và lợi nhuận của các yếu tố!

Ví dụ sau đây cho thấy một <div> phần tử với chiều cao 100 pixel, rộng 500 pixel:

Thí dụ

div {
    width: 500px;
    height: 100px;
    border: 3px solid #73AD21;
}

---

Thiết lập chiều rộng tối đa

Các max-width tài sản được sử dụng để thiết lập chiều rộng tối đa của một phần tử.

Các max-width có thể được quy định trong các giá trị chiều dài, như px, cm, vv, hoặc theo phần trăm (%) của khối chứa, hoặc thiết lập để không (đây là mặc định. Phương tiện mà không có chiều rộng tối đa).

Vấn đề với <div> ở trên xảy ra khi cửa sổ trình duyệt nhỏ hơn chiều rộng của phần tử (500px). Các trình duyệt sau đó thêm một thanh cuộn ngang để trang.

Sử dụng max-width thay vì, trong tình huống này, sẽ cải thiện xử lý của trình duyệt của cửa sổ nhỏ.

Mẹo: Kéo cửa sổ trình duyệt để rộng nhỏ hơn 500px, để thấy sự khác biệt giữa hai div!

<Div> yếu tố này có độ cao 100 pixel và chiều rộng tối đa là 500 pixel.

Lưu ý: Các giá trị của max-width ghi đè bất động sản width .

Ví dụ sau đây cho thấy một <div> phần tử với chiều cao 100 pixel và chiều rộng tối đa là 500 điểm ảnh:

Thí dụ

div {
    max-width: 500px;
    height: 100px;
    border: 3px solid #73AD21;
}

---

Các thuộc tính tạo thẻ Div

Property	Description
height	Sets the height of an element
max-height	Sets the maximum height of an element
max-width	Sets the maximum width of an element
min-height	Sets the minimum height of an element
min-width	Sets the minimum width of an element
width	Sets the width of an element