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. JS调用本地应用程序

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  2. 【转载】Linux的进程间通信-信号量

    原文:Linux的进程间通信-信号量 Linux的进程间通信-信号量 版权声明: 本文章内容在非商业使用前提下可无需授权任意转载.发布. 转载.发布请务必注明作者和其微博.微信公众号地址,以便读者询问 ...

  3. CSS的单位及css3的calc()及line-height百分比

    锚点:css中百分比减去固定元素 单位介绍 说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着 ...

  4. Linux TOP命令详解

    先来看一下执行以后的结果: 各项数值的含义如下: 第一行是任务队列信息. :: 当前时间 up days,: 系统运行时间,格式为天,时:分 user 当前登录用户数 load average: 0. ...

  5. 使用entityframework操作sqlite数据库

    首先要安装好,所需要的类库,通过NuGet来处理 http://stackoverflow.com/questions/28507904/vs-2015-sqlite-data-provider 安装 ...

  6. HIP-HOP 漫画家 Skottie Young

     http://blog.sina.com.cn/s/blog_67e59b160100v9ib.html           以上是部分预览图! 下载地址: 29  MB=   127  张 yy语 ...

  7. C# 线程(六):定时器

    From : http://kb.cnblogs.com/page/42532/ Timer类:设置一个定时器,定时执行用户指定的函数. 定时器启动后,系统将自动建立一个新的线程,执行用户指定的函数. ...

  8. struts2标签之列求和

    struts2标签之列求和 <table width="100%" border="0" cellpadding="0" cellsp ...

  9. 01 Developing Successful Oracle Applications

    varchar2 类型定义时, 个人认为应该选择byte 类型, 即 varchar2(20), oracle 支持的最大的字符串是 varchar2(4000), 同时, 个人认为, 当你定义一个v ...

  10. maven入门

    1.1.项目构建 Maven(翻译为"专家","内行")是跨平台的项目管理工具.主要服务于基于Java平台的项目构建,依赖管理和项目信息管理. 项目构建过程包括 ...