141.为什么要初始化CSS样式。
主要考虑对标签的默认样式的理解
*因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,,如果没对CSS初始化往往会出现浏览器之间的页面显示差异
*初始化CSS样式主要是提高编码质量,如果不初始化整个页面做完很糟糕,重复的css样式很多。
去掉标签的默认样式如:margin,padding,其他浏览器默认解析字体大小字体设置
142.absolute的container block(容器块)计算方式跟正常流有什么不同?
*若此元素为inline元素,则container block为能够包含这个元素生成的第一个和最后一个inline box的padding box(除margin,border外的区域)的最小矩形
*否则,则由这个祖先元素的padding box组成
如果都找不到,则为initial containing block;
补充:
*static(默认的)/relative:简单来说就是它的父元素的内容框(即去掉padding的部分)
*absolute:向上找最近的定位为absolute/relative的元素
*fixed:它的containing block一律为根元素(html/body),根元素也是initial containing block
143.对BFC规范的理解?
144.CSS定义的权重?(优先级往前翻)
145.解释下浮动和它的工作原理?清除浮动的技巧(93)
146.CSS优化、提高性能的方法有哪些?
147.浏览器是如何解析CSS选择器的?
浏览器解析CSS选择器的方式是从右到左
148.在网页中的应该使用奇数还是偶数的字体?为什么?
都是使用偶数,如果在网站里面使用的奇数字体,文字在显示的时候不是很美观
149.margin和padding分别适合什么场景使用?
margin是设置元素外边距的属性,W3C官方解释:围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用margin属性,这个属性接受任何长度单位、百分数值甚至负值。
padding是设置元素内边距的属性,W3C官方解释为:元素的内边距在边框和内容区之间,控制该区域最简单的属性是padding属性,CSS padding属性定义元素边框与元素内容之间的空白区域。
上下两个元素之间的间距使用margin合适。
padding的施工时针对当前设置元素的内边距。
注意:在项目里面能用padding搞定的坚决不适用margin。
150.如何修改chrome记住面貌后自动填充表单的黄色背景?
通过审查元素可以看到这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性。
151.设置元素浮动后,该元素的display值是多少?(自动变成display:block)
行元素设置浮动:具备了(display:block属性能设置宽高)
块元素设置浮动:具备了(display:block属性能在一行显示)
152.怎么让Chrome支持小于12px的文字?
Chrome中文界面下默然会将小于12px的文本强制按照12px显示,可通过加入CSS属性-webkit-text-size-adjust:none;解决
浏览器默认的margin和padding不同,解决方案是加一个全局的*{margin:0;padding:0;}
,现在这个方法用的少了,需要清晰知道每个元素的默认样式来统一。
153.让页面里的自已变清晰,变细用css怎么做?
{-webkit-font-smoothing:antialiased;}
154.font-style属性可以让它赋值为“oblique”,oblique是什么意思?
浏览器会显示一个倾斜的字体样式(比较少使用oblique)
在项目中使用italic比较多一点
155.position:fixed;在android下无效怎么处理
使用js处理判断当前设备是否是android,如果是则添加监听当前页面滚动情况,设置position:absolute;不断地改变top值。
156.如果需要手动写动画,你认为最小时间间隔是多久,为什么?(阿里)
多数显示器默认频率是60HZ,即一秒刷新60次,所以理论上最小间隔使1/60*1000ms=16.7ms
157.display:inline-block;什么时候会显示间隙?(携程)
移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing
158.浅谈一下怎么处理浏览器的兼容性问题
合理化HTML结构、简洁化css属性:html结构合理规范明了,很大程度上避免了兼容问题,css要尽量写的简单有效,特效用javascript来做,很多时候别用css伪类来实现,针对比较特殊的用css hack处理。
159.浏览器标准模式与怪异模式之间的区别是什么?
160.css hack知道哪些?
由于不同的浏览器,甚至同一浏览器的不同版本对CSS的解析认识不一样,导致生成的页面效果不一致,写出针对不同浏览器CSS code就称为CSS hack。
color:red;只有ie6生效(ie6能识别下划线“”和星号“*”)
color:trd;ie7能识别星号“”
*+html.class{}ie7能识别
在标准模式中:
“-”减号是ie6专有的hack
“9"IE6/IE7/IE8/IE9/IE10都生效
“ "IE8/IE9/IE10都生效,是IE8/9/10的hack
“9 "IE9/IE10都生效,是IE9/IE10的hack