<length-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 <length-percentage> trong CSS đại diện cho một giá trị có thể là <length> hoặc <percentage>.
Cú pháp
Tham khảo tài liệu cho <length> và <percentage> để biết chi tiết về các cú pháp riêng lẻ được phép trong kiểu này.
Cú pháp hình thức
<length-percentage> =
<length> |
<percentage>
Ví dụ
Ví dụ về length-percentage
Ví dụ này minh họa một số thuộc tính sử dụng giá trị <length-percentage>.
HTML
html
<p>You can use percentages and lengths in so many places.</p>
CSS
css
p {
/* length-percentage examples */
width: 75%;
height: 200px;
margin: 3rem;
padding: 1%;
border-radius: 10px 10%;
font-size: 250%;
line-height: 1.5em;
/* length examples */
text-shadow: 1px 1px 1px red;
border: 5px solid red;
letter-spacing: 3px;
/* percentage example */
text-size-adjust: 20%;
}
Kết quả
Sử dụng trong calc()
Khi <length-percentage> được chỉ định là kiểu cho phép, điều này có nghĩa là phần trăm được giải thành một độ dài và do đó có thể được dùng trong biểu thức calc(). Do đó, tất cả các giá trị sau đây đều được chấp nhận cho width:
css
width: 200px;
width: 20%;
width: calc(100% - 200px);
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| CSS Values and Units Module Level 4 # mixed-percentages |