CSS进阶

来自于袁老师的笔记。

@规则

at-rule: @规则、@语句、CSS语句、CSS指令

1. import

@import “路径”; 导入另外一个css文件

2. charset

@charset “utf-8”;

告诉浏览器该CSS文件，使用的字符编码集是utf-8，必须写到第一行。

行高的取值问题

行高的取值

line-height

1. px, 像素值

2. 无单位的数字

3. em单位

4. 百分比

body背景

画布 canvas

一块区域

特点：

1. 最小宽度为视口宽度
2. 最小高度为视口高度

HTML元素的背景

覆盖画布

BODY元素的背景

如果HTML元素有背景，BODY元素正常（背景覆盖边框盒）

如果HTML元素没有背景，BODY元素的背景覆盖画布

关于画布背景图

1. 背景图的宽度百分比，相对于视口
2. 背景图的高度百分比，相对于网页高度
3. 背景图的横向位置百分比、预设值，相对于视口
4. 背景图的纵向位置百分比、预设值，相对于网页高度# 浏览器兼容性

问题产生原因

• 市场竞争
• 标准版本的变化

厂商前缀

比如：box-sizing， 谷歌旧版本浏览器中使用-webkit-box-sizing:border-box

• 市场竞争，标准没有发布
• 标准仍在讨论中（草案），浏览器厂商希望先支持

IE： -ms-
Chrome，safari: -webkit-
opera： -o-
firefox: -moz-

浏览器在处理样式或元素时，使用如下的方式：
当遇到无法识别的代码时，直接略过。

1. 谷歌浏览器的滚动条样式

实际上，在开发中使用自定义的滚动条，往往是使用div+css+JS实现的

2. 多个背景图中选一个作为背景

css hack

根据不同的浏览器（主要针对IE），设置不同的样式和元素

1. 样式

IE中，CSS的特殊符号

• *属性，兼容IE5、IE6、IE7
• _属性，兼容IE5~IE6
• 属性值\9，兼容IE5~IE11
• 属性值\0，兼容IE8~IE11
• 属性值\9\0，兼容IE9~IE10

IE5、6、7的外边距bug，浮动元素的左外边距翻倍

2. 条件判断

渐近增强 和 优雅降级

两种解决兼容性问题的思路，会影响代码的书写风格

• 渐近增强：先适应大部分浏览器，然后针对新版本浏览器加入新的样式

书写代码时，先尽量避免书写有兼容性问题的代码，完成之后，再逐步加入新标准中的代码。

• 优雅降级：先制作完整的功能，然后针对低版本浏览器进行特殊处理

书写代码时，先不用特别在意兼容性，完成整个功能之后，再针对低版本浏览器处理样式。

caniuse

查找css兼容性

caniuse.com

居中总结

居中：盒子在其包含块中居中

行盒（行块盒）水平居中

直接设置行盒（行块盒）父元素text-align:center

常规流块盒水平居中

定宽，设置左右margin为auto

绝对定位元素的水平居中

定宽，设置左右的坐标为0（left:0, right:0），将左右margin设置为auto

实际上，固定定位（fixed）是绝对定位（absolute）的特殊情况

单行文本的垂直居中

设置文本所在元素的行高，为整个区域的高度

行块盒或块盒内多行文本的垂直居中

没有完美方案

设置盒子上下内边距相同，达到类似的效果。

绝对定位的垂直居中

定高，设置上下的坐标为0（top:0, bottom:0），将上下margin设置为auto