testmycss

CSS

CSS属性

  • CSS中定位的方式有哪些?
  • position的值relative和absolute是相对于谁进行定位的?
  • absolute 的 containing block 计算方式跟正常流有什么不同?
  • 设置元素浮动后，该元素的display值是多少？
  • 清除浮动的⼏种⽅式，各⾃的优缺点
  • 浮动元素 —— 怎么使用它们、它们有什么问题以及怎么解决这些问题。
  • position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？
  • display有哪些值？说明他们的作用。
  • display:none和visibility:hidden的区别？
  • display、float、position的关系
  • ⾏内元素float left后是否变为块级元素？
  • display有哪些值？说明他们的作⽤
  • CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？
  • CSS中link和@import的区别是？
  • link 与 @import 的区别
  • CSS3有哪些新特性？
  • 请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？
  • CSS3新增伪类有哪些？
  • before 和 after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。
  • CSS 的“伪类”和“伪元素”有什么区别？请举例伪元素的几种应用场景。
  • box-sizing；border-box是怎么回事?
  • margin的上下左右四个数值？什么原理？
  • margin和padding分别适合什么场景使用？
  • CSS旋转属性怎么用？transform 有哪些用法
  • 你对line-height是如何理解的？
  • css样式（选择器）的优先级
  • ⾃定义字体的使⽤场景
  • 如何美化CheckBox
  • font-style属性可以让它赋值为“oblique” oblique是什么意思？

CSS布局布局的思路

  • CSS哪些属性脱离文档流
  • div+css的布局较table布局有什么优点？
  • 如何居中div？
  • 请列举 CSS 中用于隐藏元素的两个属性？两者的差异？
  • 三栏布局，中间自适应
  • 元素竖向的百分比设定是相对于容器的高度吗？
  • 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
  • 一个满屏 品 字布局 如何设计?
  • ⼏种常⻅的CSS布局
  • CSS ⾃适应布局
  • 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。
  • iframe如何实现自适应宽高
  • 写一段CSS让图片（未知大小)水平垂直居中
  • DICV水平和垂直居中问题，兼容低版本和移动端；
  • 媒体查询 media query 适配布局的用法
  • 如何垂直居中⼀个浮动元素？
  • CSS 左边定宽，右边⾃适应⽅案
  • CSS 左右两边定宽，中间⾃适应
  • CSS 左右居中
  • CSS 上下垂直居中
  • CSS 盒模型
  • display inline-block 什么时候会显示间隙？
  • CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？
  • 三角形怎么画
  • 只有一个DIV，怎么实现双大于号那种指针
  • 用纯CSS创建一个三角形的原理是什么？
  • html5 CSS3画小米logo（注意透明度问题）
  • 如何修改chrome记住密码后自动填充表单的黄色背景?
  • 全屏滚动的原理是什么？用到了CSS的那些属性？
  • 视差滚动效果，如何给每页做不同的动画？
  • 如果需要⼿动写动画，你认为最⼩时间间隔是多久，为什么？

性能优化提高效率

  • 为什么说position absolute 跟float 影响性能？
  • 让一个元素消失可以用什么方法？除了CSS还有其他方法吗？哪个效率高？
  • JS为什么会放在下面，CSS为什么放在上面
  • 什么是FOUC（无样式内容闪烁）？如何来避免FOUC？
  • style标签写在body后与body前有什么区别？
  • CSS优化、提高性能的方法有哪些？
  • 哪些地方会出现CSS阻塞？哪些地方会出现JS阻塞？
  • 在⽹⻚中的应该使⽤奇数还是偶数的字体？为什么呢？
  • 让页面里的字体变清晰，变细用CSS怎么做？

Bug解决解决一些问题

  • position:fixed;在android下无效怎么处理？
  • 浮动元素引起的问题和解决办法
  • 请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式
  • inline-block边距问题，有4px的边距；怎么解决？
  • li与li之间有看不见的空白间隔是什么原因引起的？
  • CSS的浏览器兼容性（谷歌12px和不同浏览器的margin和padding,img下面有空白），原因，解决方法是什么？
  • 常用的CSS hack有哪些？
  • IE6的兼容问题，如何解决？比如双倍margin
  • 怎么让Chrome支持小于12px 的文字？
  • overflow scroll时不能平滑滚动的问题怎么处理？

原理/思路CSS的一些原理的东西

  • 解释下浮动和它的工作原理？
  • 引入样式表CSS的方式有几种？分别是什么？优先级有什么不同
  • CSS权重优先级是如何计算的？
  • CSS不同选择器的权重(CSS层叠的规则)
  • 浏览器是怎样解析CSS选择器的？
  • CSS定义的权重
  • 解释下CSS sprites，以及您要如何在页面或网站中使用它
  • css sprite是什么,有什么优缺点
  • 为什么要初始化CSS样式？
  • 二级菜单的实现方法
  • 俄罗斯方块的旋转问题
  • 请让页面中的一个元素（10px*10px）围绕坐标(200, 300) 做圆周运动
  • 如果需要手动写动画，你认为最小时间间隔是多久，为什么？
  • 在网页中的应该使用奇数还是偶数的字体？为什么呢？
  • 在 CSS 样式中常使用 px、em 两种长度单位，各有什么优劣，在表现上有什么区别？
  • 使用 CSS 预处理器吗？喜欢那个？
  • 抽离样式模块怎么写，说出思路，有无实践经验？
  • base64有什么好处，base64有什么缺点？
  • base64的原理及优缺点
  • base64 的使⽤
  • 图片格式的问题，png色彩问题
  • png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
  • PNG\GIF\JPG的区别及如何选

盒子模型盒子相关的那些事

  • CSS的盒子模型有几种？
  • 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？IE8以下版本的浏览器中盒子模型有什么不同？
  • 说说盒子模型
  • 对BFC的规范的理解？
  • 对BFC规范(块级格式化上下文：block formatting context)的理解？
  • 如何创建块级格式化上下⽂(block formatting context),BFC有什么⽤

其他

  • 介绍⼀下标准的CSS的盒⼦模型？低版本IE的盒⼦模型有什么不同的？
  • ::before 和 :after中双冒号和单冒号 有什么区别？
  • CSS合并⽅法
  • 列出你所知道可以改变⻚⾯布局的属性
  • CSS在性能优化⽅⾯的实践
  • CSS3动画（简单动画的实现，如旋转等）
  • stylus/sass/less区别
  • postcss的作⽤
  • 伪类和伪元素的区别
  • 请⽤CSS写⼀个简单的幻灯⽚效果⻚⾯
  • 什么是外边距重叠？重叠的结果是什么？
  • rgba()和opacity的透明效果有什么不同？
  • css中可以让⽂字在垂直和⽔平⽅向上重叠的两个属性是什么？
  • CSS BFC、IFC、GFC、FF