页面样式导入的方法及区别
<link rel="stylesheet" type="text/css" href="./css/index.css" />
<style type="text/css"></style>
@import
@import url("global.css");
@import url(global.css);
@import "global.css";
link
不仅可以加载css还可以定义rss等其他事物，无兼容问题
支持使用js控制改变样式
页面加载自上而下，权重大于@import
@import
只能加载css,低版本的浏览器不支持
不可以使用js控制改变样式
先加载HTML后加载CSS,会导致内容闪烁
Css选择器，优先级
id选择器 (#myid)
类选择器 (.myclassname)
标签选择器 (div, h1, p)
相邻选择器 (h1 + p)
子选择器 （ul > li）
后代选择器 （li a）
通配符选择器 *
属性选择器 （a[rel="external"]）
伪类选择器 （a:hover, li:nth-child）
优先级
!important 比内联优先级高
权重：
内联1000，
ID100，
伪类/属性选择器10，
类型选择器/伪元素选择器/标签选择器1，
通用选择器（*）/子选择器（>）/相邻同胞选择器（+）0
块级元素、内联元素、空元素
行内元素：a span img input select
块级元素：div ul ol li dl dt dd h1 p
空元素： <link> <meta> <br> <hr>
重汇回流
重汇：渲染树中的元素外观（如：颜色）发生改变，不影响布局，会产生重绘
回流：渲染树的元素布局发生改变，会产生重绘回流，回流必定产生重绘，重绘一定不会产生回流
注：js获取layout属性值（offsetLeft、scrollTop等）也会引起回流，浏览器通过回流计算最新值
伪类，伪元素
伪类：单冒号（:）
伪元素：双冒号(::)，用于向某些选择器设置特殊效果，::before,::after,::first-line,::first-letter
盒子模型box-sizing
标准盒子模型(默认：content-box)： 宽度 = 内容的宽度(content) + border + padding + margin
IE盒子模型(border-box)： 宽度 = 内容的宽度(content + border + padding) + margin
position定位
static（默认）： 按照正常文档流进行排列；
relative（相对定位）： 不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)： 脱离文档流，参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)： 所固定的参照对像是可视窗口。
浮动float
浮动元素，不在文档流中
带来的问题：
a.父元素的高度无法被撑开，影响与父元素同级的元素
b.与浮动元素同级的非浮动元素（内联元素）会跟随其后
c.若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
清除的方式：
a.父级div定义height
b.最后一个浮动元素后加空div标签 并添加样式clear:both
c.包含浮动元素的父标签添加样式overflow为hidden或auto。
d.父级div定义zoom
rgba和hsla
/* IE8之前的版本不支持这两个属性 */
.div1{
color:rgba(0,0,255,0.8) /* rgba指的是"红色、绿色、蓝色、透明度"，取值为0-255 或 0%-100% */
}
.div2{
color:hsla(182,44%,76%,0.5) /* hsla指的是"色调(0-360)、饱和度(0%-100%)、亮度(0%-100%)、透明度(0-1)" */
}
flex布局
.div{
display:flex;
flex-direction:row; /* 方向，默认row; row | row-reverse | column | column-reverse; */
flex-wrap:nowrap; /* 换行，默认nowrap; nowrap | wrap | wrap-reverse */
justify-content:flex-start; /* 对其方式，默认flex-start; flex-start | flex-end | center | space-between | space-around; */
align-items:flex-start; /* 交叉轴对齐，默认flex-start; flex-start | flex-end | center | baseline | stretch; */
align-content: flex-start; /* 多根轴对齐，默认flex-start; flex-start | flex-end | center | space-between | space-around | stretch; */
flex:0; /* 占据的空间大小，默认0; 0,按比例，auto */
}
display
inline（默认）--内联
none--隐藏
block--块显示
table--表格显示
list-item--项目列表
inline-block
display:none,在页面中不占据位置，会产生回流和重绘问题
visibility：hidden，保留原来的位置*
overflow
scroll:必会出现滚动条,
auto:子元素内容大于父元素时出现滚动条
visible:溢出的内容出现在父元素之外
hidden:溢出隐藏
png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
1.png 是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。 大多数地方都可以用。
2.jpg 是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
3.gif 是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.
4.webp 格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。
Css Sprites
雪碧图，将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。
能很好地减少网页的http请求，从而大大的提高页面的性能；
calc
/* calc，运算符前后需要保留一个空格 */
.sideBar{
width: calc(100% - 10px)
}
line-height
行高：指一行文字的高度，两行文字间基线的距离
元素竖向百分比
元素设置百分比的属性都是相对于宽度
单行文本垂直居中：height与line-height设置一样高
px,em,rem
px，相对长度，相对于显示器屏幕分辨率而言
em，相对长度，相对于父级元素的字体大小
rem，相对单位，相对于HTML根元素
为什么要初始化Css样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
Css3新的特性
浏览器字体问题
浏览器最小字号为12px;若还想在小，transform: scale(0.7)缩放功能
建议使用偶数字号；偶数字号相对更容易和web设计的其他部分构成比例关系，Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。
移动端0.5px边框
建议采用 :after 1px然后transform: scale(0.5);
如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。
