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文档声明，如果还是很多年前的老声明，则不存在“幽灵空白节点”。
<!DOCTYPE html>
<div>
<span></span>
</div>
</html>
div{
background: #ccc;
}
span{
display: inline-block;
}
结果，div的高度并不是0，大家都知道如果没内容的前提下没定义高度是不可能有高度，所以现在就是“幽灵空白节点”在作祟！
六.替换元素
替换元素，顾名思义，内容可以被替换。比如下列的img标签：
<img src="1.jpg" alt="">
如果我们把上面的1.jpg换成2.jpg，是不是图片就会替换了。这种通过某个属性值呈现的内容就可以被替换的元素就称为“替换元素”。因此，img、object、video、iframe或者表单元素textarea和input都是典型的替换元素。替换元素的默认display值是不一样的：
| 元素 | Chrome | Firefox | IE |
|---|---|---|---|
<img> | inline | inline | inline |
<iframe> | inline | inline | inline |
<video> | inline | inline | inline |
<select> | inline-block | inline-block | inline-block |
<input> | inline-block | inline | inline-block |
<button> | inline-block | inline-block | inline-block |
<textarea> | inline-block | inline | inline-block |
通过对比发现，IE浏览器和Chrome浏览器的返回值都是一样的，但是Firefox浏览器在textarea和绝大多数类型的input元素上却是返回的inline而不是inline-block，这其实一个很奇怪也很有意思的现象
<input type="button" value="按钮">
<button type="button">按钮</button>
我们都知道这两种按钮元素的表示方法尺寸长相都是一模一样的，但是在firefox下，前者的display属性默认值是inline，后者却是inline-block，很自然会奇怪明明一个模子出来的，怎么会这样呢？实际上，是每个浏览器都有自己的一套规则。
很多替换属性都有默认值，比如input默认的长度宽度字体大小等，比video标签在所有现代浏览器下的尺寸表现都是300像素150像素。再例如img标签在Chrome浏览器下的默认尺寸是0像素0像素，IE浏览器下是28像素30像素，在firefox浏览器下显示的是0像素22像素，不过我们平时使用都会设置尺寸。
七.src缺省时img元素的alt信息展示技术
如果我们网络较慢或者因为某些原因图片加载不出来，会出现空白，没有任何信息，用户完全不知道这里的内容是什么，虽然图片的alt属性可以提供描述信息，但是视觉效果不好，可能会被隐藏掉。此时，我们要是在图片还没加载时就把alt信息呈现出来就好了：
<img alt="美女沉思图" data-src="1.jpg">
<p><button>设置src属性显示图片</button></p>
img {
display: inline-block;
width: 256px; height: 192px;
/* 隐藏Firefox alt文字 */
color: transparent;
position: relative;
overflow: hidden;
}
img:not([src]) {
/* 隐藏Chrome alt文字以及银色边框 */
visibility: hidden;
}
img::before {
/* 淡蓝色占位背景 */
content: "";
position: absolute; left: 0;
width: 100%; height: 100%;
background-color: #f0f3f9;
visibility: visible;
}
img::after {
/* 黑色alt信息条 */
content: attr(alt);
position: absolute;
left: 0; bottom: 0;
width: 100%;
line-height: 30px;
background-color: rgba(0,0,0,.5);
color: white;
font-size: 14px;
transform: translateY(100%);
/* 来点过渡动画效果 */
transition: transform .2s;
visibility: visible;
}
img:hover::after {
transform: translateY(0);
}
var eleButton = document.querySelector('button'),
eleImg = document.querySelector('img');
if (eleButton && eleImg) {
var initValueButton = eleButton.innerHTML;
// 图片地址
var srcImage = eleImg.getAttribute('data-src');
// 移除该属性
eleImg.removeAttribute('data-src');
// 按钮点击事件
eleButton.addEventListener('click', function() {
if (this.innerHTML == initValueButton) {
this.innerHTML = '移除src属性';
// 图片显示
eleImg.setAttribute('src', srcImage);
} else {
this.innerHTML = initValueButton;
// src属性移除
eleImg.removeAttribute('src');
}
});
}
当没有src时，滑过效果如下：
当有src时，也就是有图片时：
相关alt显示也不会出现，增加了用户体验。
八.css计数器counter
counter成员
counter的成员主要有三个：
counter-reset（计数器声明及初始值设置）
counter-increment（递增规则）
counter()/counters(计算结果生成)
counter-reset
counter-reset主要有三个属性。
none：默认。不能对选择器的计数器进行重置。
name num：name即标记计数器名称，num即记录计数器初始值。num非必写，默认为0。
inherit：规定应该从父元素继承 counter-reset 属性的值。
counter-increment
counter-increment主要有三个属性。
none：没有计数器将递增。
name num：name即选择递增的计数器，num即增量。num非必写，默认为1，可以是正数、零或者负数。
inherit：指定counter-increment属性的值，应该从父元素继承。
counter()/counters()
这是个方法，不是属性。类似CSS3中才calc()计算。
body {
counter-reset: icecream;
}
input:checked {
counter-increment: icecream;
}
.total::after {
content: counter(icecream);
}
<strong>下面中国十大冰淇淋你吃过几个？</strong>
<ol>
<li><input type="checkbox" id="icecream1"><label for="icecream1">哈根达斯</label></li>
<li><input type="checkbox" id="icecream2"><label for="icecream2">和路雪wall's</label></li>
<li><input type="checkbox" id="icecream3"><label for="icecream3">八喜冰淇淋</label></li>
<li><input type="checkbox" id="icecream4"><label for="icecream4">DQ冰淇淋</label></li>
<li><input type="checkbox" id="icecream5"><label for="icecream5">蒙牛冰淇淋</label></li>
<li><input type="checkbox" id="icecream6"><label for="icecream6">雀巢冰淇淋</label></li>
<li><input type="checkbox" id="icecream7"><label for="icecream7">伊利冰淇淋</label></li>
<li><input type="checkbox" id="icecream8"><label for="icecream8">乐可可冰淇淋</label></li>
<li><input type="checkbox" id="icecream9"><label for="icecream9">新城市冰淇淋</label></li>
<li><input type="checkbox" id="icecream10"><label for="icecream10">明治MEIJI</label></li>
</ol>
你总共选择了 <strong class="total"></strong> 款冰淇淋！
九.margin的妙用
其实大家都知道padding能改变元素尺寸，但是大家可能不知道的是margin也可以改变元素尺寸：
<div class="father">
大家好
<div class="son"></div>
</div>
.father{
width: 300px;
}
.son{
margin: 0 -20px;
}
大家可以看到father盒子300px，然后son盒子设置margin为0 -20px，此时son盒子为340px，这个就是margin的特性，‘充分利用可用空间’。
再给大家介绍一个右对齐的方法，也是比浮动定位之类都特别实用的方法：
<div>
<li></li>
</div>
div{
width: 300px;
height: 300px;
background: red;
}
li{
list-style: none;
width: 100px;
height: 300px;
background: #ccc;
}
此时我想把li移动到最右侧，大家一般的方法就是 float: right;，或者再麻烦点儿就是定位之类的，但是利用margin：auto就可以实现，可别小瞧了auto这个属性值，也就是自动计算剩余空间！
div{
width: 300px;
height: 300px;
background: red;
}
li{
list-style: none;
width: 100px;
height: 300px;
background: #ccc;
margin-left: auto;
}
由此得知居中效果就可以这么玩~：
div{
width: 300px;
height: 300px;
background: red;
}
li{
list-style: none;
width: 100px;
height: 300px;
background: #ccc;
margin-left: auto;
margin-right: auto;
}
设置左右边距为auto，刚好计算为左右各100px
十.你未听闻的border
大家要知道border-width是不支持百分之宽度的，其次有些值大家可能也没见到过：
border-width:thin //薄薄的，等同于1px
border-width:medium //（默认值）薄厚均匀，等同于3px
border-width:thin //厚厚的，等同于4px
大家此时就有疑问了，为什么默认值不是thin呢，应该是这个1px最常用啊，为什么呢？因为 border-style：double至少3px才有效果！
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
