十、你对css-sprites的理解
sprites直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景。
CSS Sprites其实就是把网页中一些背景图片整合拼合成一张图片中,再利用DIV CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片在布局盒子对象位置
十一、你对媒体查询的理解?
媒体查询(Media Query)是CSS3新语法。
1.使用@media查询,可以针对不同的媒体类型定义不同的样式
2.@media可以针对不同的屏幕尺寸设置不同的样式
3.当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
4.目前针对很多苹果手机、Android手机,平板等设备都用得到媒体查询
十二、你对盒模型的理解?
CSS 盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素
十三、标准盒模型和怪异盒模型有什么区别?
1.标准盒模型:标准盒模型又称W3C标准盒模型,其中标准盒模型的 width 等于 content 的宽度,标准盒模型的 height 等于 content 的高度。
标准盒大小计算公式:width(content) + padding + border + margin
2.怪异盒模型又称IE盒子模型,其中怪异盒子模型的 width 等于 content + padding + border 的宽度,怪异盒子模型的 height 等于 content + padding + border 的高度。
怪异盒大小的计算公式:width(content + padding + border) + margin
十四、谈谈对BFC(Block Formatting Context)的理解?
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则。它决定了其子元素将如何定位,以及和其他元素的关系和互相作用。最常见的 Formatting context 有 Block formatting context(简称BFC)和 Inline formatting context(简称IFC)。Block formatting context直译为“块级格式化上下文”。它是一个独立的渲染区域,只有Block-level box 参与,它规定了内部的Block-level Box 如何布局,并且与这个区域外部毫不相关。通俗地讲,BFC是一个容器,用于管理块级元素。
十五、为什么有时候⼈们⽤translate来改变位置⽽不是定位?
1.translate()是transform的一个值。改变transform或者opacity不会触发浏览器重新布局(reflow)或重绘(repaint),只会触发复合(compositions)。
2.改变绝对定位会触发重新布局,进而触发重绘和复合。
3.transform使浏览器为元素创建一个GPU。但改变绝对定位会使用到GPU。因此translate()更高效,可以缩短平滑动画的绘制时间。
4.translate改变位置时,元素依旧会占据其原始空间,绝对定位不是。
十六、伪类和伪元素的区别是什么?
1.伪类:用来添加一些选择器的特殊效果。
2.伪元素:伪元素是用来添加一些选择器的特殊效果。
3.区别:
1) 伪元素其实相当于伪造了一个元素,例如before,first-letter达到的效果就是伪造了一个元素,然后添加了其相应的效果而已;而伪类没有伪造元素,例如first-child只是给子元素添加样式而已。
2) 伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 css3 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。
十七、你对flex的理解?
1.display: flex; 开启弹性布局
2.flex: wrap; 是否换行
用弹性布局让页面更加整洁美观,代码书写更加简洁清晰
十八、关于CSS的动画与过渡问题
1.动画animation
特点:
1.动画是多个状态之前的改变
2.动画可以自动执行,不需要事件触发
3.动画通过 @keyframes 定义关键帧 定义动画
综合属性:
CSS
拆分属性:
1.animation-name: 引用动画的名字(定义动画的名字)
2.animation-duration: 动画持续时间
3.animation-timing-function: 动画函数曲线
4.animation-delay: 延迟执行
5.animation-iteration-count: 定义动画的执行次数
指定动画无限执行:infinite
6.animation-direction: 定义动画执行的顺序
1) 取值:alternate 默认值
2) alternate-reverse 动画先反向执行,然后再正向执行,必须结合 iteration-count 属性一起使用才有效果;动画至少要执行两次
3) reverse 动画反向执行
7.animation-fill-mode: 定义动画执行结束后保留的状态
1) 取值:forword 动画保留终点状态
2) backwards 默认值,动画保留起点状态
3) both 动画将遵循forwards 和 backwards 的规则,从而再两个方向上扩展动画属性
2.过渡transition
特点:
1.过渡是两个状态之间的过渡,只能从一种状态过渡到另一种状态
2.过渡需要事件触发,不能自动执行
综合属性:
可以同时控制多个属性进行过渡,多个属性之间用逗号隔开
拆分属性:
1.transition-property:
1) 定义过渡的属性名(样式名称),比如width height border
2) 可以具体的样式属性名,也可以使用关键字 all(所有属性共用同样的效果)
2.transition-duration:
定义动画持续时间 单位是 秒/s
3.transition-delay:
延迟执行,延迟时间,单位是秒/s
4.transition-timing-function:
1) 定义动画函数曲线
2) 取值:
ease : 先快后慢
ease-in :越来越快
ease-out: 越来越慢
ease-in-out:先慢再快再慢
liner:匀速直线运动
cubic-bezier():贝赛尔曲线 cubic-bezier(.17,.67,.83,.67)