一些自己遗忘的Css样式

一些遗忘的Css样式

1.首行缩进

text-indent:50px;

2.内容自动换行

word-break:break-all;---允许在单词内部进行换行
word-break:keep-all;只在空格处或连字符（-）处换行

3.词间距

word-spacing:10px;单词与单词之间的间隙为10px,只要有空格出现就认为是一个词的开始

4.字间距

letter-spacing:5px;设置字(字符)之间的间隙5px

5.大小写转换

text-transform:none/capitalize/uppercase/lowercase;
capitalize:将每个单词的第一个字母大写
uppercase：将单词所有的字母都转换成大写
lowercase：将单词所有的字母都转换成小写

6.display和visibility的区别
display:none与visibility:hidden的区别
前者的位置都没有了，后者将会保留位置

7.让一个元素始终居中

left:50%;top:50%;margin-left:-width/2;margin-top:-height/2;

8.文本溢出

text-overflow: clip | ellipsis | string;
依次为自动截断/省略号代替/特定字符串代替

white-space: nowrap;
强制在一行显示

9.伪元素

:before为在选择的元素前添加新内容
:after为在选择的元素后添加新内容
例:
<div class="div></div>
.div {
     position: relative;
 }
.div::after {
     content: ''; // 必须
     position: absolute;
     left: 30px;
     bottom: 0;
     right: 0;
     width: 720px;
     height: 1PX;
     background-color: #dcdcdc;
 }