• 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

  • 相关阅读:
    event与WaitForSingleObject、MsgWaitForMultipleObjects等
    vc不包含MFC就不打印内存泄露?
    使用visual leak detector(vld)查找内存泄露
    C#里面中将字符串转为变量名
    如何编写nopCommerce插件
    object成员,不见了!
    NopCommerce 定制系列(一):增加 Sha256+Base64 加密
    c#中的二维数组与锯齿数组
    待搞清楚
    NopCommerce 2.5的部署
  • 原文地址:https://www.cnblogs.com/shireyhu/p/7852639.html
Copyright © 2020-2023  润新知