凹凸曼但没有小怪兽 CSS的世界

需求：使用一层HTML标签实现如下效果

效果图

套路图

这是从“ CSS的世界 ”中学来的（P23），大神就是大神，熟练掌握着css各种属性的特性。

以下是代码：

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

.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你";
}

原理：这是显示：内联块;的“首选最小宽度”属性，即当元素宽度：0;时，元素的宽度由文字/图片决定。

文字最小宽度原则：

1.东亚文字（如中文），最小宽度是每个汉字的宽度，如例子所示。

2.西文，由特定的连续的英文字符单元决定，一般终止于空格，短横线，问号及其他非英文字符等，可以自己修改代码感受一下（可以用字符：盈亏所有;实现每一个字符都是最小单位）。

3.图片就是图片宽啦。

此部分更深层次知识涉及宽度：汽车;及内部尺寸与流体特性（都是张老师的专业术语），感兴趣可以自行查阅。

PS（一小部分读后感）：可能你会觉得整个职业生涯中都不会有这样的需求，常用的效果我们都能实现，知道这个特性有什么用其实这只是一个小小的例子，来让读者明白他的效果，真正的意义在于你明白整个宽度的特性之后（哎），你的代码会更精炼，可读性强，可维护性强...整体来说就是代码优化，提高开发效率。

凹凸曼但没有小怪兽 CSS的世界相关推荐

java_凹凸曼打怪兽
游戏说明: 回合制游戏输出: ======== 第X回合 ======== XXX凹凸曼血量XXX 30% 60% ...
（nlogn）的时间复杂度求最近点对 hdu 1007 凹凸曼与小怪兽的故事 poj3714 Raid...
hdu 1007 Quoit Design http://acm.hdu.edu.cn/showproblem.php?pid=1007 zoj 2107 Quoit Design http://a ...
怎么制作小怪兽打凹凸曼的游戏~
我们将制作名为'小怪兽打凹凸曼'游戏首先请安装 Construct 2 附上网址:https://www.scirra.com/construct2/releases/r244 第一步,新建工程: ...
Java完成迪迦奥特曼打小怪兽
迪迦奥特曼 package cfy.奥特曼;/*** 回合制游戏输出:======== 第X回合 ========XXX凹凸曼血量XXX 30% 60% 10%使用了魔法攻击全体/普攻,XXX小怪 ...
Python——用面相对象写奥特曼大战小怪兽
一,知识点基本的面向对象知识理解继承,多态,封装,不会的小伙可以看这篇超详细教程了解基本的装饰器知识不会的小伙伴可以看这个讲解 ** 二,代码(奥特曼大战小怪兽) from abc import ...
每个成功的奥特曼背后都有一个默默挨打的小怪兽
(一) "妈妈,妈妈,"小怪兽问,"我什么时候才能长大呢?" 正做饭的怪兽妈妈和蔼地问:"干吗想长大呀,做妈妈的乖宝宝不好吗?" " ...
每个成功的奥特曼背后都有一个默默挨打的小怪兽_陕南赤子_新浪博客
(一) "妈妈,妈妈,"小怪兽问,"我什么时候才能长大呢?" 正做饭的怪兽妈妈和蔼地问:"干吗想长大呀,做妈妈的乖宝宝不好吗?" " ...
java面向对象之对象数组练习“奥特曼打小怪兽混战”
import java.util.Arrays; import day10.homework.Aliens; /** * * @Description * * 随机奥特曼打小怪兽 * ...
神经网络变成小怪兽，还能互相 battle！这款游戏用最简单的方式训练神经网络...
机器之心报道编辑:魔王在游戏里训练「神经网络小怪兽」,学习强化学习! 想了解神经网络,但不知道如何入手?教程太枯燥,论文不好懂? 别怕,这里有款多人在线战术竞技游戏(MOBA),让你在西部牛仔的世 ...

凹凸曼但没有小怪兽 CSS的世界

凹凸曼但没有小怪兽 CSS的世界相关推荐

最新文章

热门文章