HTML&CSS常见问题整理(八)

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

原文地址:https://www.cnblogs.com/shireyhu/p/7852639.html