CSS刷题【错题本】

css文件引入不会产生跨域问题，但字体的引入是可以产生跨域问题的

window.onerror 方法默认情况下无法获取跨域脚本的报错详情

canvas 中使用 drawImage 贴图会受跨域限制

a :link、a:hover、a:visited、a:active中，定义CSS时候的顺序不同，也会直接导致链接显示的效果不同。为了保证每个效果都能正确的触发，定义时的顺序应该为：link、visited、hover、active

要运用css3动画，需要运用@keyframes规则和animation属性

list-style-type 属性设置列表项标记的类型

square：标记是实心方块。

下面哪些技术可用于优化 CSS 图片加载 ?

CSS Sprite：又称为CSS精灵或者雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。能很好地减少网页的http请求，从而大大的提高页面的性能。

SVG Sprite：与CSS Sprite类似。另外一种实现思路 <symbol> + <use>。<symbol>用于定义可复用的形状，定义的现状不会展示出来，而是通过use元素引用来显示。

Icon font：图标字体，也叫字体图标，就是字体做的图标。能自由变化大小，且不会模糊。比图片小，加载快。可以任意改变颜色。

Base64：可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。图片的下载始终都要向服务器发出请求，而通过base64编码后可以随着 HTML的下载同时下载到本地，减少 http 请求。

Background-position属性

用处：配合background-image属性一起使用，用于设置背景图片在盒子中的位置

参数：xpos ypos |x% y% |x y三种,

如果只写第一个水平方向的参数，第二个垂直方向的参数会默认为：

center|50%|容器高度的一半px

Xpos：规定水平方向的对齐方式,值有left,right,center

Ypos：规定垂直方向的对齐方式,值有top,bottom,center

x%:规定图片水平方向的距离。

你会不会以为这个x%就是父级容器宽度的x%？那你就想错了哦，这里的x%指的是父级容器的宽度减去图片的宽度后的差值的x%。

举个栗子：background-position：50%，20%；

图片的宽度为 imgwidth：100px；高度为 imgheight：100px；

容器的宽度为 conwidth：200px；高度为 conheight：200px；

那么此时图片的左顶点距离容器的左顶点的水平距离就是(conwidth-imgwidth)50%=50px,而不是conwidth50%=100px；(很好理解的吧，不然盒子宽度200px，图片宽度100px，又距离左边100px，岂不是50%没实现水平居中而紧靠右了吗？)

由此也可以算出图片的左顶点距离容器的左顶点的垂直距离为20px

y%:对应x%

x:图片距离容器水平方向距离

y:图片距离容器垂直方向距离

1、颜色名 如：red，blue，green 2、十六进制(红绿蓝)

#f00、#ff0000表示红色

一般为3或者6位数字，题目4位？？？

3、rgb(r,g,b) 如：rgb(255,0,0)表示红色 4、hsl(Hue,Saturation,Lightness)/（色调、饱和度、亮度）

hsl(0,100%,100%)

0：红色

120：绿色，

240： 蓝色

border-top-width:默认值medium,定义中等的上边框。 outline-width:默认值medium,规定中等的轮廓。

行内元素与浮动元素发生重叠，边框、背景、内容都会显示在浮动元素之上 块级元素与浮动元素发生重叠，边框、背景会显示在浮动元素之下，内容会显示在浮动元素之上