CSS学习笔记-常用属性

发表于 2017-09-28 更新于 2018-03-14 分类于前端阅读次数：本文字数： 2.9k 阅读时长 ≈ 3 分钟

总结一下自己学习CSS过程中掌握的知识点和代码片段
随时更新

px, em, rem区别

px像素（Pixel）。相对长度单位。px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)
em是相对长度单位。相对于父对象字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px
为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px。
这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
em特点：
1. em的值是相对于父对象文本的字体尺寸的；
2. em会继承父级元素的字体大小。
rem是CSS3新增的一个相对单位（root em，根em），相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。注意：IE8及更早版本不支持

html，body字体大小

html设置字体大小给rem使用
body设置字体大小给页面元素使用。
上面两个地方都可以给em使用

body {
    font-size: 62.5%;
}

1.0em = 10px
1.4em = 14px
1.8em = 18px
2.2em = 22px

选择器

选择器	例子	例子描述	CSS
.class	.intro	`选择 class="intro" 的所有元素`	1
#id	#firstname	`选择 id="firstname" 的所有元素`	1
*	*	`选择所有元素`	2
element	p	`选择所有<p>元素`	1
element,element	div,p	`选择所有<div>元素和所有<p>元素`	1
element element	div p	`选择<div>元素内部的所有<p>元素`	1
element>element	div>p	`选择父元素为 <div> 元素的所有 <p> 元素`	2
element+element	div+p	`选择紧接在 <div> 元素之后的所有 <p> 元素`	2

border-radius 属性 CSS3

向 div 元素添加圆角边框

分别是上左，上右，下右，下左四个值。
border-radius:8px 8px 0px 8px;
如果四个值都一样，可以只写一个
border-radius:8px;

box-shadow 属性

用于向方框添加阴影，语法如下
box-shadow: h-shadow v-shadow blur spread color inset;

定位

position 属性规定元素的定位类型。
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
图片与文字的间距设置只需要给img标记添加margin属性即可

margin

margin:10px 5px 15px 20px;
分别是上，右，下，左

padding

padding:10px 5px 15px 20px;
上内边距是 10px
右内边距是 5px
下内边距是 15px
左内边距是 20px

padding:10px 5px 15px;
上内边距是 10px
右内边距和左内边距是 5px
下内边距是 15px

padding:10px 5px;
上内边距和下内边距是 10px
右内边距和左内边距是 5px

padding:10px;
所有 4 个内边距都是 10px

CSS 变量

变量名大小写敏感

声明变量

局部变量

element {
  --main-bg-color: brown;
}

全局变量

:root {
  --global-color: #666;
  --pane-padding: 5px 42px;
}

body {
  --foo: #7F583F;
  --bar: #F7EFD2;
}

读取变量

a {
  color: var(--foo);
  text-decoration-color: var(--bar);
}

var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。  
color: var(--foo, #7F583F);

第二个参数不处理内部的逗号或空格，都视作参数的一部分。
var(--font-stack, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);

var()函数还可以用在变量的声明。
:root {
  --primary-color: red;
  --logo-text: var(--primary-color);
}

作用域

同一个 CSS 变量，可以在多个选择器内声明。读取的时候，优先级最高的声明生效。这与 CSS 的”层叠”（cascade）规则是一致的。
全局的变量通常放在根元素:root里面，确保任何选择器都可以读取它们。

:root {
  --main-color: #06c;
}

兼容性

@supports ( (--a: 0)) {
  /* supported */
}

@supports ( not (--a: 0)) {
  /* not supported */
}

JavaScript交互

JavaScript 也可以检测浏览器是否支持 CSS 变量。

const isSupported =
  window.CSS &&
  window.CSS.supports &&
  window.CSS.supports('--a', 0);

if (isSupported) {
  /* supported */
} else {
  /* not supported */
}

JavaScript 操作 CSS 变量的写法如下。

// 设置变量
document.body.style.setProperty('--primary', '#7F583F');

// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'

// 删除变量
document.body.style.removeProperty('--primary');

浏览器高度

height: 100vh = 100% of the viewport height
height: 100% = 100% of the parent’s element height

去掉点击后出现的边框

/* 去掉点击后出现的边框 */
span, a,input {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    box-shadow: none !important;
    outline: 0 !important;
}