高效实用的CSS使用技巧

发表于 | 分类于

CSS百分比padding实现比例固定图片自适应布局

给 div 的顶部或者底部设置一个 padding：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// html
<div class="swiper-container">
  <img class="swiper-img" src="https://iph.href.lu/750x300?text=750x300&bg=d8d8d8" />
</div>
// css
.swiper-container {
  position: relative;
  width:100%;
  height: 0;
  padding-bottom: 40%;
}

.swiper-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;	
}

padding-bottom的百分比值大小就是图片元素的高宽比(300/750)

使用40％的padding-bottom使得框等于其宽度的40％的高度。与视口宽度无关，子元素的div将保持其高宽比（300/750）。

创建一个固定比例，从而让浏览器自动确定元素的盒子尺寸，能够在各种设备上缩放。还有个好处就是图片先进行占位，让图片加载过程更自然，不会出那种图片加载完毕自行撑开元素的情形。

绘制箭头

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.arrow {
  display: inline-block;
  height: 6px;
  width: 6px;
}
.arrow::before{
  position: absolute;
  top: 0;
  left: 0;
  content:"";
  height: 6px;
  width: 6px;
  border-width: 2px 2px 0 0;
  border-color: #c8c8c8;
  border-style: solid;
  transform: rotate(45deg);
}

使用 nth-child 来选择元素

使用负的 nth-child 可以选择 1 至 n 个元素

1
2
3
4
5
6
7
8
li {
  display: none;
}

/* 选择第 1 至第 3 个元素并显示出来 */
li:nth-child(-n+3) {
  display: block;
}

或许你已经掌握了如何使用 :not()这个技巧，试下这个：

1
2
3
4
/* 选择除前3个之外的所有项目，并显示它们 */
li:not(:nth-child(-n+3)) {
  display: none;
}

使用 :not() 选择器来决定表单是否显示边框

1
2
3
4
5
6
7
8
9
10
/* 先为元素添加边框 */

.nav li {
  border-right: 1px solid #666;
} 

/* 为最后一个元素去除边框 */
.nav li:last-child {
  border-right: none;
}

不过不要这么做，使用 :not() 伪类来达到同样的效果：

1
2
3
.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

css选择器匹配属于其父元素的第1~4的元素

1
2
3
ul li:nth-child(n+1):nth-child(-n+4) {
    background-color: red;
}

移动端ios滚动回弹效果

1
2
-webkit-overflow-scrolling: touch; //有回弹效果 
-webkit-overflow-scrolling: auto; //滑到哪停到哪

名称为纯英文数字等不换行问题

1
2
3
4
span {
    word-wrap: break-word;
    word-break: break-all;
}

合理使用变量

一般设计稿中的某一类的文字（元素）都是用相同的字体大小、颜色、行高等样式属性，所以这些值我们不必每次都重复写，因为当 UI 更新设计方案，你需要改的地方就很多了。这些重复使用的值我们完全可以存放在变量里面。

Sass 和 Less 稍微有点区别：

1
2
3
4
// sass
$direction: left;
// less
@direction: left;

CSS 的原生变量，使用规则如下：

变量定义的语法是： –*； // 为变量名称。
变量使用的语法是：var()；

  1. 无论是变量的定义和使用只能在声明块 {} 里面
  2. CSS 变量字符限制为： [0-9]、[a-zA-Z]、_、-、中文和韩文等。
1
2
3
4
5
6
7
8
9
10
11
:root {
    --blue_color: #3388ff;
    --main_bgcolor: #fafafa;
    --font_size_12: 12px;
    --font_size_14: 14px;
    --color: 20px;
}
.div1{
    background-color: var(--main_bgcolor);
    font-size: var(--font_size_12);
}