CSS总结

标签（空格分隔）： 面试准备

---

[TOC]

3.1、谈谈你对CSS布局的理解

3.2、请列举几种可以清除浮动的方法（至少两种）

概念：在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出(高度塌陷)，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
a. 在浮动元素后面添加一个空元素，例如

b. 使用br标签和其自身的html属性，例如

c. 父元素设置 overflow：hidden；或者overflow：auto；在IE6中还需要触发hasLayout，例如zoom：1；
d. 父元素也设置浮动即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。
e. 父元素设置display:table,盒模型属性改变，有可能引发未知问题。
f. 使用:after 伪元素；由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

.clearfix:after{
  content: "\200B"; 
  display: block; 
  height: 0; 
  clear: both; 
  }
.clearfix {
  /* 触发 hasLayout */ 
  zoom: 1; 
  }
  //或
  /* For modern browsers */
.cf:before,.cf:after {
  content:"";
  display:table;
}
.cf:after { clear:both; }
/* For IE 6/7 (trigger hasLayout) */
.cf { zoom:1; }

g.固定高度时，可以手动设定父元素的高度。
在CSS2.1里面有一个很重要的概念，那就是 Block formatting contexts （块级格式化上下文），简称 BFC。
创建了BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素，同时BFC仍然属于文档中的普通流。
IE6-7的显示引擎使用的是一个称为布局（layout）的内部概念。

3.3、请列举几种隐藏元素的方法

a. visibility: hidden；这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在。
b. opacity: 0；一个CSS3属性，设置0可以使一个元素完全透明，制作出和visibility一样的效果。与visibility相比，它可以被transition和animate
c. position: absolute；使元素脱离文档流，处于普通文档之上，给它设置一个很大的left负值定位，使元素定位在可见区域之外。
d. display: none；元素会变得不可见，并且不会再占用文档的空间。
e. transform: scale(0)；将一个元素设置为无限小，这个元素将不可见。这个元素原来所在的位置将被保留。
f. HTML5 hidden attribute；hidden属性的效果和display:none;相同，这个属性用于记录一个元素的状态
g. height: 0; overflow: hidden；将元素在垂直方向上收缩为0,使元素消失。只要元素没有可见的边框，该技术就可以正常工作。
h. filter: blur(0)；将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中。

3.4、如何

text-transform：none| capitalize(将每个单词的第一个字母转换成大写) | uppercase(将每个单词转换成大写 ) | lowercase(将每个单词转换成小写 )

3.5、请简述CSS样式表继承

CSS样式表继承指的是，特定的CSS属性向下传递到子孙元素。会被继承下去的属性如下：参考《CSS样式表继承详解》
文本相关：font-family，font-size， font-style，font-variant，font-weight， font，letter-spacing，line-height，color
列表相关：list-style-image，list-style-position，list-style-type， list-style

以下是一个按特性分类的选择符的列表：
H1{color:blue;}　 特性值为：1
PEM{color:purple;} 特性值为：2
.apple{red;}　 特性值为：10
P.bright{color:yellow;} 特性值为：11
P.brightEM.dark{color:brown;}　 特性值为：22
#id316{color:yellow}　 特性值为：100
从上表我们可以看出#id316具有更高的特殊性，因而它有更高的权重。当有多个规则都能应用于同一个元素时，权重越高的样式将被优先采用。而继承属性的特性值为0；也就是说，任何一条与css继承值冲突的属性值都会覆盖继承的属性值！！！

3.6、请简述CSS的选择器

元素选择器：* 、E、 E#id、 E.class
关系选择器：E、F、E>F、E+F、E~F
属性选择器：E[att]、E[att=”val”]、E[att~=”val”]、E[att^=”val”]、E[att$=”val”]、E[att*=”val”]、E[att|=”val”]
伪类选择器：E:link、E:visited、E:hover、E:active、E:focus、E:lang(fr)、E:not(s)、E:root、E:first-child、E:last-chil等
伪对象选择器：E:first-letter/E::first-letter、E:first-line/E::first-line、E:before/E::before、E:after/E::after、E::selection

3.7、CSS伪类与CSS伪对象的区别

CSS 引入伪类和伪元素的概念是为了描述一些现有CSS无法描述的东西
根本区别在于：它们是否创造了新的元素（抽象）
伪类：一开始用来表示一些元素的动态状态，随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类
伪对象：代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中

3.8、请简述CSS的权重规则

一个行内样式+1000，一个id+100，一个属性选择器a[href][title] {color:red;}/class类/伪类选择器:hover,:focus+10，一个元素名/伪元素选择器:before,:after+1。
http://www.w3cplus.com/css/css-specificity-things-you-should-know.html

3.9、请写出多种等高布局

a. 假等高列：使用背景图片，在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假像
b. 给容器div使用单独的背景色（固定布局）（流体布局）：用

元素中的最大高度撑大其他的

容器高度
c. 创建带边框的两列等高布局：用border-left来做，只能使用两列。
d. 使用正padding和负margin对冲实现多列布局方法：在所有列中使用正的上、下padding和负的上、下margin，并在所有列外面加上一个容器，设置overflow:hiden把溢出背景切掉
e. 使用边框和定位模拟列等高：但不能使用在多列
f. 模仿表格布局等高列效果：兼容性不好，在ie6-7无法正常运行
http://www.w3cplus.com/css/creaet-equal-height-columns

3.10、在CSS样式中常使用px、em，各有什么优劣，在表现上有什么区别？

px是相对长度单位，相对于显示器屏幕分辨率而言的。
em是相对长度单位，相对于当前对象内文本的字体尺寸。
px定义的字体，无法用浏览器字体放大功能。
em的值并不是固定的，会继承父级元素的字体大小，1 ÷ 父元素的font-size × 需要转换的像素值 = em值。
当前浏览器的默认的字体大小为1em,绝大多数时候为16px;

3.11、CSS中 link 和@import 的区别是什么？

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

3.12、position的absolute与fixed共同点与不同点

相同：
a. 改变行内元素的呈现方式，display被置为block
b. 让元素脱离普通流，不占据空间
c. 默认会覆盖到非定位元素上
区别：
absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。
当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

3.13、position的值， relative和absolute分别是相对于谁进行定位的？

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。 （IE6不支持）
relative：生成相对定位的元素，相对于其在普通流中的位置进行定位
static：默认值。没有定位，元素出现在正常的流中

3.14、CSS3有哪些新特性？

http://www.cnblogs.com/strick/p/3839873.html
http://www.cnblogs.com/strick/p/4843595.html

3.15、为什么要初始化CSS样式？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

3.16、解释下 CSS sprites原理，优缺点

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，
再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，
background-position可以用数字精确的定位出背景图片的位置。
优点：
a. 减少网页的http请求
b. 减少图片的字节
c. 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名
d. 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。
缺点：
a. 在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂
b. CSS Sprites在开发的时候，要通过photoshop或其他工具测量计算每一个背景单元的精确位置
c. 在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片

3.17、解释下浮动和它的工作原理？

a. 浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）
b. 浮动元素碰到包含它的边框或者浮动元素的边框停留。

3.22、经常遇到的浏览器兼容性有哪些？如何解决？

a. 浏览器默认的margin和padding不同
b. IE6双边距bug
c. 在ie6，ie7中元素高度超出自己设置高度。原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的
d. min-height在IE6下不起作用
e. 透明性IE用filter:Alpha(Opacity=60)，而其他主流浏览器用 opacity:0.6
f. input边框问题，去掉input边框一般用border:none;就可以，但由于IE6在解析input样式时的BUG(优先级问题)，在IE6下无效

3.25、rgba()和opacity的透明效果有什么不同？

a. opacity作用于元素，以及元素内的所有内容的透明度，rgba()只作用于元素的颜色或其背景色。
b. 设置rgba透明的元素的子元素不会继承透明效果！