How does CSS draw "concave" and "convex"?

1. Here we use widththe 首选最小宽度characteristics of CSS properties .

The so-called "preferred minimum width" refers to the minimum width that the element is most suitable for.

2、

在 CSS 世界中,图片和文字的权重要远大于布局,因此,CSS 的设计者显
然是不会让图文在 width:auto 时宽度变成 0 的,此时所表现的宽度就是“首选最小宽度”。
具体表现规则如下。
• 东亚文字(如中文)最小宽度为每个汉字的宽度,
如图 3-11 所示的 14。 • 西方文字最小宽度由特定的连续的英文字符单元
决定。并不是所有的英文字符都会组成连续单元,
一般会终止于空格(普通空格)、短横线、问号以
及其他非英文字符等。例如,“display:inlineblock”这几个字符以连接符“-”作为分隔符,形
成了“display:inline”和“block”两个连续
单元,由于连接符“-”分隔位置在字符后面,因此,
最后的宽度就是“display:inline-”的宽度,
.ao {
    
     
 display: inline-block; 
 width: 0; 
} 
.ao:before {
    
     
 content: "love 你 love"; 


 outline: 2px solid #cd0000; 
 color: #fff; 
}

Insert picture description here

3、摘自:《CSS世界》

Guess you like

Origin blog.csdn.net/weixin_45416217/article/details/113190866