前端面试笔记 - css

栏目: CSS · 发布时间: 5年前

内容简介:id唯一,class可以多个restting: 移除网页的所有默认样式normalizing: 修复跨浏览器的一致性,解决不同浏览器的显示问题。

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;

设置bfc

overflow: 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 block

flex最新的弹性布局

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 标准规格吗?

FLEX

align-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,或反之的理由?为什么?


以上所述就是小编给大家介绍的《前端面试笔记 - css》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

必然

必然

凯文·凯利 (Kevin Kelly) / 周峰、董理、金阳 / 译言·东西文库/电子工业出版社 / 2016-1-1 / 58

《必然》的作者凯文·凯利,被称为“硅谷精神之父”和“世界互联网教父”。前两部《失控》和《科技想要什么》在中国出版后,引起巨大反响。书中凯文·凯利对十二种必然的科技力量加以详细的阐述,并描绘出未来三十年这些趋势如何形成合力指引我们前行的方向。 作者凯文·凯利基于过往从业经历和对未来趋势的敏锐观察对十二个关键词“形成”“知化”“流动”“屏读”“使用”“共享”“过滤”“重混”“互动”“追踪”“提问......一起来看看 《必然》 这本书的介绍吧!

html转js在线工具
html转js在线工具

html转js在线工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具