简答题1. CSS中的@font-face有什么作用?
CSS原先只能使用操作系统上安装的字体,自从引入了@font-face后,就打破了这个限制,允许使用在线字体,不再拘泥于几种字体。@font-face能将放置在服务器上的自定义字体嵌入到页面中,装饰文本,这个字体还可以是矢量图标。
[考点] CSS属性 文本和字体
2. 字体风格(font-style)有两个关键字,分别是italic和oblique,它们有什么区别?
italic会对文字的结构做些改动,得到一种斜体字体;而oblique不会修改文字结构,仅仅是倾斜字体。下图中将文本的字体设置为Georgia,第一行是原始文本,第二行和第三行分别是将font-style设为italic和oblique后的效果。
italic和oblique不同的效果 如果不存在italic的变形字体,italic的功能将会与oblique相同,下图中将文本的字体设为宋体(SimSun),3行的字体风格和上面的定义一致。
italic和oblique相同的效果 [考点] CSS属性 文本和字体
3. 请说下你对CSS中行高(line-height)的理解。
行高(line-height)是指两行文本基线之间的垂直距离。基线(baseline)是西方文字排版中的概念,指的是字母排列的基准线。汉字中不存在基线,当汉字与字母混排时,汉字的下端沿并不在基线上,而是会被调整到基线的下边一点。下图中的两条横线就是基线。
基线 line-height属性主要影响的是行内元素而不是块级元素,如果给块级元素设置行高,那么受影响的将会是行内内容。
[考点] CSS属性 文本和字体
4. 默认情况下,当img元素(即图像)和span元素(即文本)混排时,图像下方会留出几像素的空隙(如下图所示),这是为什么?
图文混排
img是一个替换元素,替换元素没有自己的基线,如果将它和非替换元素混排,那么其行内盒的底端将与基线对齐。由于与基线对齐,图像下方就会留出几像素的空隙。
[考点] CSS属性 文本和字体
5. 在下面的代码中,为第一个span元素设置了vertical-align属性(即垂直对齐),代码执行后,可以得到下图中右边部分的效果,下图中左边部分是没有设置vertical-align属性时的效果。虽然设置了第一个span元素,但第二个元素的垂直对齐也被影响了,这是为什么?
<style>
p{
line-height: 40px;
}
.first {
font-size: 30px;
background: rgb(242, 242, 242);
vertical-align: middle;
}
.second {
font-size: 20px;
background: rgb(0, 176, 240);
}
</style>
<p>
<span class="first">备注: </span>
<span class="second">My name is pwstrtick</span>
</p>
设置vertical-align属性前后的效果
当给子元素设置vertical-align属性的时候,父元素的基线会被移动。元素默认都是与父元素的基线对齐的,但此时父元素的基线被移动了,从而导致参照基线对齐的元素也会跟着调整。
[考点] CSS属性 文本和字体
6. 在CSS中,可以将line-height设置为纯数字或百分数(代码如下所示),这两种赋值方式有何异同?
p{
font-size: 20px;
line-height: 1.2; /*数字*/
line-height: 120%; /*百分数*/
}
数字和百分数都需要与字体大小(font-size)相乘才能得到真实的行高,在上面的CSS规则中,p元素真实的行高为24px。它们的区别主要在继承方面,如果父元素的行高是数字,那么子元素继承的也将是这个数字;如果父元素的行高是百分数,那么子元素继承的将会是经过计算后的真实行高。
[考点] CSS属性 文本和字体
7. 用纯CSS实现一个三角形。
先将元素(如div)的宽高设为0,边框的宽度设为50px,4个部分的边框可拼成一个正方形。然后将其他3部分的颜色设为透明,剩下的部分就是一个三角形,代码如下所示。
div {
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: gray;
}
[考点] CSS属性 边框和背景
8. 不使用CSS属性border,使用其他属性模拟边框。
阴影(box-shadow)是CSS3新增的属性,可向边框添加一个或多个阴影。利用阴影可以模拟边框,使得元素可以套无限层边框,代码如下所示。div元素通过阴影,让元素多了三条边框,外层加了两条,分别为灰色和黑色,内部加了一条红色边框,如下图所示。
div {
box-shadow: 0 0 0 5px #CCC,
0 0 0 10px #000,
0 0 0 5px #F00 inset;
width: 150px;
height: 50px;
}
阴影模拟的边框 [考点] CSS属性 边框和背景
9. 背景图像可以用Data URI描述,那么什么是Data URI?
Data URI可以将外部资源(例如图像)经过Base64编码后,嵌入到其他文档中,能够减少额外的HTTP请求。Data URI由协议、MIME类型(可选)、Base64编码设定(可选)和内容组成,格式如下:
data:[<mime type>][;base64],<data>
在实际使用中的代码片段如下:
data:image/png;base64,/9j/4AAQSkZJRgAB...
Data URI是用Base64进行编码,Base64会以每6bit为一个单元,对应某个字符,如果要编码的字节数不能被3整除,就用0在末尾补足。举个简单的例子,编码PW,最后得到的值是UFc=,计算过程如下图所示。
Base64计算过程 虽然使用Data URI减少了一次HTTP请求,但它会让嵌入的文档体积膨胀,影响浏览器渲染,并且还会降低Gzip的压缩效率,破坏资源的缓存,所以在使用它的时候需要权衡利弊。
[考点] CSS属性 边框和背景
10. 什么是CSS Sprite,它有何利弊?
CSS Sprite是一种图像处理技术,将零散的小图标整合在一起,形成一张大图(如下图所示),这张图可称为雪碧图或精灵图。当用这张大图作背景图像时,可以利用background-position属性进行背景定位,找到想要的小图标。这么处理图像,不仅可以解决命名困扰,还能减少HTTP请求数和图像字节数,提升网页性能。但制作和维护这张雪碧图比较烦琐,当需要添加一个小图标的时候,必须修改原图,还不能破坏原有图标的位置。
雪碧图 [考点] CSS属性 边框和背景
11. 设置了元素的过渡后,不能立刻看到效果,需要有触发条件。请列举可用的触发条件。
有3种操作能够触发过渡,分别是CSS伪类、媒体查询和JavaScript,具体如下所列:
(1)CSS伪类触发。CSS有众多伪类(例如:hover、:checked等),如果用:hover,那么只有当鼠标悬停在元素上时,才能执行过渡。
(2)媒体查询触发。当改变窗口的尺寸时,就会触发媒体查询,然后执行过渡。
(3)JavaScript触发。用脚本更改元素样式,也能触发过渡效果。
[考点] CSS3属性 变形、过度和动画
12. CSS中的过渡与动画有哪些区别?
过渡与动画有3个方面的不同,如下所列:
(1)过渡只能指定元素的初始状态和结束状态,而动画通过关键帧,可以控制变化过程中的更多状态(即更多阶段)。
(2)动画不需要触发条件,当HTML文档和相关样式载入完成后,就能立即执行。
(3)动画的子属性比过渡多,可以控制动画的循环次数、播放方向以及动画状态。
[考点] CSS3属性 变形、过度和动画
13. 请为div元素设计一个水平位移60px的动画(animation),要求持续时间为2s、循环无限次、有连贯性;在动画执行到一半时,水平位移30px。
题中指定了动画的持续时间和循环次数,并强调要有连贯性,因此需要设置3个动画的子属性:animation-duration、animation-iteration-count和animation-direction。具体实现过程如下所示。
div {
animation: drift 2s infinite alternate;
}
@keyframes drift {
from {
transform: translateX(0);
}
50% {
transform: translateX(30px);
}
to {
transform: translateX(60px);
}
}
[考点] CSS3属性 变形、过度和动画
14. 用CSS为下面的div元素添加一组动画。在3s的时间中,水平位移100px,并且同时放大1.5倍,最后再用3s时间逆向返回并恢复成原先的大小,动画结束。
div {
width: 100px;
height: 100px;
background: #F60;
}
题目中说明了动画的循环次数是2次,持续的时间是3s,并强调要有连贯性,因此需要设置3个动画的子属性:animation-duration、animation-iteration-count和animation-direction。动画包含两个动作,第一个是水平位移,第二个是放大,因此需要使用两个变形函数:translateX()和scale()。具体实现过程如下所示。
div {
animation: drift 3s 2 alternate;
}
@keyframes drift {
from {
transform: translateX(0) scale(1);
}
to {
transform: translateX(100px) scale(1.5);
}
}
[考点] CSS3属性 变形、过度和动画
15. 如何用CSS3的媒体查询实现视口宽度大于360px而小于640px时,div元素的宽度变成30%?
媒体查询由两部分组成:一个可选的媒体类型和零个或多个描述媒体特性的表达式。媒体类型可设为screen,媒体特性可用min-width和max-width,操作符可用only和and。only作为媒体查询的开头,可以对不支持媒体查询,但支持媒体类型的设备隐藏样式。and操作符用来连接媒体类型和媒体特性表达式,将它们组合成一条媒体查询,只有当每个部分都为真的时候,才会执行里面的样式,具体写法如下所示:
@media only screen and (min-width: 360px) and (max-width: 640px) {
div {
width:30%;
}
}
[考点] CSS3属性 媒体查询
16. 什么是设备像素比?
设备像素比就是物理像素与设备独立像素在水平或垂直方向的比例,以下是对物理像素和设备独立像素的说明。
(1)物理像素(Physical Pixel)也叫设备像素,是屏幕上的最小显示单元,在设备生产的时候,就已定好在屏幕上需要多少个这样的单元。
(2)设备独立像素(DP或DiP)是一种虚拟像素,是逻辑上衡量像素的单位,相当于CSS像素(在样式表中的单位)。
以iPhone5为例,设备的宽高为320×568,可理解为设备独立像素在屏幕水平和垂直方向的数量,而物理像素则是640×1136,那么它的设备像素比就是2,1个设备独立像素包含4个物理像素,如下图所示。
设备独立像素和物理像素 [考点] CSS3属性 媒体查询
17. 什么是响应式设计?
响应式设计(Responsive Web Design)可根据不同设备的可视区域改变网页布局,展现不同设计风格,力求在当前设备中达到最完美的效果,减少用户浏览网页的额外操作(例如缩放、平移或滚动等)。举个简单的例子,同一张网页,在打印的时候尽量用白底黑字、为链接增加下画线、禁止背景图像;在移动端移除不支持的CSS伪类(例如:hover、:focus等),少用耗性能的特效,考虑横屏和竖屏之间的变化;在屏幕阅读器中确保CSS插入的内容仅仅是装饰,过渡、转换和动画也仅仅是装饰,而不是关键功能。响应式设计是流式网格、自适应图像和媒体查询的结合体,具体如下所列。
(1)流式网格要求元素使用相对单位或百分比控制尺寸大小。
(2)自适应图像是指不给图像设置固定尺寸,根据流式网格进行缩放,最大到100%。
(3)创建不同的媒体查询,根据设备的尺寸和特点,设置适合的样式。下图中展示的就是不同屏幕尺寸下的页面布局。
响应式布局 [考点] CSS3属性 媒体查询
18. 请谈谈你对定位布局的理解。
定位布局适用于不规则的排版,通常会将需要排列的元素定义为绝对定位或固定定位。定位元素可往四个方向(上下左右)随意偏移,由于偏移的距离没有限制,因此可以偏移到包含块的外面。如果多个元素偏移到同一个位置,那么可以用z-index属性改变元素的层叠顺序。现实生活中的照片墙,如果搬到网页中,就很适合用定位来实现。
[考点] 布局
19. 在移动端通常会用弹性布局,请简单介绍一下弹性布局。
移动设备(例如手机、平板电脑等)的屏幕尺寸和分辨率千差万别,在分辨率高的设备中,元素看着会太小;而在分辨率低的设备中,元素看着又太大。弹性布局是一种相对布局,需要参照物,参照的是字体大小。使用rem单位实现弹性布局是现在比较流行的做法,代码如下所示。
<html style="font-size:20px">
<body>
<div>
<section style="width:5rem">left</section>
<section style="width:10rem">right</section>
</div>
</body>
</html>
单位是rem的值会参照根元素(也就是html元素)的字体大小进行计算。在不同款的移动设备中,根元素的字体大小会略有不同,需要用JavaScript动态计算得出,计算方案(例如手淘的flexible.js)有很多。
[考点] 布局
20. 请用多种方法实现等高布局,让页面中每列的高度相等。
有4种方法可以实现等高布局,如下所列。
(1)背景模拟:这是一种简单粗暴的方法,给容器元素定义一张背景图,这张背景图可以做成各列宽度的背景色,代码如下所示。
<div style="background:url(bac.png)repeat-y">
<section>左边的列高</section>
<section></section>
</div>
(2)正负边距实现:先给容器中的列设置一个比较大的内边距(例如padding-bottom:9999px),把这列的高度撑大,再设置相同大小的负外边距(例如margin-bottom:-9999px),把列变回原来的高度,代码如下所示。
<style>
section {
margin-bottom:-9999px;
padding-bottom: 9999px;
}
</style>
<div>
<section>左边的列高</section>
<section></section>
</div>
(3)边框模拟:为容器的左边框或右边框设置一个比较大的宽度(例如100px),侧边栏再用负外边距偏移一定的距离(例如-100px,这个距离就是边框宽度),定位到容器的左边或右边,代码如下所示。
<div style="border-left:100px solid #F60">
<section style="margin-left:-100px">左边的列高</section>
<section></section>
</div>
(4)JavaScript控制,用JavaScript得到各列的高度,再找出最大的列高,赋给每列,实现等高的效果,代码如下所示。这种方法的兼容性最高,所有的浏览器都能执行。
<div>
<section id="left">左边的列高</section>
<section id="right"></section>
</div>
<script>
var left=document.getElementById("left"), //左边列
right=document.getElementById("right"); //右边列
var leftH=left.clientHeight, //左边列的高度
rightH=right.clientHeight; //佑边列的高度
//得到最大的高度值
var height=(leftH>=rightH? leftH:rightH)+"px";
left.style.height=height; //重新定义左边列的高度
right.style.height=height; //重新定义右边列的高度
</script>
[考点] 布局
21. 如何实现一个圣杯布局?
圣杯布局(Holy Grail)从上到下由页头、内容和页脚组成,内容由左、中、右三列组成(如下图所示)。
圣杯布局 其中左右两列的宽度固定,中间一列自适应,并且要最先显示(下面的HTML文档内,中间元素被放在最前面)。
<header>header</header>
<div>
<section class="center">center</section>
<section class="left">left</section>
<section class="right">right</section>
</div>
<footer>footer</footer>
容器div元素会用左右内边距腾出侧边两列的空间,如果左右两列的宽度都为100px,那么容器的左右内边距都为100px。中间列为了自适应,宽度就要定义为一个百分数(例如100%),如下所示。
div {
padding: 0 100px 0;
}
.center {
width: 100%;
}
左右列用负的外边距偏移。左列比较特殊,需要越过中间列,负外边距可以设为-100%,代码如下所示。
.left {
margin-left:-100%;
right: 100px;
width: 100px;
position: relative;
}
边距的百分数参照的是包含块的宽度,此处包含块的宽度就是中间列的宽度。越过中间列后,再用相对定位向右偏移100px的距离(这个距离就是左列的宽度)。右列比较简单,直接用负外边距偏移即可。
.right {
margin-right:-100px;
width: 100px;
}
[考点] 布局
22. 为什么要重置浏览器中的HTML元素默认的CSS样式?
浏览器都会维护各自的用户代理样式表(HTML元素默认的CSS样式),这就导致同一个元素在不同浏览器中的表现会有差异。例如ul元素,默认会缩进,在IE6和IE7中是用外边距实现,而在其他浏览器中则是用内边距实现。为了解决这些兼容问题、减少浏览器的不一致性、统一元素的初始外观,需要在编码前对元素样式进行合适的重置。
[考点] 布局
23. 请谈谈你对Normalize.css的理解。
Normalize.css是一种现代化的、为HTML5准备的优质重置方案,提倡元素的默认样式有其存在的道理。规范了元素的表现形式,使得元素在所有浏览器中呈现一致的、符合现代标准的效果,并提供安全的跨浏览器支持。
[考点] 布局
24. EricMeyer的Reset.css和现在流行的Normalize.css有什么区别?
Reset.css和Normalize.css主要有4个方面的区别,如下所列:
(1)两者的理念不同,Reset.css倾向于统一元素的初始外观;而Normalize.css倾向于统一元素的表现形式。
(2)Reset.css会牺牲元素的默认样式;而Normalize.css会有选择性地保留元素的默认样式。
(3)Normalize.css能够修复浏览器的BUG;而Reset.css没有这个实用的功能。
(4)Reset.css内容比较少,注释也不多;而Normalize.css有详细的注释,便于理解,并且用注释划分成了多个模块,便于管理。
[考点] 布局
25. 在移动端使用伸缩盒,怎样才能实现下图中的效果,伸缩容器内只显示一行文本,溢出的内容用省略号替换?
伸缩容器中的内容溢出
在普通的块级盒中要显示一行文本,溢出的内容用省略号替换,需要设置width、overflow、text-overflow和white-space,如下所示。
div{
width: 200px;
overflow: hidden; /*裁剪溢出内容*/
text-overflow: ellipsis; /*将溢出内容替换为省略号*/
white-space: nowrap; /*禁止换行*/
}
在伸缩容器中实现这种效果需要使用旧版本的两个伸缩属性和一个webkit的私有属性,并且不能再用white-space来禁止换行,如下所示。
div {
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
/*旧版本伸缩属性*/
display:-webkit-box;
-webkit-box-orient: vertical; /*从上到下排列*/
/*webkit私有属性*/
-webkit-line-clamp:1; /*文本行数*/
}
如果想在第二行才做溢出替换(如下图所示),只需将-webkit-line-clamp属性的值改为2。
在第二行显示省略号