Bài giảng CSS - Bài 10: CSS Height/ Width

Chia sẻ: Phuc Nguyen | Ngày: | Loại File: PPTX | Số trang:33

Thêm vào BST

Báo xấu

71
lượt xem 10
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Bài giảng cung cấp cho người học các kiến thức: CSS Height/ Width, cài đặt height, thuộc tính height và width, thiết lập chiều cao chiều rộng,... Hi vọng đây sẽ là một tài liệu hữu ích dành cho các bạn sinh viên đang theo học môn dùng làm tài liệu học tập và nghiên cứu. Mời các bạn cùng tham khảo chi tiết nội dung tài liệu.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Bài giảng CSS - Bài 10: CSS Height/ Width

Bài 10: CSS Height/ Width BỞI TRỊNH HỒNG
• 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
CSS: div { height: 200px; width: 50%; 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ố
Thay đổi kích thước cửa sổ trình duyệt để xem kết quả.
• 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.
HTML: Set the height and width of elements Original image: Sized image (200x200 pixels):
CSS: img.one { height: auto; } img.two { height: 200px; width: 200px; } div.three { height: 300px; width: 300px; background-color: powderblue; }