css技巧总结以及容易忽略的冷门知识
css技巧总结
注意，以下所有内容都来自本人看过张鑫旭大哥的《css世界》中相关css知识。有兴趣的小伙伴可以拿来读一读~
一.其实css比大家了解的要神奇的多，可以利用css实现凹凸效果：
<html>
<span class="ao"></span>
<span class="tu"></span>
</html>
<style>
.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";
pad
}
.tu {
direction: rtl;
}
.tu:before {
content: "我love你";
}
</style>
效果如图
二. css中的direction 属性规定文本的方向 / 书写方向，因为改变的只是内联元素块的左右顺序 如img, button, input, video, object’等，或者inline-block水平的元素，才可以生效。
ltr为默认值，rtl为文本方向从右到左，这里指的文本方向并非文字方向！因此改变文字方向是不生效的，改变的只是内联元素块的左右顺序，实际开发中我觉得最方便的一个用途就是比如一个dialog弹框中的确认取消需要更换位置时就会即可用到：
<div>
<button>确认</button>
<button>取消</button>
</div>
div{
width: 500px;
height: 300px;
margin: 0 auto;
background: #ccc;
text-align: center;
/* direction: rtl; */
}
此时效果为：
此时我们把上列的css属性放开direction: rtl，按钮也改变了位置，为什么大家没在开发中见过呢，因为大家想到更方便的是直接更改dom元素位置更方便没必要增加多余代码量，此文章是为大家增加知识并非介绍实用性。
三. 超越！important
各位前端同学写过css相比也知道！important 权重是无敌的，但是我建议大家在项目中谨慎使用，有开发经验的同学应该知道其中缘由。接下来给大家介绍一个可能开发过程中不会注意到的知识点， 当给元素同时设置 max-width与width ！important 时，大家猜猜哪一个会生效呢，好，上代码：
div{
width: 1000px !important;
max-width: 500px;
height: 300px;
background: #ccc;
}
为了测试哪一个优先级更高，我们把width设置为1000px，反之最大宽度设置为500px，结果如下：
div只有500宽度！所以min-width 、max-height 、min-height同理。
四.超越最大
接下来大家可能会想到，上面介绍了权重，那max-width与min-width哪个优先级更高呢？好，我们开始测试，脑洞要打开了同学们！为了测试，我们把两个测试值取相反值如下，最小宽度居然比最大宽度设置的还大，此时，两者必定是你死我活的状态。究竟谁死呢？遵循超越最大原则（注意不是后来居上原则），min-width活下来了，max-width被忽略。
div{
min-width: 800px;
max-width: 500px;
}
最小宽度为800px，反之最大为500px，结果如下：
五.幽灵空白节点
‘幽灵空白节点’是内联盒模型中非常重要的一个概念，具体指的是：在HTML5文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”一样。这个“空白节点”永远透明，不占据任何宽度，看不见也无法通过脚本获取，就好像幽灵一样，但又确确实实地存在，表现如同文本节点一样，因此，称之为“幽灵空白节点”。
注意，这里有个前提，文档声明必须是HTML5文档声明，如果还是很多年前的老声明，则不存在“幽灵空白节点”。