前端基础知识——css样式学习
其他
2019-04-03 16:27:05
阅读次数: 0
一、文字效果
- 文本垂直水平居中。(一行和多行)
分两种行内元素: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%;
}
- 文本超出显示省略值…
单行文本:
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
多行文本:(适用于WebKit浏览器及移动端)
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
- 文本换行
标签实现:<br/>,<p>
块级元素多行自动换行,但数字和英文会溢出,解决方案:
word-wrap:break-word ;
word-break:break-all
- 文本缩进
首行缩进:text-indent:20px;或者
- 文本两端对齐
css2实现方案:text-align: justify,
但这个属性有个缺点:单行两边不对齐,多行最后一行不对齐,故通过添加伪元素加内容:after{display: inline-block;width: 100%;content: ‘’;}
css3实现方案:justify-content: space-around|space-between
- 字体阴影效果
text-shadow: 5px 5px 5px #FF0000;
后续持续更新。。。
转载自blog.csdn.net/qq_29510269/article/details/88854152