css -- 题目汇总

1.描述下浮动和它的工作原理。
模块浮动，使其脱离文档流，并且生成一个块级框。（所以父级撑不开就得到了很好的解释）

2.清除浮动的方法有那些，分别适用于什么情形。
clear  ， 
父级元素overflow hidden  这个就是传说中的BFC

3.解释css sprites,如何使用。
网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位
（对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。）这句话啥意思，高于200 可以不考虑用这种方法？

4.你最喜欢的图片替换方法是什么，你如何选择使用。
背景图 ，然后文字写入，text-indent 设置为-1000em；

5.讨论CSS hacks，条件引用或者其他。 
这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack!
（好吧，我只是不知道它这个装叉的名字罢了）
----------------------------------------------------------------------------------------------------------------------

类内部Hack：比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。等等

选择器Hack：比如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。等等

HTML 头部引用(if IE)Hack：针对所有IE：<!--[if IE]><!--您的代码--><![endif]-->，针对IE6及以下版本：<!--[if lt IE 7]><!--您的代码--><![endif]-->，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都 会生效。

----------------------------------------------------------------------------------------------------------------------

CSS内部属性级Hack

语法：selector{<hack>?property:value<hack>?;}

取值：

_： 选择IE6及以下。连接线（中划线）（-）亦可使用，为了避免与某些带中划线的属性混淆，所以使用下划线（_）更为合适。

*：选择IE7及以下。诸如：（+）与（#）之类的均可使用，不过业界对（*）的认知度更高。

9：选择IE6+。

：选择IE8+和Opera。

[;property:value;]; ：选择webkit核心浏览器（Chrome,Safari）。IE7及以下也能识别。中括号内外的3个分号必须保留，第一个分号前可以是任意规则或任意 多个规则。 [;color:#f00;]; 与 [color:#f00;color:#f00;]; 与 [margin:0;padding:0;color:#f00;]; 是等价的。生效的始终是中括号内的最后一条规则，所以通常选用第一种写法最为简洁。

6.如何视觉隐藏网页内容，只让它们在屏幕阅读器中可用。  （那就应该是最后一种比较好了，用text-indent：-1000em 我觉得也是可以的）

1.display:none;的缺陷

搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略

屏幕阅读器（是为视觉上有障碍的人设计的读取屏幕内容的程序）会忽略被隐藏的文字。

2. visibility: hidden ;的缺陷

这个大家应该比较熟悉就是隐藏的内容会占据他所应该占据物理空间

3.overflow:hidden;一个比较合理的方法

.texthidden { display:block;/*统一转化为块级元素*/ overflow: hidden; 0; height: 0; }

就像上面的一段CSS所展示的方法，将宽度和高度设定为0，然后超过部分隐藏，就会弥补上述一、二方法中的缺陷，也达到了隐藏内容的目的。

7.你使用过网格系统吗？如果使用过，你最喜欢哪种？

有好多，但是我不用，这个东西到底是个啥 我没有具体下载来看看

8.你使用过meidia queries（媒体查询）吗，或者移动网站相关的CSS布局。

可以区分不同尺寸，颜色，等等等，具体可以查一下

<link rel="stylesheet" media="screen and (color)" href="example.css" />

这个例子表明某样式表（example.css）将应用于拥有某特征（必须为彩色屏幕）的某媒体类型（“screen”）的设备。

------------------------------------------------------------------------------------------------------------------------------

媒体查询语法可以用户HTML、XHTML、XML以及CSS的@import和@media规则。

下列各句为在HTML、XHTML、XML、@import和@media中属性的相同实例：
<link rel="stylesheet" media="screen and (color), projection and (color)" rel="stylesheet" href="example.css">
<link rel="stylesheet" media="screen and (color), projection and (color)" rel="stylesheet" href="example.css" />
<?xml-stylesheet media="screen and (color), projection and (color)" rel="stylesheet" href="example.css" ?>
@import url(example.css) screen and (color), projection and (color);
@media screen and (color), projection and (color)

{ … }

---------------------------------------------------------------------------------------------------------------------------------
举例说明：下列两个媒体查询表示样式表适用于所有彩色索引设备：
 @media all and (color-index) { … }
@media all and (min-color-index: 1) { … }

该媒体查询表示样式表适用于拥有256个以上颜色的彩色索引设备：
<?xml-stylesheet media="all and (min-color-index: 256)" href="http://www.example.com/…" ?>

9.你是否接触过使用非标准字体的设计？字体服务，Google Webfonts, Typekit,等等。
有用过disney的英文字体，css + js ， 再在text-family当中设置一下。

10.你使用CSS预处理器吗？(SASS,Compass,Stylus,LESS)如果使用，描述你的喜好。

在dw中有用过less，还不错，节省很多时间(错误，用的应该是emmit（zcoding）自动补全div的)

还有一些问题没有看

• 你熟悉SVG样式的书写吗？

• 如何优化网页的打印样式。

• 在书写高效CSS文件时会有哪些问题需要考虑。

• 你使用CSS预处理器吗？(SASS,Compass,Stylus,LESS)

  • 如果使用，描述你的喜好。

• 你是否接触过使用非标准字体的设计？

  • 字体服务，Google Webfonts, Typekit,等等。

• 请解释浏览器是如何根据CSS选择器选择对应元素的。