Đo lường CSS em được sử dụng cho chiều cao hoặc bán kính biên giới được đo bằng cách nào?

Question

Tôi hiểu rằng phép đo "em" là đơn vị tương đối cho kích thước phông chữ, tương ứng với kích thước phông chữ của phần tử chứa nếu được chỉ định trong đơn vị tuyệt đối như px hoặc kích thước phông chữ mặc định trong trình duyệt.

Nhưng tôi đang cố gắng hiểu cách sử dụng em làm thước đo cho bán kính đường viền của phần tử hộp, như div, hoạt động. Tôi giả định nó liên quan đến cách sử dụng em như một phép đo cho chiều rộng hoặc chiều cao của một hộp hoạt động.

Nó vẫn liên quan đến kích thước phông chữ? Cụ thể, nó được đo lường như thế nào? Các giải thích về cách tính bán kính đường biên mà tôi đã có thể tìm thấy tất cả dường như dựa trên các đơn vị px.

Answer 1

Tôi có thể hiểu nhầm câu hỏi của bạn, nhưng tôi nghĩ nó hoạt động như thế này. Nếu kích thước phông chữ là 12px và bạn tạo một hộp có bán kính đường viền là 1em, thì nó sẽ có bán kính đường viền là 12px (13px nếu là 13px). Điều này rất hữu ích nếu bạn cần bán kính đường viền của ô để ở cùng tỷ lệ với văn bản bất kể kích thước của văn bản. Đối với các phiên bản, nếu bạn có một hộp có văn bản trong đó, hãy nói:

<style> 
    // lets say the browser gives the text a default size of 16px on a pc 
    .box {border-radius:5px}// lets say the box's size scales with the text 
</style> 

Nó trông giống như hộp gần như hoàn toàn tròn góc. Nhưng cho phép nói trên một chiếc iPhone, nó mang lại cho văn bản một kích thước mặc định là 80px (cường điệu) nó có vẻ như là hộp có góc hầu như phẳng. Giải pháp là để các góc của hộp có tỷ lệ với văn bản sử dụng em.

Answer 2

Có vẻ như nó liên quan đến kích thước phông chữ. Cuối cùng nó vẫn là một đơn vị đo lường, như px.

này example có thể cung cấp cho bạn một ý tưởng tốt hơn về cách thức hoạt động.

Markup:

<div id="A"></div> 
<div id="B"></div> 
<div id="text-height"></div> 
<p>Some text</p> 

<div id="C"></div> 
<div id="D"></div> 

CSS:

p { 
    line-height: 1em; 
    background: grey; 
    display: inline-block; 
    position: relative; 
    top: -4px; 
} 
#A { 
    height: 4em; 
    background: red; 
    width: 1em; 
    display: inline-block; 
} 
#B { 
    height: 2em; 
    background: blue; 
    width: 1em; 
    display: inline-block; 
} 
#text-height { 
    height: 1em; 
    background: green; 
    width: 1em; 
    display: inline-block; 
} 
#C, #D { 
    height: 4em; 
    width: 4em; 
    display: inline-block; 
} 
#C { 
    border-radius: 2em; 
    background: red; 
} 
#D { 
    border-radius: 1em; 
    background: blue; 
} 

Ảnh:

Answer 3

Tôi đã thử điều này trong trình duyệt và it is still relative to the font-size property of the element. Nếu kích thước phông chữ không được xác định, nó kế thừa từ cha mẹ kế tiếp có kích thước phông chữ hoặc trình duyệt mặc định (which is 16px usually; TIL).