伪类:一开始用来表示一些元素的动态状态,随后CSS2标准扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类
伪对象:代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中
8. 请简述CSS的权重规则
一个行内样式+1000,一个id+100,一个属性选择器/class类/伪类选择器+10,一个元素名/伪对象选择器+1。
关系选择器将拆分为两个选择器再计算.
9. 请写出多种等高布局
a. 假等高列:使用背景图片,在列的父元素上使用这个背景图进行Y轴的铺放,从而实现一种等高列的假像
b. 给容器div使用单独的背景色(固定布局)(流体布局):用元素中的最大高度撑大其他的容器高度
c. 创建带边框的两列等高布局:用border-left来做,只能使用两列。
d. 使用正padding和负margin对冲实现多列布局方法:在所有列中使用正的上、下padding和负的上、下margin,并在所有列外面加上一个容器,设置overflow:hiden把溢出背景切掉
e. 使用边框和定位模拟列等高:但不能使用在多列
f. 模仿表格布局等高列效果:兼容性不好,在ie6-7无法正常运行
10. 在CSS样式中常使用px、em,各有什么优劣,在表现上有什么区别?
px是相对长度单位,相对于显示器屏幕分辨率而言的。
em是相对长度单位,相对于当前对象内文本的字体尺寸。
px定义的字体,无法用浏览器字体放大功能。
em的值并不是固定的,会继承父级元素的字体大小,1 ÷ 父元素的font-size × 需要转换的像素值 = em值。
11. CSS中 link 和@import 的区别是什么?
a. link属于HTML标签,而@import是CSS提供的,且只能加载 CSS
b. 页面被加载时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载
c. import只在IE5以上才能识别,而link是HTML标签,无兼容问题
d. link方式的样式的权重 高于@import的权重
e. 当使用 Javascript 控制 DOM 去改变样式的时候,只能使用 link 方式,因为 @import 眼里只有 CSS ,不是 DOM 可以控制
12. position的absolute与fixed共同点与不同点
相同:
a. 改变行内元素的呈现方式,display被置为block
b. 让元素脱离普通流,不占据空间
c. 默认会覆盖到非定位元素上
区别:
absolute的”根元素“是可以设置的,而fixed的”根元素“固定为浏览器窗口。
当你滚动网页,fixed元素与浏览器窗口之间的距离是不变的。
13. position的值, relative和absolute分别是相对于谁进行定位的?
absolute:生成绝对定位的元素,相对于 static 定位以外的第一个祖先元素进行定位
fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。 (IE6不支持)
relative:生成相对定位的元素,相对于其在普通流中的位置进行定位
static:默认值。没有定位,元素出现在正常的流中
14. CSS3有哪些新特性?
CSS3实现圆角(border-radius),阴影(box-shadow),对文字加特效(text-shadow),线性渐变(gradient),变形(transform)
增加了更多的CSS选择器 多背景 rgba,在CSS3中唯一引入的伪元素是::selection,媒体查询,多栏布局
15. 为什么要初始化CSS样式?
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。
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. 在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片
17. 解释下浮动和它的工作原理?
a. 浮动元素脱离文档流,不占据空间(引起“高度塌陷”现象)
b. 浮动元素碰到包含它的边框或者浮动元素的边框停留。
18. 浮动元素引起的问题
a. 父元素的高度无法被撑开,影响与父元素同级的元素
b. 与浮动元素同级的非浮动元素会跟随其后
c. 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构
19. 什么是 FOUC(无样式内容闪烁)?你如何来避免 FOUC?
如果使用import方法对CSS进行导入,会导致某些页面在Windows下的IE出现一些奇怪的现象:
以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。