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、文字超过两行才溢出并显示省略号?

扩展:http://www.css88.com/archives/5206

{
    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中,设置的widthheight只会应用到这个元素的内容区;如果这个元素有borderpadding,那么绘制到屏幕上时的盒子宽度和高度会加上设置的bordepadding
这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距,在响应式布局时,这个特点很烦人。

(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

持续更新。。(如果你遇到了坑或者有好的解决方案欢迎留言)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,839评论 1 92
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 1,513评论 0 5
  • 1. 前言 前端圈有个“梗”:在面试时,问个css的position属性能刷掉一半人,其中不乏工作四五年的同学。在...
    YjWorld阅读 4,584评论 5 15
  • 学文科的意义在哪里? ——陕西师范大学 刘堃 孔子说:“古之学者为己,今之学者为人”。这句话的意思是说以前人们读书...
    被灌醉的小丑阅读 2,059评论 0 0
  • 意外 今天要出发去成都啦! 万万没想到,我,竟然,被拦截了!!! 世界上最远的距离 莫过于说好的一起坐37个小时的...
    非也_阅读 216评论 0 0