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+。
\0:选择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; width: 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选择器选择对应元素的。

css -- 题目汇总的更多相关文章

  1. 谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  2. 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  3. 谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  4. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  5. 谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  6. 谈谈一些有趣的CSS题目(四)-- 从倒影说起,谈谈 CSS 继承 inherit

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  7. 谈谈一些有趣的CSS题目(五)-- 单行居中,两行居左,超过两行省略

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  8. 谈谈一些有趣的CSS题目(六)-- 全兼容的多列均匀布局问题

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  9. 谈谈一些有趣的CSS题目(七)-- 消失的边界线问题

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

随机推荐

  1. HTML基础 整理

    HTML:超文本传输协议 (Hyper Markup Language) CSS:网页美化 (Cascading Style Sheets) JS:java-scipt 脚本语言 Dreamweave ...

  2. python 列表函数

    list函数: 功能:将字符创转化为列表,例: 列表基本函数: 1.元素赋值,例: 注意:通过list[0]= 'hel',如果原来位置上有值,会覆盖掉原来的. 2.分片操作 1)显示序列,例: 注意 ...

  3. struts2--表单标签

    struts2的表单标签可分为两类:form标签本身和包装HTML表单元素的其他标签.form标签本身的行为不同于它内部的元素. struts2表单标签包括: form.textfield.passw ...

  4. CG基础教程-陈惟老师十二讲笔记

    转自 麽洋TinyOcean:http://www.douban.com/people/Tinyocean/notes?start=50&type=note 因为看了陈惟十二讲视频没有课件,边 ...

  5. Servlet异常及其生命周期

    Servlet 异常 在javax.servlet包中定义了两个异常类 ServletException类 ServletException类定义了一个通用的异常,可以被init().service( ...

  6. 04_IOC容器装配Bean(xml方式)

    IOC容器装配Bean(xml方式) 1.Spring 提供配置Bean三种实例化方式 1)使用类构造器实例化(默认无参数) <bean id="bean1" class=& ...

  7. 使用ansible批量管理远程服务器

    使用ansible批量管理远程服务器 背景 本地需要管理远程的一批服务器,主要执行以下任务: 1) 将本地的文件复制到远端所有服务器: 2) 需要在远程服务器中执行一个个命令: 远端服务器路径并非完全 ...

  8. 《Linux内核设计的艺术》学习笔记(六)执行setup.s

    参考资料 1. 8259A可编程中断控制器 jmpi , SETUPSEG // 0x90200 到这里,bootsect.s的执行就算结束了.控制权转移到了setup.s文件的手中. setup程序 ...

  9. 关于dom ready事件

    0.加载完页面,解析完所有标签(不包括执行CSS和JS),并如规范中所说的设置 interactive 和执行每个静态的script标签中的JS,然后触发. 1.没有js,有css,有img,DOMC ...

  10. POJ3009 Curling

    题目链接:http://poj.org/problem?id=3009 题意:从2出发,要到达3, 0可以通过,碰到1要停止,并且1处要变成0, 并且从起点开始沿着一个方向要一直前进,直至碰到1(或者 ...