Chiều cao và độ rộng trong CSS
Thiết lập chiều cao và độ rộng trong CSS
Các đặc tính height
và width
được dùng để thiết lập chiều cao và độ rộng của phần tử trong CSS. Chúng có thể nhận các giá trị sau:
- auto - là chế độ mặc định, trong đó trình duyệt tự tính toán chiều cao và độ rộng
- length - giá trị tính theo px, cm…
- percent (%) - giá trị tính theo phần trăm
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
Hình ảnh hiển thị trên trình duyệt của 2 ví dụ trên
Lưu ý: Đặc tính height
và width
không tính phần padding,
đường viền, lề. Chúng sẽ xác định chiều cao/độ rộng của khu vực bên trong phần padding,
đường viền, lề của phần tử.
Thiết lập max-width
Đặc tính max-width
dùng để chọn độ rộng tối đa cho phần tử, có thể dùng các giá trị:
- length - độ dài theo px, cm…
- percen (%) - phần trăm
- không - đây là chế độ mặc định, nghĩa là không có giới hạn tối đa
Vấn đề có thể xảy ra với thẻ <div>
bên trên là khi cửa sổ trình duyệt nhỏ hơn độ rộng phần tử (500px), trình duyệt sẽ thêm thanh cuộn dọc vào rtang. Nếu dùng max-width,
trình duyệt sẽ xử lý tốt hơn khi cửa sổ nhỏ.
Lưu ý: Giá trị của max-width
sẽ ghi đè width.
Ví dụ dưới đây cho thấy phần tử <div>
có chiều cao 100px và độ rộng tối đa là 500px.
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
Bài trước: Padding trong CSS
Bài sau: Mô hình hộp (Box Model) trong CSS
Bạn nên đọc
Cũ vẫn chất
-
eQuiz - Bài kiểm tra trắc nghiệm về lập trình C (Phần 1)
Hôm qua -
Cách đổi font chữ mặc định trong Google Docs
Hôm qua -
Cách tắt đang soạn tin nhắn Zalo
Hôm qua -
3133 là gì? 3133 là số điện thoại của tổng đài nào? Có phải lừa đảo không?
Hôm qua -
Mẹo lên level nhanh Blox Fruit, lên cấp nhanh Blox Fruit
Hôm qua -
15 phần mềm chỉnh sửa ảnh miễn phí tốt nhất trên máy tính
Hôm qua 3 -
Cách fix lỗi 0xc000007b trên Windows
Hôm qua 4 -
Cách xóa đường kẻ ngang trong Word
Hôm qua -
18 mặt đồng hồ Apple Watch thông dụng nhất
Hôm qua -
11 lựa chọn thay thế tốt nhất cho Canva
Hôm qua