css小技巧

小技巧

CSS中的编码为utf-8

隐藏文字，不想要看到标题又想要SEO

元素显示隐藏的9种思路

display
　　对于元素显隐来说，最常见就是display:none | display:block，但是使用这种方法有个问题，元素的display属性在隐藏前并不都是block，还有可能是inline、inline-block等。

visibility

hidden
　　HTML有个hidden全局属性，专门用于显示隐藏元素，与display:none的作用类似，元素隐藏时脱离文档流，无法接受JS事件。

opacity
　　对于元素显隐，opacity的使用频率也挺多。opacity的好处是，即使opacity为0的元素，仍然可以接受JS事件，这是display:none和visiblity:hidden所不具备的。

overflow
　　CSS中有一个属性是overflow:hidden代表着溢出隐藏。我们可以利用父级的overflow:hidden配合父级的height:0或width:0来实现元素的显隐。

clip
　　CSS裁剪clip这个属性平时用的不多，当clip:rect(top,right,bottom,left)中的top>=bottom，或者left>=right时，可实现元素的隐藏效果，效果类似于visibility:hidden。

transform
【1】scale
　　transform:scale(0)时，元素被隐藏
【2】rotate
　　transform:rotateX(90deg)时，元素被隐藏
【3】skew
　　transform:skew(90deg)时，元素被隐藏

覆盖
　　利用定位元素可以覆盖普通流元素的特性。为元素的before伪元素设置相同的尺寸，通过控制伪元素的定位属性，实现显隐效果。

偏移
　　元素显示隐藏的另一种常见思路是偏移，将元素移动到视窗范围外，也可以实现等价的显隐效果。
【1】margin-top
　　利用负margin将元素移出视窗外，要注意的是设置负margin的元素并没有脱离普通流，后续元素会跟着一起移动。
【2】left
【3】translate

垂直对齐

【定义】
　　vertical-align用来设置垂直对齐方式，所有垂直对齐的元素都会影响行高
　　值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | | | inherit
　　初始值: baseline
　　应用于: 行内元素、替换元素、表单元格
　　继承性: 无
　　百分数: 相对于元素的行高line-height

【inline-block底部空隙】
inline-block元素在块级元素中留空隙就是因为图像的默认垂直对齐方式是基线对齐(基线对齐在原理上相当于图像底边与匿名文本大写英文字母X的底边对齐)；而匿名文本是有行高的，继承父级元素设置的行高，默认为normal(即font-size的1.2倍)，所以X的底边距离行框有一段距离，这段距离就是图像留出的空隙。

解决这个问题有以下几个解决办法：
　　1、display:block
　　因为垂直对齐方式只能作用于替换元素和行内元素，更改为块级元素，会使垂直对齐方式失效
　　2、父级的line-height: 0
　　这样使匿名文本与行框的距离为0
　　3、vertical-align: top/middle/bottom

图片近似垂直居中

div{
    line-height: 200px;
    text-align: center;
}
img{
    vertical-align: middle;
}

图片完全垂直居中
　在之上方法基础上设置块级元素的font-size为0，则可以设置图片完全垂直居中

div{
    line-height: 200px;
    text-align: center;
    font-size: 0;
}
img{
    vertical-align: middle;
}

圆角

盒阴影