css爆炸级操作

已认证账号

本文介绍有关css的一些技巧以及一些比较另类的用法，有些情景完全可以避开使用Javascript，单纯的css就可以完美实现

一、基础

1. 复位
推荐大家使用reset.css

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

2. 重置表单样式
移除各个浏览器之间的差异性，然后自定义样式

input, button, select, textarea {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  border: none;
}

3. 变量

/* 将变量声明到全局 */
:root {
  --theme_color: red
}

/* 使用变量，参数2为当未找到变量--theme_color时所使用的值 */
body {
  color: var(--theme-color, '#000')
}

/* 将变量声明到局部, 只能在elem的子节点中使用*/
.selector {
  --color: black
}

.selector span {
  color: var(--color)
}

// 4. 题外话，Javascript如何操作css变量

// 操作全局变量
document.documentElement.style.setProperty('--theme_color', 'blue');

// 操作局部变量，如果有两个selector，那么现在只设置了第一个的selector，不影响第二个selector的变量
document.querySelectorAll(selector)[0].style.setProperty('--color', 'blue');

5. 边距盒子

使盒子的width，height包括内容、边框、内边距，不包括边距，经常遇到宽度100%，但是有padding的时候会溢出

.border-box {
  box-sizing: border-box
}

6. 计算函数
注意，减号、加号运算符首尾必须要有空格

.selector {
  width: calc(100% / 3 * 2 - 5px + 10px)
}

6. 为body设置行高，不必为其他元素设置，文本元素很容易继承body样式

body {
  line-height: 1.5
}

7. 使用SVG图标
SVG的好处就不多说了吧

.logo {
  background: url('logo.svg')
}

8. 字体大小根据不同视口进行调整

发布于 2018-08-10 14:39

CSS

CSS 布局

CSS3

css爆炸级操作

一、基础

文章被以下专栏收录

猿论