IT入门 > 面试题 >

一边固定宽度一边宽度自适应

可以使用 flex 布局 复制下面的 HTML 和 CSS 代码 用浏览器打开可以看到效果 div class = wrap div class = div1 / div div class = div2 / div / div .wrap { display : flex ; justify-content : space-between ;} .div1 { min-w...

什么时候用translate定位

translate() 是 transform 的一个值。改变 transform 或 opacity 不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。而改变绝对定位会触发重新布局，进而触发重绘...

响应式设计与自适应设计有何不同？

p响应式设计和自适应设计都以提高不同设备间的用户体验为目标，根据视窗大小、分辨率、使用环境和控制方式等参数进行优化调整。 响应式设计的适应性原则：网站应该凭借一份代码...

你了解 CSS Flex

flex 容器中存在两条轴， 横轴和纵轴， 容器中的每个单元称为 flex item。 在容器上可以设置 6 个属性： flex-direction flex-wrap flex-flow justify-content align-items align-content 注意：当设置 flex 布局...

你使用过哪些现有的 CSS 框架？你是如何改进它们

Bootstrap ： 更新周期缓慢。Bootstrap 4 已经处于 alpha 版本将近两年了。添加了在页面中广泛使用的微调按钮组件。 Semantic UI ：源代码结构使得自定义主题很难理解。非常规主题系统的使用...

box-sizing:border-box会产生怎样的效果？

元素默认应用了 box-sizing: content-box ，元素的宽高只会决定内容（content）的大小。 box-sizing: border-box 改变计算元素 width 和 height 的方式， border 和 padding 的大小也将计算在内。 元素的...

说说你对盒模型的理解， 浏览器怎么使用不同的

CSS 盒模型描述了以文档树中的元素而生成的矩形框，并根据排版模式进行布局。每个盒子都有一个内容区域（例如文本，图像等）以及周围可选的 padding 、 border 和 margin 区域。 CSS 盒模...

.对于你使用过的 CSS 预处理，说说喜欢和不喜欢

喜欢： - 提高 CSS 可维护性。- 易于编写嵌套选择器。- 引入变量，增添主题功能。可以在不同的项目中共享主题文件。- 通过混合（Mixins）生成重复的 CSS。- Less 用 JavaScript 实现，与 N...

编写高效的 CSS 应该注意什么？

首先 ，浏览器从最右边的选择器，即关键选择器（key selector），向左依次匹配。根据关键选择器，浏览器从 DOM 中筛选出元素 然后 向上遍历被选元素的父元素，判断是否匹配。选择器...

除了screen你还能说出一个 @media 属性的例子吗？

- all 适用于所有设备。 - print 为了加载合适的文档到当前使用的可视窗口. 需要提前咨询 paged media（媒体屏幕尺寸）, 以满足个别设备网页尺寸不匹配等问题。 - screen 主要适用于彩色的...