前端基础知识——css样式学习

一、文字效果

1. 文本垂直水平居中。（一行和多行）
   分两种行内元素：span是div子元素，文本位于span标签内
   (1).span{display: inline-block;vertical-align: middle;line-height: height;}
   (2).div{display: table-cell;width: 200px;border:1px solid blue;vertical-align: middle;}
   块级元素：绝对定位法
   #parent {position: relative;}
   #child {
   position: absolute;
   top: 50%;
   left: 50%;
   height: 30%;
   width: 50%;
   margin: -15% 0 0 -25%;
   }
2. 文本超出显示省略值…
   单行文本：
   overflow: hidden;
   text-overflow:ellipsis;
   white-space: nowrap;
   多行文本：（适用于WebKit浏览器及移动端）
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
   overflow: hidden;
3. 文本换行
   标签实现：<br/>,<p>
   块级元素多行自动换行，但数字和英文会溢出，解决方案：
   word-wrap:break-word ;
   word-break:break-all
4. 文本缩进
   首行缩进：text-indent:20px;或者 
5. 文本两端对齐
   css2实现方案：text-align: justify，
   但这个属性有个缺点：单行两边不对齐，多行最后一行不对齐，故通过添加伪元素加内容:after{display: inline-block;width: 100%;content: ‘’;}
   css3实现方案：justify-content: space-around|space-between
6. 字体阴影效果
   text-shadow: 5px 5px 5px #FF0000;
   后续持续更新。。。