高效实用的CSS使用技巧

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.swiper-container{ 
overflow: hidden;
width:100%;
height: 0;
padding-bottom:50%
}
.swiper-img{
width:100%;
}
举个栗子:假如.swiper-container的宽高为370x300px,则.swiper-img设为padding-bottom:81.08%
.swiper-container{
height: 0;
padding-bottom: 81.08%; // 300除以370的百分比
overflow: hidden;
}
.swiper-img{
width:100%;
}

固定比例盒子

要创建具有固定比例的一个盒子,所有你需要做的就是给 div 设置一个 padding:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.container {
height: 0;
padding-bottom: 20%;
position: relative;
}

.container div {
border: 2px dashed #ddd;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

使用20%的padding-bottom使得框等于其宽度的20%的高度。与视口宽度无关,子元素的div将保持其宽高比(100%/ 20%= 5:1)。

跟上面的图片自适应如出一辙,都是创建一个固定比例,从而让浏览器自动确定元素的盒子尺寸,能够在各种设备上缩放。还有个好处就是图片先进行占位,让图片加载过程更自然,不会出那种图片加载完毕自行撑开元素的情形。
文中举了2个实现一个是 padding-bottompadding-top来撑开,不过padding-top就还需要子元素使用绝对定位

绘制箭头

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);
}