这是我参与「第四届青训营 」笔记创作活动的的第2天
哪些属性可以继承?
不可继承的属性
不可继承：display，position;margin，padding，border;height，width，background，
可以继承：字体属性，文字展示属性，文字间距，可见性
清除浮动
浮动元素脱离文档流，没有办法撑开盒子，导致盒子后面的元素
CSS 中 link 和 @import 的区别
关于link与@import的区别:
区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。
主流浏览器内核私有属性css前缀：
mozilla内核 (firefox,flock等) -moz webkit内核(safari,chrome等) -webkit opera内核(opera浏览器) -o trident内核(ie浏览器) -ms
HTML5 规范声明：应该使用h1-h6来表示标题，使用em标签来表示强调的文本，应该使用strong标签来表示重要文本，应该使用 标签来表示标注的/突出显示的文本。
表单控件的分组和分组描述
fieldset用来分组，而legend用来分组描述
BFC (block formatting context)
display 的值为 table-cell , table-caption和 inline-block 中的其中一个时，可触发 BFC
overflow-hidden 可作为常用 BFC 布局属性使用
只要元素可以触发BFC，就无须使用 clear:both 来清除浮动的影响
BFC就是“块级格式化上下文”的意思，创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box【盒子级别的容器】可以参与创建BFC， 它规定了内部的Block-level Box【盒子级别的容器】如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。
内部的Box会在垂直方向，从顶部开始一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box叠加。
计算BFC的高度时，浮动元素也参与计算。
优化CSS图片加载
CSS Sprite：又称为CSS精灵或者雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。能很好地减少网页的http请求，从而大大的提高页面的性能。
SVG Sprite：与CSS Sprite类似。另外一种实现思路 + 。用于定义可复用的形状，定义的现状不会展示出来，而是通过use元素引用来显示。
Icon font：图标字体，也叫字体图标，就是字体做的图标。能自由变化大小，且不会模糊。比图片小，加载快。可以任意改变颜色。
Base64：可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。图片的下载始终都要向服务器发出请求，而通过base64编码后可以随着 HTML的下载同时下载到本地，减少 http 请求。
修改列表项标记为方形
list-style-type:squre;
盒子阴影
设置其他如内边距外边距时 第一个值都是上下 第二个值都是左右 设置盒子阴影和文字阴影时反过来
px、em、pt
em 是一个相对的长度单位，指相对于当前字体的倍数
pt 是一个物理的绝对长度单位，points (1pt = 1/72 of 1in)
px 也是一个物理的绝对长度单位， pixels (1px = 1/96th of 1in)
首先，优先级顺序：
！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承
使用服务端的字体@font-face规则
@font-face { font-family : name ; src : url( url ) ; sRules }
外部资源使用object标签
外部资源由 元素表示，该元素可以被视为图像、嵌套的浏览上下文或插件要处理的资源。它包括各种属性，如存档、边框、分类、代码库、代码类型等
表格宽度比自己设置的宽
currentColor关键字
在CSS3中扩展了颜色值包含 currentColor 关键字，并用于所有接受颜色的属性上。
currentColor是 color 属性的值，具体意思是指：currentColor关键字的使用值是 color 属性值的计算值。如果currentColor关键字
被应用在 color 属性自身，则相当于是 color: inherit。
SVG和Canvas区别
SVG与Canvas的区别 SVG 不依赖分辨率 支持事件绑定 大型渲染区域的程序(例如百度地图) 不能用来实现网页游戏 Canvas 依赖分辨率 不支持事件绑定 最合适网页游戏 保存为".jpg"格式的图片
CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
