标签：
在样式表定义一个样式的时候，可以定义id也可以定义class。
在CSS文件里书写时，ID加前缀“#”；CLASS用“.”
id一个页面只可以使用一次；class可以多次引用。
ID是一个标签，用于区分不同的结构和内容，就象名字，如果一个屋子有2个人同名，就会出现混淆；class是一个样式，可以套在任何结构和内容上，就象一件衣服；
目前的浏览器还都允许用多个相同ID，一般情况下也能正常显示，不过当你需要用JavaScript通过id来控制div时就会出现错误。
reset.css能够重置浏览器的默认属性。不同的浏览器具有不同的样式，重置能够使其统一。
比如说ie浏览器和FF浏览器下button显示不同，通过reset能够统一样式，显示相同的想过。
但是很多reset是没必要的，多写了会增加浏览器在渲染页面的负担。 比如说，
期待能够指出它的负面影响，或者提到它的一个更好的替换者“normalize”
问题成因：在一个容器中，有两个浮动的子元素，会造成显示结果意想不到的问题。在CSS规范中，浮动定位不属于正常的页面流，而是独立定位的。 关于css的定位机制：普通流，浮动，绝对定位（position：fixed是position：absolute的一个子类）。
浮动的框可以左右移动，直到它的外边缘遇到包含框(可以设置负数，让它走出包含框)或者另一个浮动框的边缘，所以才说浮动定位不属于正常的页面流。
文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，就会出现包含框不会自动伸缩高度类笔盒浮动元素。所以，只含有浮动元素的父容器在显示时不需要考虑子元素的位置，就造成显示父容器像空容器一样。
解决浮动：
添加额外标签
在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>。
优点：通俗易懂，容易掌握
缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦。
使用 br标签和其自身的 html属性 <br clear="all" />
优点：比空标签方式语义稍强，代码量较少
缺点：同样有违结构与表现的分离，不推荐使用
父元素设置 overflow：hidden
通过设置父元素overflow值设置为hidden；在IE6中还需要触发 hasLayout ，例如 zoom：1。<div class="warp" id="float3" style="overflow:hidden; *zoom:1;">
优点：不存在结构和语义化问题，代码量极少
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；overflow:hidden会导致中键失效。
父元素设置 overflow：auto 属性。同样IE6需要触发hasLayout，演示和3差不多
优点：不存在结构和语义化问题，代码量极少
缺点：多个嵌套后，firefox某些情况会造成内容全选；IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等，firefox早期版本会无故产生focus等。
使用:after 伪元素
需要注意的是 :after是伪元素（Pseudo-Element），不是伪类（某些CSS手册里面称之为“伪对象”），很多清除浮动大全之类的文章都称之为伪类，不过csser要严谨一点，这是一种态度。由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
.clearfix:after {content:“.”; display:block; height:0; visibility:hidden; clear:both; }vccdh
.clearfix { *zoom:1; }
优点：结构和语义化完全正确,代码量居中
缺点：复用方式不当会造成代码量增加
z-index就是控制元素在页面的中的叠加顺序，z-index值高的元素显示在z-index值低的前面。z-index的使用条件：只对有 position 属性的且值不为static的元素才有效。叠加上下文和“堆栈上下文”有关，一组具有共同双亲的元素，按照堆栈顺序一起向前或向后移动构成了所谓的堆栈上下文。 一个元素的堆叠顺序，不仅仅取决于它自身的z-index，更要看它所处在的堆栈上下文，如果所处的上下文的层级很低，即使他本身的z-index设置的很高，也无法实现你的要求。 z-index解析规则都是基于标准的符合w3c规范的浏览器，但IE系列的浏览器总是让你要多费一番功夫。 IE中z-index跟标准浏览器中的解析有一个小小的区别，那就是上面说的产生堆栈上下文中的三个条件中，对第二个条件的支持的区别，在标准浏览器中元素必须是有z-index值的同时要有position属性，且值不为static，满足这两个条件，才会产生一个新的堆栈上下文，但低版本的IE中就不管这么多了，只要你设置了position值不为static，他就会生成一个新的堆栈上下文。
http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/
答案为可参考上题“解释浮动和它的工作原理”
CSS sprites其实就通过将多个图片融合到一副图里面，然后通过CSS的技术布局到页面上。这样做的好处是，减少图片数量，将会减少http的请求，提升网站性能。
不论是对浏览者还是对搜索引擎，文字都是最佳的页面内容展示方式，但是，由于字体等原因的限制，纯文字的展示渐渐无法满足爱美的设计师的要求。 于是，出现了通过CSS来实现用图片替换文字的方法，这种方式既能实现页面上各种丰富的效果，又能满足搜索引擎优化的需要。 ? Fahrner Image Replacement (FIR) ? Phark 的方法 ? Gilder/Levin 的方法 (推荐) Fahrner Image Replacement (FIR) 这是最早出现的图文替换技术，是由 Todd Fahrner 提出的，非常容易理解：
<h2><span>Hello World</span></h2>
h2 {
background:url(hello_world.gif) no-repeat;
width: 150px;
height: 35px;
}
span {
display: none;
}代码非常明白：先将图片应用在 H2 的背景中，然后将 SPAN 的标签隐藏。但是这种方式有个问题，就是当图片无法显示时，将导致这个区域没有任何内容。同时，使用 display:none 的方式隐藏的内容，将被许多主流屏幕阅读器忽略，从而造成可用性问题，因此，应该尽量避免使用。 Phark 的方法
<h2> Hello World </h2>
h2 {
text-indent: -5000px;
background:url(hello_world.gif) no-repeat;
width: 150px;height:35px;
} 代码也非常简单，通过文本缩进，将文字隐藏，但是，当图片无法显示时，依然存在 FIR 的问题。 Gilder/Levin 的方法
<h2><span></span>Hello World </h2>
h2 {
width: 150px;height: 35px;
position: relative;
}
h2 span {
background: url(hello_world.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}首先，将 h2 的 position 设为 relative ，这样将使 H2 里面的元素定位以 h2 为参照，然后将 span 元素绝对定位，撑满父元素，同时将背景图应用在 span 标签里面；
这种方法的原理是将 span 标签覆盖在文字内容上面，一旦 span 里面的背景图无法显示，将显示下层的文字内容，不影响正常使用。但是，此方法也有一个缺陷，就是背景图不能透明，否则将透出下面的文字。
hacks
_width针对于ie6。*width,+width针对于ie6,7。
color: red\9;/IE8以及以下版本浏览器/（但是测试可以兼容到ie10。
+html与html是IE特有的标签, firefox暂不支持.而+html又为IE7特有标签（但是测试html兼容ie6-10。*+兼容ie7-10）。
!important 在IE中会被忽视，ie6,7,8不识别，ie9+（包括ie9）是识别的。
条件引用
除IE外都可识别你会使用哪些技术和处理方法？
例如，针对使用IE浏览器自带的功能可以限制对网页的浏览，比如activeX或者脚本，我们检测到它不可用时，提示用户启用的操作方式。
尽量避免当js或者css3失效时，页面不可用的动画效果。
例如，http://www.rippletec.net/网站为了营造一种当页面加载完毕，不同模块滚动到固定位置的绚丽动画效果。应该避免类似的效果，一方面产生繁琐的重绘过程，会消耗浏览器内存，对性能一般的设备可能因为压力过大，卡机或者无法渲染；另外一方面是网站当网站的js不可用时，模块滚动到固定位置的事件没有被触发，用户看到的将会是动画产生之前，最原始的页面状态，无法经行下一步操作。 （首次接触“优雅降级”这个词汇是在《jQuery基础教程（第4版）》，不过那时候已经是一年多以前，现在已经记不清当时书上举得例子了，记性差~真心抱歉）
应该为绑定异步的元素，设置herf属性。
例如，用户要执行查询某书本详细信息操作，点击“查询”按钮，通过js触发查询该条目的事件，然后采用jQuery异步执行操作，在页面固定位置加载相关书本的详细内容。$(".delete").click(function(){$.ajax(//..)})，但是一旦js不可用，或者jQuery无发加载的时候，用户将无法顺利执行操作。因此，可以为该操作设置herf属性，当$.ajax()可用时阻止直接跳转，而使用异步；当$.ajax()不可用时，直接跳转到详细信息的页面。
避免依赖脚本验证表单。服务器的表单验证不可避免。
部分浏览器不支持html5新标签，因此，可以用js创建相关标签，然后给它们的css赋予相关属性。
因为iPhone并没有鼠标指针，所以没有hover事件。那么CSS :hover伪类就没用了。但是iPhone有Touch事件，onTouchStart 类似 onMouseOver，onTouchEnd 类似 onMouseOut。所以我们可以用它来模拟hover。使用Javascript：
var myLinks = document.getElementsByTagName(‘a‘);
for(var i = 0; i < myLinks.length; i++){
myLinks[i].addEventListener(’touchstart’, function() {
this.className = “hover”;}, false);
myLinks[i].addEventListener(’touchend’, function(){this.className = “”;}, false);
}然后用CSS增加hover效果： a:hover, a.hover { / 你的hover效果 / }
需要隐藏内容的几种可能性：
具体实现：
css隐藏DIV及内容，完全隐藏内容与布局。display:none或者visibility:hidden （面试官也许会问到：关于display:none和visible:hidden区别） display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别: display:none —不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。 visible:hidden— 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。
“网格系统”，运用固定的格子设计版面布局，其风格工整简洁。
“使用栅格系统的网页设计，非常的有条理性；看上去也很舒服。最重要的是，它给整个网站的页面结构定义了一个标准。对于视觉设计师来说，他们不用再为设计一个网站每个页面都要想一个宽度或高度而烦恼了。对于前端开发工程师来说，页面的布局设计将完全是规范的和可重用的，这将大大节约了开发成本。对于内 容编辑或广告销售来说，所有的广告都是规则的，通用的，他们再也不用做出一套N张不同尺寸的广告图了”
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的mixin用于生成更具语义的布局。
设备宽度(device-width)未必是布局宽度(width)，为了让非适应性布局与手机相适应，我们跟关心视图宽度，因此需要一种方式来设定宽度，这样可以使用媒体查询检测。 让视图的宽度和设备宽度一致
<meta element = "viewport" content = "width=device initial-scale = 1" >
每种布局，都应该根据目标设备指定固定宽度设计
@media onlys screen and (max-width:320px){}
为移动设备调整网页图像。在最基本的页面，一个移动优化的网站就是其布局、内容、互动都经过调整，以适应移动环境。最常见的做法是使用css媒体查询的功能为不同大小的屏幕提供不同的风格；为较小的屏幕优化布局，可以通过针对移动设备的模块服务。
不同设备的分离设计->根据监视屏幕大小进行设计->（媒体查询，灵活排版，图像结合）
其实为XML文件，有几个标签要注意以下 stroke为轮廓 fill为填充。
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"><rect width="300" height="100"style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/><!--绘制一个蓝色填充的矩形--><circle cx="100" cy="50" r="40" stroke="black"stroke-width="2" fill="red"/><!--绘制黑色轮廓 填充为红色的圆--><ellipse cx="300" cy="150" rx="200" ry="80"style="fill:rgb(200,100,50);stroke:rgb(0,0,100);stroke-width:2"/><!--黑色轮廓 填充为橘红的椭圆--><line x1="0" y1="0" x2="300" y2="300"style="stroke:rgb(99,99,99);stroke-width:2"/><!--直线--><polygon points="220,100 300,210 170,250"style="fill:#cccccc;stroke:#000000;stroke-width:1"/><!--多边形--><polyline points="0,0 0,20 20,20 20,40 40,40 40,60"style="fill:white;stroke:red;stroke-width:2"/><!--折线-->
path d="M250 150 L150 350 L350 350 Z" /><!--路径--></svg>http://www.jb51.net/web/70358.html
为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处。
图片替代
好是跟产品沟通，尽量使用默认就有的字体。虽然我们可以用webfonts，但它在页面加载的时候会将整个字体包都下载下来，这对于手机端网页来说无疑是致命的。
如果产品一定要用非标准字体，可用这个软件FontCreator，可以从一个字体包中将你这个页面需要的那几个字提取出来，打成一个新的字体包，这样会节省很多流量
Webfonts (字体服务例如：Google Webfonts，Typekit 等等。)
浏览器会根据css rules 与dom tree 生成render tree。浏览器先产生一个元素集合，这个集合往往由最后一个部分的索引产生（如果没有索引就是所有元素的集合）。然后向上匹配，如果不符合上一个部分，就把元素从集合中删除，直到真个选择器都匹配完，还在集合中的元素就匹配这个选择器了。 举个例子，有选择器： body.ready #wrapper > .lol233 先把所有 class 中有 lol233 的元素拿出来组成一个集合，然后上一层，对每一个集合中的元素，如果元素的 parent id 不为 #wrapper 则把元素从集合中删去。 再向上，从这个元素的父元素开始向上找，没有找到一个 tagName 为 body 且 class 中有 ready 的元素，就把原来的元素从集合中删去。
至此这个选择器匹配结束，所有还在集合中的元素满足。
大体就是这样，不过浏览器还会有一些奇怪的优化。为什么从后往前匹配因为效率和文档流的解析方向。
为什么是用集合主要也还是效率。基于 CSS Rule 数量远远小于元素数量的假设和索引的运用，遍历每一条 CSS Rule 通过集合筛选，比遍历每一个元素再遍历每一条 Rule 匹配要快得多。
利用伪元素装饰内容 (无论是装饰图片还是音效) 而不需要更改 HTML 的内容，从而帮助内容与样式更好地分离。
网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模式都具备这些属性。
每个盒子都有：边界、边框、填充、内容四个属性； 每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；
使用 * { box-sizing: border-box; }能够统一IE和非IE浏览器之间的差异。
说到 IE 的 bug，在 IE6以前的版本中，IE对盒模型的解析出现一些问题，跟其它浏览器不同，将 border 与 padding 都包含在 width 之内。
而另外一些浏览器则与它相反，是不包括border和padding的。
对于IE浏览器，当我们设置 box-sizing: content-box; 时，浏览器对盒模型的解释遵从我们之前认识到的 W3C 标准，当它定义width和height时，它的宽度不包括border和padding；
对于非IE浏览器，当我们设置box-sizing: border-box; 时，浏览器对盒模型的解释与 IE6之前的版本相同，当它定义width和height时，border和padding则是被包含在宽高之内的。
内容的宽和高可以通过定义的“width”和 “height”减去相应方向的“padding”和“border”的宽度得到。
内容的宽和高必须保证不能为负，必要时将自动增大该元素border box的尺寸以使其内容的宽或高最小为0。
display 属性规定元素应该生成的框的类型。
都是display 属性规定元素应该生成的框的类型。但是block代表块级元素，元素前后都有换行符；inline是默认的样式，表示该元素被显示为内联元素，元素前后没有换行符号。也就是说，block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。而inline-block代表行内块元素（css2.0新增）。
display:block
display:inline
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；
但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
display:inline-block
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
在用CSS+DIV进行布局的时候，一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚，以致经常会出现让人很郁闷的结果。今天研究了一下，总算有所了解。在此总结一下： 先看下各个属性值的定义：
static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
relative：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。
absolute：生成绝对定位的元素，相对于非static 定位的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”,“right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。
static与fixed的定位方式较好理解，在此不做分析。下面对应用的较多的relative和absolute进行分析：
relative。定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在。
absolute。定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不在存在。在将黄色背景层定位为absolute后，灰色背景层自动补上。
relative与absolute的主要区别：
1.在正常流中的位置存在与否。
2.relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式。
static是默认方式
下面对应用的较多的relative和absolute与fixed进行分析：
继承规则：盒子模式属性不会被继承 。优先级 重要的 内联 ID 类 元素
Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。
Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。
? 如果有，请问在性能和效率的方面你是怎么看的？
http://www.w3cplus.com/css3/a-guide-to-flexbox.html http://zh.learnlayout.com/flexbox.html
自适应布局（Adaptive Layout）
自适应布局（Adaptive）元素的位置会变化而大小不会变化；
流式布局（Liquid Layout）
流式布局（Liquid）的特点（也叫“Fluid”) 是页面元素的宽度调整元素大小。
响应式布局（Responsive Layout）
即元素大小和位置都变化。
transform 和 position:relative 的效果是一样的。
差别在于，transform 可以简单地作用于 position:absolute 的元素上面，而 position:relative; 还得加额外的 html
从动画角度来说 使用 transform 或 position 实现动画效果时是有很大差别。
使用 transform 时，可以让 GPU 参与运算，动画的 FPS 更高。
使用 position 时，最小的动画变化的单位是 1px，而使用 transform 参与时，可以做到更小（动画效果更加平滑）
参考资料： Paul Irish 的 Why Moving Elements With Translate() Is Better Than Pos:abs Top/left
总结 position 是为页面布局而生的。 transform 是为动画而生的。不会引起DOM重排
标签：
原文地址：http://www.cnblogs.com/laiqun/p/5478463.html
