目录导航
- 文本换行
- 阴影设置
- 垂直居中
- css三角
一、常用样式方法
1、文本换行
- 普通换行隐藏省略三个小点
width: 480px;/* 限制宽度*/
overflow: hidden;/* 超出省略*/
white-space: nowrap;/* 强制不换行 */
text-overflow: ellipsis;/* 用三个省略号代替 */
效果图如下
- 文本多行隐藏
/* 不建议设置高度*/
width: 480px;/* 限制宽度*/
display: -webkit-box !important;/* 设置专属的盒子类型*/
overflow: hidden;/* 超出省略*/
-webkit-line-clamp: 2;/* 行数设定*/
-webkit-box-orient: vertical;/* 设置行的方向*/
效果图如下
- 若是设置英文失效的话建议加一个属性
word-break: break-all; /* 可以强行截断英文单词，达到词内换行效果。*/
2、阴影设置
外部阴影第一个值左右的长度（负值->左边）
第二个值上下（负值->上边）
第三个值模糊值（越大越模糊）不能为负默认0就很锐利、像边框
第四个值阴影长度值，默认为0，正数阴影扩大、负数阴影内缩（不常用）
第五个值表示颜色，默认则和浏览器相关
内部阴影左右上下取值相反
.r_down {
box-shadow: 10px 10px 5px blue;/* 右下 */
}
.r_up {
box-shadow: 10px -10px 10px blue;/* 右上 */
}
.l_down {
box-shadow: -10px 10px 15px;/* 浏览器默认颜色 */
}
.l_up {
box-shadow: -10px -10px blue;/* 左上 */
}
.in_r_down {
box-shadow: 10px 10px 10px inset blue;/* 左上 */
}
效果图
3、垂直居中
1、定位方式
/*1）如果父级不设置定高top失效*/
width:500px;
height: 500px;
background-color: #123456;
position:absolute;
/*第1种方式*/
left:50%;
top:50%;
transform:translate(-50%,-50%);/*transform有时候会失效，可能是兼容问题使用margin方式也可以*/
/*margin:-250px 0 0 -250px;x、y方向上都减去一半*/
/*第2种方式*/
top:0;
left:0;
right: 0;
bottom: 0;
margin:auto;
2、flex布局设置
/*父级设置、高度必须*/
height:689px;
display:flex;
justify-content: center;
align-items: center;
3、计算方式
/*上下居中用定值，左右居中用计算*/
margin:95px calc((100% - 500px)/2);
4、css三角
通过border的属性去设置三角
两种方式（设置透明, 隐藏其中三个三角形）
.sanjiao{
width:0px;
height:0px;
border: 20px solid;
border-color:transparent transparent transparent #ef4848;
}
或者直接设置透明边框再单独设置某个方向的三角
.snajiao{
width:0px;
height:0px;
border: 20px solid transparent;
border-left:50px solid #ef4848;
}
效果图：
二、经常遇到的问题
1、相邻元素之间有缝隙
- margin值和padding值度为0，但是两个相连个元素之间就是有缝隙。
原因：display:inline-block之后，元素间有换行导致的问题
解决：设置margin的负值或者是将换行去掉即可。
三、总结
不断更新补充，有更好的解决方式欢迎补充评论！！
