【自学笔记】前端面试题之CSS（部分HTML）

以下摘抄自掘金

http://gold.xitu.io/entry/5781b8db0a2b58005765e628/promote?utm_source=baidu&utm_medium=keyword&utm_content=frontend_interview&utm_campaign=q3_search

因为这些题目没有答案，就自己搜了搜总结了一下，有错还请指出

CSS优化、提高性能的方法有哪些？
1.发布前压缩CSS，减少数据传输量。 2.合并属性，如margine-left:5px;margine-top:10px 这个就可以合并成一条的。 3.合理设计CSS 布局，注意复用样式，减少渲染上花的时间。class和ID的选择，少用*这种全局匹配，合理设置基本样式（如设置table{}）提高复用。 4.减少低效代码的使用，如滤镜，express表达式，!import引入。 5.其它技术，如CSS SPRITE等。
浏览器是怎样解析CSS选择器的？
从右往左解析，从左往右解析大部分解析会浪费到匹配失败上，而从右往左解析则在第一步就会淘汰很多叶子节点

详见 https://segmentfault.com/q/1010000000713509
在网页中的应该使用奇数还是偶数的字体？为什么呢？
一、UI设计师的原因多数设计师用的设计软件（如：ps）大多数都是偶数，所以前端工程师一般都是用偶数字体二、浏览器的原因其一是为了迁就ie6，万恶的ie6会把定义为13px的字渲染成14px，你可以写个页面试试还有一个原因是，偶数宽的汉字，比如12px宽的汉字，去掉1像素的间距，填充了像素的实际宽是11px，这样汉字的中竖线左右是平分的，以“中”这个字为例，在12像素时，竖线在中间，左右各5像素，显得均衡。其二像谷歌一些比较流行的浏览器一般会有个默认的最小字体，而且对奇数字体渲染的不太好看三、实际应用偶数字号相对更容易和web设计的其他部分构成比例关系。比如：当我用了14px的正文字号，我可能会在一些地方用14×0.5=7px的margin，在另一些地方用14×1.5=21px 的标题字号。 Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供12、14、16px这三个大小的点阵，而13、15、17px时用的是小一号的点阵（即每个字占的空间大了1px，但点阵没变），于是略显稀疏。
margin和padding分别适合什么场景使用？
◆何时应当使用margin 需要在border外侧添加空白时。空白处不需要背景（色）时。上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。 ◆何时应当时用padding 需要在border内测添加空白时。空白处需要背景（色）时。上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。 ◆浏览器兼容性问题在IE5.x、IE6中，为float的盒子指定margin时，左侧margin可能会变成两倍的宽度。通过改用padding或指定盒子为display:inline可以解决。
元素竖向的百分比设定是相对于容器的高度吗？
height的百分比是相对与高度的，但是对于margin-top、margin-bottom、padding-top、padding-bottom这些竖直方向的内外边距属性的百分比取值，参考的其实是容器的宽度而不是高低。
什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
响应式网站设计(Responsive Web design)的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。基本原理: 媒体查询 @media 兼容IE可以使用JS辅助一下来解决
全屏滚动的原理是什么？用到了CSS的那些属性？
图片轮播原理，只不过图片宽高100%、超出隐藏、调整比例适应屏幕大小,width,height,transitionTimingFunction,transitionDuration,transform,overflow
视差滚动效果，如何给每页做不同的动画？
【定义】所谓的视差滚动，就是在页面滚动过程中，多层次的元素进行不同程度的位移，带来立体的视差效果。还有很多的奇思妙想的展现方式，都是滚动页面触发的，也可称为视差滚动。视差滚动里面最基础的就是切换背景，这点其实一个CSS就满足了 background-attachment: fixed || scroll || local 默认是scroll，内容跟着背景走，而视差滚动页面里用fixed，背景相对页面固定而不跟内容滚动。
::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。伪元素由双冒号和伪元素名称组成。双冒号是在css3规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。提醒，如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全
如何修改chrome记住密码后自动填充表单的黄色背景 ?？
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; }
你对line-height是如何理解的？

http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html
直接贴地址了，确实有点复杂，认真耐心看

设置元素浮动后，该元素的display值是多少？
自动变成display:block
怎么让Chrome支持小于12px 的文字？

曾经：html{-webkit-text-size-adjust:none;}现在：
body,p{ margin:0; padding:0}
p{font-size:10px;}
span{-webkit-transform:scale(0.8); display:inline-block}

display:inline-block 什么时候会显示间隙？
移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing
overflow: scroll时不能平滑滚动的问题怎么处理？

http://www.zhangxinxu.com/wordpress/2015/01/css-page-scrollbar-toggle-center-no-jumping/ 还是贴。。。

style标签写在body后与body前有什么区别？
可以写到任何位置，有些css js的引用放body后边是为了先显示页面给用户，防止中间某个js css响应慢，用户会一直看着空白页面，它就有可能关掉不看了
png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

http://blog.csdn.net/playboyanta123/article/details/44655749 他能解释得比我清楚
简单说就是，png可以储存透明，完爆gif的地方在于失真小，没锯齿；劣势是不支持动画；png采用无损压缩，在多数情况下都可以保留图片里所有像素。PNG无损压缩算法，简单地说，就是把图片里出现的每一个颜色都记录下来。通过记录这些颜色相对应的值记录一张图片。jpg适用于摄影图片，以及色彩丰富的图片。它采用压缩算法，会对图片上每8px*8px的像素进行处理，通过强制渐变的方法来减小文件尺寸，因此无论选择的储存质量多高，还是会多多少少失真一些，但对于摄影之类的图片来说，jpg格式就会比png小很多了。

小图标，需要透明的用PNG。
照片，比较大的背景图用JPG。
gif，除非动图，其他容易失真。
WebP是一种有损压缩。相较编码JPEG文件，编码同样质量的WebP文件需要占用更多的计算资源。在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%美中不足的是，WebP格式图像的编码时间“比JPEG格式图像长8倍。

【自学笔记】前端面试题之CSS（部分HTML）相关推荐

前端面试题之CSS篇
前端面试题之CSS篇一.CSS基础 1. CSS选择器及其优先级 2. CSS中可继承与不可继承属性有哪些 3. display的属性值及其作用 4. display的block.inline和in ...
与歌谣通关前端面试题【CSS篇汇总目录】
我是歌谣放弃很容易但坚持一定很酷欢迎关注公众号小歌谣一起讨论前后端知识 CSS汇总 [CSS] [css] 圣杯布局和双飞翼布局的理解和区别,并用代码实现 [css] CSS3有哪些新增的特性 ...
前端面试题汇总CSS篇
转载自:https://www.cnblogs.com/zhangshuda/p/8465043.html 前端面试题 ----css篇 1.css盒模型有哪些及区别content-box borde ...
字节跳动前端面试题：CSS 基础
实战教程全栈技术精选好文注意:每道题前面出现的 (xx) 数字代表这道题出现的频次,此 CSS 基础是基于 30+ 篇前端面经整理出的问题和对应的回答.参考链接等.文章内容为拿到 Offer ...
前端面试题HTML+CSS
1.对WEB标准以及W3C的理解与认识标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被更多的用户所访问.内容能被 ...
面试题：高频前端面试题之CSS篇
目录一.CSS基础 1. CSS选择器及其优先级 2. CSS中可继承与不可继承属性有哪些 3. display的属性值及其作用 4. display的block.inline和inline-blo ...
34、CSS高频前端面试题之CSS基础
参考:https://juejin.cn/post/6905539198107942919 目录一.CSS基础 1. CSS选择器及其优先级 2.CSS中可继承与不可继承属性有哪些 2.1 无继承性 ...
前端面试题《CSS》
盒子模型,弹性盒子,两栏布局,三栏布局.flex布局盒子模型:由内外边距.边框.内容组成弹性盒子:当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式两栏.三栏布局,给父元 ...
前端面试题----html css
一阶段面试题集锦 1. rem em vw vw 百分比区别相同点: rem,em,vw,vh,vw属于前端开发除了px单位之外的另外几种单位取值:但是具体含义存在区别不同点: px:是像素单位 ...

【自学笔记】前端面试题之CSS（部分HTML）

【自学笔记】前端面试题之CSS（部分HTML）相关推荐

最新文章

热门文章