1.让图文不可复制
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
2.让图片垂直居中
.Logo{height: 109px;line-height: 109px;}
.Logo img{vertical-align: middle;}
3.行内块级元素垂直居中,基本思想是使用display: inline-block、vertical-align: middle和一个伪元素让内容块处于容器中央。
.parent::after, .son{display:inline-block;vertical-align:middle;
}
.parent::after{content:'';height:100%;
}
4.word-break:break-all 和 word-wrap:break-word都是能使其容器如DIV的内容自动换行。
它们的区别:
1)word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。
2)word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。
5.去除苹果手机自带样式
/*强制去除表单自带的样式*/
input,button,select,textarea{outline:none;-webkit-appearance:none;}/*强制去除textarea自带的样式*/
textarea{resize:none;-webkit-appearance:none;}
6.文字从右向左
语法:
writing-mode : lr-tb | tb-rl
参数:
lr-tb : 左-右,上-下
tb-rl : 上-下,右-左
例如:
div { writing-mode: tb-rl; }
7.font-size:0清除display:inline-block元素换行符间隙,letter-spacing与font-size清除换行符间隙。