前端面试笔记 – css

40次阅读

共计 2036 个字符,预计需要花费 6 分钟才能阅读完成。

CSS 中类 (classes) 和 ID 的区别。
id 唯一,class 可以多个
请问 “resetting” 和 “normalizing” CSS 之间的区别?你会如何选择,为什么?
restting:移除网页的所有默认样式 normalizing:修复跨浏览器的一致性,解决不同浏览器的显示问题。
请解释浮动 (Floats) 及其工作原理。
float 包括 right,left,none; 设置该属性,这个元素会脱离文档流直到遇到包裹他的容器或者其他浮动元素
描述 z -index 和叠加上下文是如何形成的。
z-index 会设置元素在 Z 轴的位置,按照从高到底堆叠
请描述 BFC(Block Formatting Context) 及其如何工作。
bfc 是页面渲染的一部分。一个 bfc 就是一个整体,所有子元素都会在 bfc 里面渲染,而不会影响外面的元素。常见 bfc 为,根元素,float,postion 元素,或者设置了 overflow 的元素
列举不同的清除浮动的技巧,并指出它们各自适用的使用场景。
clear:both; 设置 bfcoverflow: hidden;height: auto;
请解释 CSS sprites,以及你要如何在页面或网站中实现它。
css sprites 是一个把众多小图片打包成一个大图以减少 http 请求。background: url(…) x-axis y-axis;
你最喜欢的图片替换方法是什么,你如何选择使用。
你会如何解决特定浏览器的样式问题?
如何为有功能限制的浏览器提供网页?
你会使用哪些技术和处理方法?
有哪些的隐藏内容的方法 (如果同时还要保证屏幕阅读器可用呢)?
你用过栅格系统 (grid system) 吗?如果使用过,你最喜欢哪种?
你用过媒体查询,或针对移动端的布局 /CSS 吗?
用过使用媒体查询截图特定分辨率的样式问题 media screen (width:){
}
你熟悉 SVG 样式的书写吗?
如何优化网页的打印样式?
在书写高效 CSS 时会有哪些问题需要考虑?
优先使用类选择器和 ID 选择器避免使用其他选择规则,如 tag 避免使用后代选择器
使用 CSS 预处理器的优缺点有哪些?
可以方便的实现变量,运算,继承等高级特性需要编译 不能直接使用
请描述你曾经使用过的 CSS 预处理器的优缺点。
scss
如果设计中使用了非标准的字体,你该如何去实现?
使用 @font-face,和 @import
请解释浏览器是如何判断元素是否匹配某个 CSS 选择器?
从右到左读取,先判断子类,后判断父类
请描述伪元素 (pseudo-elements) 及其用途。
在不影响原有 html 的情况下,加入新的样式
请解释你对盒模型的理解,以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。

margin border padding content
box-sizing: border-box; width 包括 border padding
box-sizing: content-box; width 只包括内容

请解释 * {box-sizing: border-box;} 的作用, 并且说明使用它有什么好处?
所有元素,不包括伪元素的合模型为 border-box
请罗列出你所知道的 display 属性的全部值
flex inline inline-block blockflex 最新的弹性布局 inline 内联元素 inline-block 可以设置宽高的内联元素 block 块元素,独占一行
请解释 inline 和 inline-block 的区别?
inline 设置宽高,padding margin top bottom 都无效
请解释 relative、fixed、absolute 和 static 元素的区别
relatvie 相对自身 fixed 相对屏幕 absolute 相对祖先元素中第一个不为 static 的位置 static 默认
CSS 中字母 ‘C’ 的意思是叠层 (Cascading)。请问在确定样式的过程中优先级是如何决定的 (请举例)?如何有效使用此系统?
ID > class, psuedo-class > element, psudo-element
你在开发或生产环境中使用过哪些 CSS 框架?你觉得应该如何改善他们?
BOOTSTRAP
请问你有尝试过 CSS Flexbox 或者 Grid 标准规格吗?
FLEXalign-item: 交叉轴排布 justiy-content: 主轴排布 flex: 放大 缩小 自动; 设置权重 flex-direction: 设置方向
为什么响应式设计 (responsive design) 和自适应设计 (adaptive design) 不同?
响应式 只有一种布局,根据屏幕自动改变自适应 pc,平板,手机都有各自的布局
你有兼容 retina 屏幕的经历吗?如果有,在什么地方使用了何种技术?
媒体查询 @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {…}
请问为何要使用 translate() 而非 absolute positioning,或反之的理由?为什么?

正文完
 0