CSS日常踩坑后的总结（猜测你也会遇到的，持续更新。。。）
1、flex布局
flex布局
2、box-shadow阴影
box-shadow: h-shadow(必选) v-shadow(必选) blur spread color inset;
box-shadow
Example：
box-shadow:0 0 20rpx #aaaaaa;3、line-gradient渐变
background: linear-gradient(to right, blue, white);
line-gradient渐变
4、绝对定位使元素居中
可以用left:50%加上margin-left:-(宽度/2)，来实现绝对定位的水平居中，这里的宽度指的是设置为绝对定位的元素的宽度
/* 可以用left:50%加上margin-left:-(宽度/2)，来实现绝对定位的水平居中，这里的宽度指的是设置为绝对定位的元素的宽度 */
.popup {
width:100px;
height: 100px;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}5、vertical-align属性图片与文字对齐
<view class="title_right">
<text>全部订单</text>
<image src="/images/left_icon.png" style="vertical-align:middle"></image>
</view>6、关于图片、文字的居中
（1）图片居中要在图片本身上设置margin: 0 auto; （2）文字居中要在其父元素上设置text-align: center;
<!-- html -->
<view class="father">
<image src="/images/fc.png"></image>
<text>113131313</text>
</view>
// css
.father {
text-align: center;
image {
width: 90rpx;
height: 90rpx;
display: block;
margin: 0 auto;
}
text {
font-size: 20rpx;
color: #929292;
}
}7、单行居中，多行居左
单行居中，多行居左
8、css选择器-获取最后一个元素
:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。
p:last-child {
background: red;
}
<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
</body>
css选择器-获取最后一个元素
9、文字溢出并显示省略号？
white-space:nowrap;
overflow: hidden;
text-overflow: ellipsis;10、文字超过两行才溢出并显示省略号？
{
width: 561rpx;
overflow: hidden;
text-overflow: ellipsis;
text-overflow: -o-ellipsis-lastline;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}11、box-sizing
（1）问题场景
在CSS中，设置的width和height只会应用到这个元素的内容区；如果这个元素有border或padding，那么绘制到屏幕上时的盒子宽度和高度会加上设置的borde和padding。
这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距，在响应式布局时，这个特点很烦人。
（2）解决
// 默认值
box-sizing: content-box;box-sizing: border-box;border-box告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。
12、设置input中placeholder的文字样式
// .inputClassName是标签的类名，包括（input,textArea）;
.inputClassName::-webkit-input-placeholder {
color: #b6b6b6;
}
.inputClassName:-moz-placeholder {
color: #b6b6b6;
}
.inputClassName::-moz-placeholder {
color: #b6b6b6;
}
.inputClassName:-ms-input-placeholder {
color: #b6b6b6;
}
input
13、获取元素位置
11、持续更新。。（如果你遇到了坑或者有好的解决方案欢迎留言）
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.04.29 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录