Khóa học CSS - Bài 07 - Chiều cao và Bề rộng

Quay về MỤC LỤC TỰ HỌC CSS

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

Chiều cao và bề rộng có thể nhận được các giá trị sau:

• Auto : đây là giá trị mặc định, trình duyệt sẽ tự tính toán thông số.
• Pixel
• % của phần tử chứa nó

Ví dụ:

div {
    height: 200px;
    width: 50%;
    background-color: powderblue;
}

Ghi chú: thuộc tính width và height chưa bao gồm border,padding, margin.Nó chỉ thiết lập phần bên trong của border, padding, margin.

2. Thiết lập Max-width

Là giá trị tối đa của bề ngang phần tử HTML.

Thuộc tính max-width có thể nhận được các giá trị sau:

· none: mặc định

· pixel

· %

Nếu giá trị chỉ là width, khi ta phóng to quá cỡ màn hình, trình duyệt sẽ tự động thêm vào thanh scroll bar nằm ngang.

Khi ta đặt giá trị là max-width, bề rộng phần tử HTML sẽ tự động thay đổi theo.

Ví dụ:

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

Các bạn thử phóng to màn hình trình duyệt lên xem sao nhé.

Sau đó sửa thuộc tính max-width thành width và phóng to trình duyệt để xem sự khác biệt.

Nếu vẫn còn chưa hiểu, các bạn xem thêm video clip sau:

Quay về MỤC LỤC TỰ HỌC CSS

Tác giả: #drM

Nguồn: Sưu Tầm