1.<image>标签上title属性与alt属性的区别是什么?
alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。
这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户,视觉障碍的用户和使用屏幕阅读器的用户等。
title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。
2.简述一下src与href的区别
src用于替换当前元素;href用于在当前文档和引用资源之间确立联系。
src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置
href是Hypertext Reference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接
3.请列举几种可以清除浮动的方法(至少两种)
浮动会漂浮于普通流之上,像浮云一样,但是只能左右浮动。正是这种特性,导致框内部由于不存在其他普通流元素了,表现出高度为0(高度塌陷)。
a. 添加额外标签,例如<div style="clear:both"></div>
b. 使用br标签和其自身的html属性,例如<br clear="all" />
c. 父元素设置 overflow:hidden;在IE6中还需要触发hasLayout,例如zoom:1;
d. 父元素设置 overflow:auto 属性;同样IE6需要触发hasLayout
e. 父元素也设置浮动
f. 父元素设置display:table
g. 使用:after 伪元素;由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。
在CSS2.1里面有一个很重要的概念,那就是 Block formatting contexts (块级格式化上下文),简称 BFC。
创建了BFC的元素就是一个独立的盒子,里面的子元素不会在布局上影响外面的元素,同时BFC仍然属于文档中的普通流。
IE6-7的显示引擎使用的是一个称为布局(layout)的内部概念。
参考《那些年我们一起清除过的浮动》
4.请列举几种隐藏元素的方法
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,从而使这个元素“消失”在页面中。
参考《使用CSS隐藏HTML元素的4种常用方法》《通过HTML和CSS隐藏和显示元素的4种方法》
5.为什么要初始化CSS样式?
因为浏览器的兼容的问题,不同浏览器有些标签的默认值是不同的,如果没有CSS初始化往往会出现浏览器之间的页面显示差异。
6.:link、:visited、:hover、:active的执行顺序是怎么样的?
爱恨原则L(:link)OV(:visited)E ,H(:hover)A(:active)TE.
7.line-height三种赋值方式有何区别?(带单位、纯数字、百分比)
带单位:px不用计算,em则会使元素以其父元素font-size值为参考来计算自己的行高
纯数字:把比例传递给后代,例如父级行高为1.5,子元素字体为18px,则子元素行高为1.5*18=27px
百分比:将计算后的值传递给后代
参考《line-height的理解》、《浅析line-height和vertical》,查看在线源码。
8.什么是外边距重叠?重叠的结果是什么?
外边距重叠就是margin-collapse。
在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。
折叠结果遵循下列计算规则:
a. 两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。
b. 两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。
c. 两个外边距一正一负时,折叠结果是两者的相加的和。
9.对BFC规范(块级格式化上下文:block formatting context)的理解?
W3C规范定义:
浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的BFC(块级格式上下文)。
在BFC中,盒子从顶端开始垂直地一个接一个地排列,两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中,两个相邻的块级盒子的垂直外边距会产生折叠。
在BFC中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说,则触碰到右边缘)。
10.li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
在写代码的时候,这样进行:
<li></li><li></li>
<li></li><
li></li>
11.如果需要手动写动画,你认为最小时间间隔是多久,为什么?
多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/60*1000ms = 16.7ms
网友评论