20210203 104道常见经典CSS面试题笔记(41-52)

最新推荐文章于 2022-07-19 23:15:00 发布

Twelve--

最新推荐文章于 2022-07-19 23:15:00 发布

阅读量223

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css 面试前端

本文链接：https://blog.youkuaiyun.com/weixin_43883485/article/details/113537749

CSS 专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了CSS中绝对定位元素的包含块计算方式、hasLayout属性的作用、百分比设定的参照对象、全屏滚动原理及实现方法、响应式设计概念与实现、视差滚动效果制作技巧、Chrome表单自动填充背景修改方法、小字号支持解决方案、字体清晰度调整方法、以及斜体样式区别等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

41 absolute的containingblock计算方式和正常流有什么不同？

内联元素也可以作为包含块所在的元素。
包含块所在的元素不是父块级元素，而是最近的position不为static的祖先元素或根元素。
边界是padding box而不是content box。

42 对于hasLayout的理解？

hasLayout是IE特有的一个属性，很多IE下的css bug都与其息息相关。在IE中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时，它负责对自己和可能的子孙元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。

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

如果是height的话，是相对于包含块的高度。
如果是padding或者margin竖直方向的属性则是相对于包含块的宽度。

44 全屏滚动的原理是什么？用到了CSS哪些属性？

原理:优点类似于轮播，整体元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，容器内的页面取当前可视区高度，同时容器的父级元素overflow属性值为hidden，通过更改容器可视区的位置来实现全屏滚动效果。主要是响应鼠标事件，而页面通过css的动画效果，进行移动。
overflow:hidden;transtion:all 1000 ms ease;

45 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式网站设计是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同屏幕尺寸做处理。
页面头部必须有 meta 声明的 viewport。

46 视差滚动效果，如何给每页做不同的动画？

视差滚动是指多层背景以下不同的速度移动，形成立体的运动效果，带来非常出色的视差体验。

47 如何修改chrome记住秘密后自动填充表单的黄色背景？

chrome表单自动填充后，input文本框的背景会变成黄色的，通过审查元素可以看到这是由于chrome会默认自动填充的input表单加上input:-webkit_autofill私有属性，然后对其赋予以下样式:

{
	background-color:rgb(250,255,189)!important;
	background-image:none!important;
	color:rgb(0,0,0)!important;
}

对chrome默认定义的样式使用important是不能提高优先级的，但是其他属性可以使用。
使用足够大的纯色内阴影来覆盖input输入框的黄色背景，处理如下:

input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{
	-webkit-box-shadow:000px 1000px white inset;
	border:1px solid #ccc !important;
}

48 怎么让chrome支持小于12px的文字？

在谷歌下css设置字体大小为12px及以下时，显示都是一样大小，都是默认12px。
解决办法:

可以使用webkit的内核-webkit-text-size-adjust的私有css属性来解决，只要加了-webkit-text-size-adjust:none；字体大小就不受限制了。但是chrome更新到24版本之后就不可以用了。所以高版本谷歌浏览器已经不再支持-webkit-text-size-adjust样式。
可以使用css3的transform缩放属性-webkit-transform:scale(0.5),注意-webkit-transform:scale(0.75)，收缩的是整个元素的大小，这时候，如果是内联元素，必须要将内联元素转换成块元素，可以使用display:block/inline-block。
使用图片:如果是内容固定不变的情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观。

49 让页面里的字体变清晰，变细用css怎么做？

webkit内核的私有属性:-webkit-font-smoothing，用于字体抗锯齿，使用后字体看起来会更清晰舒服。
在macos测试环境下设置-webkit-font-smoothing:antialiased但是这个属性仅仅是面向macos，其它操作系统设置后无效。

50 font-style属性中italic和oblique的区别？

italic和oblique这两个关键字都表示斜体的意思。
它们的区别在于，italic是使用当前字体的斜体字体，而oblique只是单纯地让字体倾斜。如果当前字体没有对应的斜体字体则退而求其次，解析为oblique，也就是单纯形状倾斜。

51 设备像素，css像素，设备独立像素，dpr，ppi之间的区别？

设备像素指的是物理像素，一般手机的分辨率指的是设备像素，一个设备的设备像素是不可变的。
css像素和设备独立像素是等价的，不管在何种分辨率的设备上，css像素大小应该是一致的，css像素是一个相对单位，它是相对于设备像素的，一个css像素的大小取决于页面缩放程度和dpr的大小。
dpr指的是设备像素和设备独立像素的比值，一般的pc屏幕，dpr=1.在iphone4时，苹果推出了retina屏幕，它的dpr为2，屏幕的缩放会改变dpr的值。
ppi指的是每英寸的物理像素的密度，ppi越大，屏幕的分辨率越大。

52 layout viewport，visual viewport和ideal viewport的区别？

如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱。所以这些浏览器就决定默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。ppk把这个浏览器默认的viewport叫做layout viewport。
layout viewport的宽度是大于浏览器可视区域的宽度的，所以还需要一个viewport来代表浏览器可视区域的大小。这个viewport叫做visual viewport。
ideal viewport是最适合移动设备的viewport，ideal viewport的宽度等于移动设备的屏幕宽度，只要在css中把某一元素的宽度设为ideal viewport的宽度，那么这个元素的宽度就是设备屏幕的宽度来。也就是宽度为100%的效果。ideal viewport的意义在于，无论在何种分辨率的屏幕下，那些针对ideal viewport而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美呈现给用户。