1.em和px的区别和使用？

1. IE浏览器不能调整使用px为单位的字体大小;
2. 国外的大部分网站能调整字体大小是因为使用了em为字体单位;
3. Firefox能调整px和em，但是96%以上的中国网民使用IE浏览器(或内核)。
　　px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
　　em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
　　任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px，12px=0.75em,10px=0.625em。为了简化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会继承父级元素的字体大小。
　　在写CSS的时候，需要注意三点：
　　1. body选择器中声明Font-size=62.5%;
　　2. 将你的原来的px数值除以10，然后换上em作为单位;
　　3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
（也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。
　　但是12px汉字例外，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。这个问 题 Jorux已经解决，只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。不知道有没有 其他的解释。）

2.linear-gradient()函数用于创建一个线性渐变的"图像"。

为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果；还要定义终止色。

3.图标的引入

4.role属性的作用是什么？

role的发挥的作用是供有障碍的人士使用，但这并不意味着每个标签都需要增加role属性，因为对于正常的文本本来就可读。role属性的应用主要是表单，比如输入密码，对于正常人可以用placaholder提示输入密码，但是对于残障人士是无效的，这个时候就需要role了。另外，在老版本的浏览器中，由于不支持HTML5标签，所以有必要使用role属性。

5.css中direction属性的作用？rtl/ltl/inherit

例如，把文本方向设置为“从右到左”，
div {
direction:rtl;
}

6.@media的作用是响应式媒介尺寸。

媒体查询代码：@media screen and (min-width: 982px)
手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768）设置相应的min-width和max-width值
只有在屏幕尺寸小于639像素的时候才会应用下面的样式。如果想要在手机端自适应，你还需要写上下面这句话。

7.HTML中 :after和:before的作用及使用方法。

1. :before 和 :after 的主要作用是在元素内容前后加上指定内容，
2. ：after清除浮动，如
   ul:after{
   content: ‘’;
   display: block;
   width: 0;
   height: 0;
   clear: both;
   }
3. :before和:after 用来写小三角形，
   在日常的工作中会经常遇到小三角形这样的小图标，可以用添加图片的方式实现，但是更方便的是用:after :before伪类来实现。如，
   .demo:after{
   content: ‘’;
   display: inline-block;
   width: 0;
   height: 0;
   border: 8px solid transparent;
   border-left: 8px solid #AFABAB;
   position: relative;
   top: 2px;
   left: 10px;
   }
4. 用:after和:before 写一个对话框！

8.clip 属性,用于剪裁绝对定位元素。rect(top,right,bottom,left) 设置元素的形状。

如 clip=“rect(0px,50px,50px,0px)”;
当图像大于它所在的元素时被裁减，“clip” 属性允许你规定元素的可见尺寸，以及元素被裁剪和显示的形状。

9.这周内遇到和学习到的新属性

1、css中min-width
p {
min-width:100px;
}
2、white-space属性：规定文本不进行换行
3、text-indent属性:将段落的第一行缩进像素。
4、Unicode-bidi属性：设置文本的方向
（①Normal:元素不会对双向算法打开附加的一层嵌套，对于行内元素，顺序的隐式重排会夸元素边界进行。
②Embed:如果是一个行内元素，这个值对于双向算法会打开附件的一层嵌套。这个嵌套层的方向由 direction 属性指定。会在元素内部隐式地完成顺序重排。这对应于在元素开始处增加一个 LRE（对于 direction:ltr ：U+202A）或 RLE（对于 direction:rtl ：U+202B），并在元素的最后增加一个 PDF（U+202C）。
③bidi-override:这会为行内元素创建一个覆盖。对于块级元素，将为不在另一块中的行内后代创建一个覆盖。这说明，顺序重排在元素内部严格按照 direction 属性进行；忽略了双向算法的隐式部分。这对应于在元素开始处增加一个 LRO（对于 direction:ltr ：U+202D）或 RLO（对于 direction:rtl ：U+202E），并在元素最后增加一个 PDF（U+202C）。）

5、display：table-cell;
此元素会作为一个表格单元格显示（类似 和 ）

6、wrod-wrap:break-word/允许长单词换行到下一行/

7、box-sizing：content-box|border-box|inherit; border-box？
假如你需要并排放置两个带边框的框，可通过将 box-sizing 设置为 “border-box”。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

10.JS知识：封装getStyle （获取样式currentStyle getComputedStyle兼容处理）：JS使用getComputedStyle()方法获取css属性值。

1、obj.style：这个方法只能获取写在html标签中的写在style属性中的值（style=”…”）。

2、IE中使用的是obj.currentStyle方法，而FF是用的是getComputedStyle 方法。
“DOM2级样式”增强了document.defaultView，提供了 getComputedStyle() 方法。这个方法接受两个参数：要取得计算样式的元素和一个伪元素字符串（例如“:after”）。如果不需要伪元素信息，第二个参数可以是null。getComputerStyle()方法返回一个CSSStyleDeclaration对象，其中包含当前元素的所有计算的样式。