CSS小记录

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清除换行符间隙。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有