CSS日常踩坑后的总结(猜测你也会遇到的,持续更新。。。)

简介: 1、flex布局flex布局2、box-shadow阴影 box-shadow: h-shadow(必选) v-shadow(必选) blur spread color inset;box-shadowExample...

1、flex布局

img_dd599f07a64e44d66c0f2f354294ef59.png
flex布局

2、box-shadow阴影

 box-shadow: h-shadow(必选) v-shadow(必选) blur spread color inset;
img_02d2ba91b961ac217a8785b82b61ed86.png
box-shadow

Example:

 box-shadow:0 0 20rpx #aaaaaa;

3、line-gradient渐变

 background: linear-gradient(to right, blue, white);
img_ebb19f433c6be4ac06f8cbb7a96af706.png
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、单行居中,多行居左

img_89c709d5d79623818972a3e6c50d8d9e.png
单行居中,多行居左

8、css选择器-获取最后一个元素

:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。

p:last-child {
  background: red;
}

<body>
  <h1>这是标题</h1>
    <p>第一个段落。</p>
    <p>第二个段落。</p>
    <p>第三个段落。</p>
    <p>第四个段落。</p>
    <p>第五个段落。</p>
</body>
img_a3c464b08c2c15a01b907a551218f5e2.png
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;
}
img_6df10dd0051dc2e4d99b3f3a68dacfb9.png
input

13、获取元素位置

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

目录
相关文章
|
Web App开发 编解码 移动开发
详细前端面试题CSS篇--持续更新 3
详细前端面试题CSS篇--持续更新
185 0
|
存储 移动开发 前端开发
2023年最新前端面试题汇总大全(含答案超详细,HTML,JS,CSS汇总篇)-- 持续更新6
2023年最新前端面试题汇总大全(含答案超详细,HTML,JS,CSS汇总篇)-- 持续更新
321 0
|
存储 资源调度 前端开发
2023年最新前端面试题汇总大全(含答案超详细,HTML,JS,CSS汇总篇)-- 持续更新8
2023年最新前端面试题汇总大全(含答案超详细,HTML,JS,CSS汇总篇)-- 持续更新
389 0
|
存储 Web App开发 移动开发
2023年最新前端面试题汇总大全(含答案超详细,HTML,JS,CSS汇总篇)-- 持续更新 2
2023年最新前端面试题汇总大全(含答案超详细,HTML,JS,CSS汇总篇)-- 持续更新
578 0
|
7月前
|
前端开发 JavaScript 容器
CSS保姆级别教程(持续更新)
CSS保姆级别教程(持续更新)
|
Web App开发 编解码 弹性计算
详细前端面试题CSS篇--持续更新 2
详细前端面试题CSS篇--持续更新
85 0
|
Web App开发 移动开发 前端开发
详细前端面试题CSS篇--持续更新 1
详细前端面试题CSS篇--持续更新
83 0
|
存储 JSON 缓存
2023年最新前端面试题汇总大全(含答案超详细,HTML,JS,CSS汇总篇)-- 持续更新7
2023年最新前端面试题汇总大全(含答案超详细,HTML,JS,CSS汇总篇)-- 持续更新
349 0
|
Web App开发 编解码 移动开发
2023年最新前端面试题汇总大全(含答案超详细,HTML,JS,CSS汇总篇)-- 持续更新 5
2023年最新前端面试题汇总大全(含答案超详细,HTML,JS,CSS汇总篇)-- 持续更新
360 0
|
Web App开发 编解码 弹性计算
2023年最新前端面试题汇总大全(含答案超详细,HTML,JS,CSS汇总篇)-- 持续更新 4
2023年最新前端面试题汇总大全(含答案超详细,HTML,JS,CSS汇总篇)-- 持续更新
354 0