Kích Thước Rộng Cao Phần Tử HTML Trong CSS
Có thể bạn quan tâm
Chiều rộng và chiều cao box với thuộc tính width và height
Tùy thuộc vào thuộc tính box-resize của phần tử, mà thuộc tính with và height tương ứng với chiều rộng cao của phần tử hay chiều rộng cao của phần content của phần tử.
- Nếu box-resize có giá trị content-box: Thì thuộc tính width và height là chiều rộng và cao của riêng phần content (không gồm padding, border, margin).
- Nếu box-resize có giá trị border-box: Thì thuộc tính width và height là tổng chiều rộng và tổng cao của phần tử (gồm content, padding, border, margin).
Cú pháp:
width: <length> | <percentage> | auto; height: <length> | <percentage> | auto;Chiều rộng width và cao height có thể nhận giá trị là chiều dài (tham khảo đơn vị chiều dài CSS ), phần trăm (chiếm bao nhiêu phần trăm không gian của phần tử chứa) hoặc auto do browser tính toán trên cơ sở dàn phần tử theo quy tắc mặc định.
Ví dụ 1) Thiết lập chiều rộng 190px và cao là 90px, khi box-sizing là border-box và content-box (mặc định)
<style> .exam1 { box-sizing: border-box; border: 5px solid green; width: 190px; height: 120px; } .exam2 { box-sizing: content-box; border: 5px solid red; width: 190px; height: 120px; } </style> <div class="exam1">Phần tử này có tổng chiều cao là 120px và tổng chiều rộng là 190px.</div> <div class="exam2">Phần tử này có tổng chiều cao là 130px và tổng chiều rộng là 200px.</div> Phần tử này có tổng chiều cao là 120px và tổng chiều rộng là 190px. Phần tử này có tổng chiều cao là 130px và tổng chiều rộng là 200px.Xem lại phần về BOX CSS để biết xác định chiều cao, chiều rộng thực tế của box khi vẽ trong HTML
width và height với giá trị phần trăm
Thuộc tính width và height có thể được thiết lập bằng đơn vị phần trăm %, cho biết kích thước chiếm bao nhiều % phần content của phần tử cha. Ví dụ sau chiều rộng theo phần trăm, chiều cao lại theo px
<style> .contain-element { box-sizing: border-box; height: 220px; width: 420px; border: 10px solid green; } .test-element { box-sizing: border-box; border: 1px solid red; width: 50%; height: 100px; } </style> <div class="contain-element"> <div class="test-element"> Tổng chiều rộng là <strong>50%</strong> của phần content phần tử cha = 200px; và chiều cao là <strong>100px</strong> . </div> </div> Tổng chiều rộng là 50% của phần content phần tử cha = 200px; và chiều cao là 100px .Chiều rộng, chiều cao lớn nhất nhỏ nhất
Thiết lập chiều rộng và cao lớn nhất và nhỏ nhất của phần tử (tức là phần tử tự co gian theo nội dung trong kích thước lớn nhất và nhỏ nhât).
- min-width - độ rộng nhỏ nhất
- min-height - chiều cao nhỏ
- max-width - độ rộng lớn nhất
- max-height - chiều cao lớn nhất
The minimum height of this paragraph is set to 100px.
The maximum width of this paragraph is set to 100px.
ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB Đăng ký nhận bài viết mớiTừ khóa » Trong Css
-
30 Bộ Chọn CSS Bạn Phải Thuộc Lòng - Code Tutsplus
-
Hiểu Và Sử Dụng Các Kí Tự '+', '>' Và '~' Trong CSS Selector
-
CSS Selector Là Gì? 8 Loại CSS Selector CẦN BIẾT
-
Tổng Hợp Các Bộ Chọn Trong CSS | Tìm ở đây
-
Căn Lề Text-align Và Vertical-align Trong CSS
-
Bộ Chọn Trong CSS3
-
Cú Pháp Và Selector Trong CSS
-
Xử Lý Text Trong CSS Như Thế Nào? - Viblo
-
30 CSS Selectors Cần Nhớ (P1) - Viblo
-
Sử Dụng Biến Trong CSS Toàn Tập | TopDev
-
Các Kỹ Thuật Xử Lý Vấn đề Về Nội Dung Trong CSS Mà Bạn Nên Biết
-
Làm Chủ Thuộc Tính Width Trong CSS - Kiến Càng
-
Important CSS Là Gì? Cách Thay đổi Thứ Tự ưu Tiên Trong CSS?
-
Các Cách Sử Dụng Color Trong CSS