“首选最小宽度”与凹凸效果实例

首先看效果：
在这里插入图片描述
“首选最小宽度”，指的是元素最适合的最小宽度。在CSS 世界中，图片和文字的权重要远大于布局.
具体表现规则如下：

东亚文字（如中文）最小宽度为每个汉字的宽度
西方文字最小宽度由特定的连续的英文字符单元决定。并不是所有的英文字符都会组成连续单元，一般会终止于空格（普通空格）、短横线、问号以及其他非英文字符等。
例如，“display:inlineblock”这几个字符以连接符“-”作为分隔符，形成了“display:inline”和“block”两个连续单元，由于连接符“-”分隔位置在字符后面，因此，最后的宽度就是“display:inline-”的宽度

类似图片这样的替换元素的最小宽度就是该元素内容本身的宽度。
“首选最小宽度”对我们实际开发有什么作用呢？
可以让我们遇到类似现象的时候知道原因是什么，方便迅速对症下药，其他就没什么用了。

如何使用一层HTML 标签分别实现的“凹”和“凸”效果（注意要兼容IE8）？
由于要兼容IE8，CSS 新世界中图形构建利器的盒阴影和背景渐变全都没有用武之地，怎
么办呢？我们可以利用“首选最小宽度”的行为特点把需要的图形勾勒出来。
代码如下：

.ao,
.tu {
    display: inline-block;
    width: 0;
    font-size: 14px;
    line-height: 18px;
    margin: 35px;
    color: #fff;
}

.ao:before,
.tu:before {
    outline: 2px solid #cd0000;
    font-family: Consolas, Monaco, monospace;
}

.ao:before {
    content: "love你love";
}

.tu {
    direction: rtl;
}

.tu:before {
    content: "我love你";
}

<span class="ao"></span>
<span class="tu"></span>

效果如开头图片所示

参考：《CSS世界》

“首选最小宽度”与凹凸效果实例

猜你喜欢