CSS基础面试题,快来查漏补缺 (3)

CSS基础面试题,快来查漏补缺

注意:根元素()所在的包含块是一个被称为初始包含块的矩形。

元素竖向的百分比设定是相对于容器的高度吗?

如果某些属性被赋予一个百分值的话,它的计算值是由这个元素的包含块计算而来的。这些属性包括盒模型属性和偏移属性:

height、top、bottom:通过包含块的 height 的值。如果包含块的 height 值会根据它的内容变化,而且包含块的 position 属性的值被赋予 relative 或 static ,那么,这些值的计算值为 auto。

width、left、right、padding、margin 这些属性由包含块的 width 属性的值来计算它的百分值。
这里特别强调padding和margin讲的是上下左右四个都是根据包含块的width

▶BFC

可见格式化模型BFC与应用

对BFC规范(块级格式化上下文:block formatting context)的理解?

BFC指的是块级格式化上下文,简单的来说,BFC就是创建一个div盒子或者给已存在的盒子激活BFC,盒子内部的元素布局不影响盒子外部的元素。也就是所谓的相互隔绝,互不影响。

常见的创建BFC方式

float:none以外的属性值。如:left 、 right

overflow:visible以外的属性值。如:hidden、auto 、 scroll

position属性值为:absolute、fixed(只有这两个可以)

dispaly属性值为:inline-block、 flex、 inline-flex、 table-cell、 table-caption 反正block不行就是了

BFC应用

详细解决方案戳上面给的链接。

解决margin重叠

解决使用float时浮动元素和非浮动元素重叠(也是一种清除浮动的方法啦)

解决使用float时容器高度塌陷

▶中插小点 你对line-height的理解?

line-height指的是行盒子的总高度,更通俗的叫法是行间距。行盒子的整体行高减去font-size,得到的值平分,就是里面文本的上下空白位置。

可以给line-height设置像素值、百分比值或em值,但要注意body元素的所有子元素都会继承line-heoght的计算值,但无单位的值就不会这样。因此,设置,line-height:1.5,那么子元素继承的是一个系数,永远与自己的font-size成比例。一般取值在1.2~1.5范围内。

将行高设置为height的值,可以实现文本的垂直居中。

手动写动画,最小时间间隔?

17ms,红宝书原话:

大多数电脑显示器的刷新频率是60HZ,大概相当于每秒重绘60次。大多数浏览器都会对重绘操作加以限制,不超过显示器的重绘频率,因为即使超过那个频率用户体验也不会有提升。因此,最平滑动画的最佳循环间隔是1000ms/60,大概相当于17ms。以这个循环间隔重绘的动画是最平滑的,因为这个速度是最接近浏览器的最高限速。为了适应17ms的循环间隔,多重动画可能需要加以节制,以便不会完成太快。

网页中应该使用奇数还是偶数的字体?

偶数。

相对来说偶数字号比较容易和页面中其他部分的字号构成一个比例关系。

低版本的浏览器ie6会把奇数字体强制转化为偶数,即13px渲染为14px。

Windows 自带的点阵宋体(中易宋体)从 Vista 开始只提供 12、14、16 px 这三个大小的点阵,而 13、15、17 px 时用的是小一号的点阵(即每个字占的空间大了 1 px,但点阵没变),于是略显稀疏。

常见的兼容性问题

CSDN浏览器兼容问题,这个人写的很全。我下面列几个我能记住的,

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpddpy.html