<percentage>
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Kiểu dữ liệu <percentage> trong CSS là một kiểu dữ liệu đại diện cho giá trị phần trăm. Nó thường được sử dụng để định nghĩa kích thước theo tỉ lệ với phần tử cha. Nhiều thuộc tính có thể sử dụng phần trăm, chẳng hạn như width, height, margin, padding, và font-size.
Note:
Chỉ các giá trị đã tính toán mới có thể được kế thừa. Do đó, ngay cả khi giá trị phần trăm được sử dụng trên thuộc tính cha, giá trị thực (chẳng hạn như chiều rộng theo pixel đối với giá trị <length>) sẽ có thể truy cập trên thuộc tính kế thừa, không phải giá trị phần trăm.
Cú pháp
Kiểu dữ liệu <percentage> bao gồm một <number> theo sau là ký hiệu phần trăm (%). Tùy chọn, nó có thể được đặt trước bởi một dấu + hoặc -, mặc dù các giá trị âm không hợp lệ cho tất cả các thuộc tính. Như với tất cả các kích thước CSS, không có khoảng trắng giữa ký hiệu và số.
Nội suy
Khi được hoạt ảnh, các giá trị của kiểu dữ liệu <percentage> được nội suy như các số thực dấu phẩy động. Tốc độ nội suy được xác định bởi hàm easing liên kết với hoạt ảnh.
Ví dụ
Width và margin-left
<div class="container">
<div class="box1">Width: 50%, Left margin: 20%</div>
<div class="box2">Width: 30%, Left margin: 60%</div>
</div>
.container {
background-color: navy;
}
.box1 {
width: 50%;
margin-left: 20%;
background-color: chartreuse;
}
.box2 {
width: 30%;
margin-left: 60%;
background-color: pink;
}
Font-size
<div class="container">
<p>Full-size text (18px)</p>
<p><span class="half">50% (9px)</span></p>
<p><span class="double">200% (36px)</span></p>
</div>
.container {
font-size: 18px;
}
.half {
font-size: 50%;
}
.double {
font-size: 200%;
}
Thông số kỹ thuật
| Specification |
|---|
| CSS Values and Units Module Level 4 # percentages |