每日两道前端面试题20190331

xcold 发布于2019-08-30 15:43 / 1806人阅读

摘要：如何利用和正负相消实现多列等高目前我用过最好的就是这个方法了，浏览器兼容性最好最简便。

CSS如何利用padding和margin正负相消实现多列等高？

目前我用过最好的就是这个方法了，浏览器兼容性最好最简便。
首先把列的padding-bottom设为一个足够大的值，再把列的margin-bottom设一个与前面的padding-bottom的正值相抵消的负值，父容器设置超出隐藏，这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度就会被撑到它里面最高那列的高度，其他比这列矮的列则会用它们的padding-bottom来补偿这一部分的高度差，因为背景是可以用padding占用空间里的，而且边框是会跟随padding变化的。

没有正负相消时，出来的样式是这样的：



    
        我是left
        我是right
        

        

        现在我的高度比left高，所以出现了脱节现象

效果如下：

若使用等高布局：



    
        我是left
        我是right
        

        

        现在我的高度比left高，所以出现了脱节现象

使用了等高布局，效果如下：

经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？

1.png24的图片在IE6上会出现背景
解决方案是做成png8.

2.浏览器默认的margin和padding不同
解决方案：加一个全局的*{margin:0;padding:0;}来统一.

3.IE6双边距bug:块属性标签float后，又有横行的margin情况下，在IE6设置下的margin会比较大
例如：以下代码在IE6就会在产生双倍距离

#box{
    float:left;
    width:10px;
    margin:0 0 0 10px;
}

这种情况下在IE中会产生双倍的距离，解决方案是在有float的标签中样式控制加入_display:inline,将其转换为行内属性（_这个符号只有在IE6下会识别）
其他的识别规则：

.bb{
    background-color:red;
    background-color:#00deff9;/*IE6、7、8识别*/
    +background-color:#a200ff;/*IE6、7识别*/
      _background-color:#1e0bd1;/*IE6识别*/
}

4.IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性
在firefox中只可以使用getAttribute()来获得自定义属性
所以获得自定义属性一律使用getAttribute().

5.IE下，event会有x,y属性，但是没有pageX和pageY属性，对于firebox有pageX和pageY熟悉，但是没有x,y属性

6.chrome中文界面下默认会将小于12px的文本强制按照12px显示
解决方案：css属性中-webkit-text-size-adjust:none;解决.

7.超链接访问后hover样式不出现
解决方案：被点击访问过的超链接样式不再具有hover和active，这时候要注意CSS顺序即可解决：
L-V-H-A a:link{} a:visited{} a:hover{} a:active{}
参考链接

超融合服务器专线服务面试题栈面试题笔试面试题面试题内容

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116028.html

CSS哪些属性可以继承哪些不可继承与 CSS优先级算法

摘要：哪些属性可以继承哪些不可继承可继承属性字体系列属性组合字体规定元素的字体系列设置字体的粗细设置字体的尺寸定义字体的风格偏大或偏小的字体文本系列属性文本缩进文本水平对刘行高增加或减少单词间的空白增加或减少字符间的空白控制 CSS哪些属性可以继承哪些不可继承可继承属性：1.字体系列属性font:组合字体font-family:规定元素的字体系列font-weight:设置字体的粗细fon...

lemanli 2019-08-30 15:56 评论0 收藏0
分享两道大厂前端面试题

摘要：示例输入输出示例输入输出第一种方法滑动窗口解法滑动窗口两个边界情况第二种方法位运算解法位运算头条财经部门一面二维数组的回形遍历这是头条财经部门一面的一道题记住遍历过的索引更多前端算法题，参见算法仓库。 1. 百度百家号一面面完回来搜素，才发现这道题其实是LeetCode540。 540 medium 有序数组中的单一元素给定一个只包含整数的有序数组，每个元素都会出现两次，唯有一个数...

whjin 2019-08-26 14:04 评论0 收藏0
程序语言

摘要：一面应该还问了其他内容，但是两次面试多线程面试问题和答案采访中，我们通常会遇到两个主题采集问题和多线程面试问题。多线程是关于并发和线程的。我们正在共享重要的多线程面试问题和答案。。 2016 年末，腾讯，百度，华为，搜狗和滴滴面试题汇总 2016 年未，腾讯，百度，华为，搜狗和滴滴面试题汇总【码农每日一题】Java 内部类(Part 2)相关面试题关注一下嘛，又不让你背锅！问：Ja...

mtunique 2019-08-15 13:53 评论0 收藏0
程序语言

摘要：一面应该还问了其他内容，但是两次面试多线程面试问题和答案采访中，我们通常会遇到两个主题采集问题和多线程面试问题。多线程是关于并发和线程的。我们正在共享重要的多线程面试问题和答案。。 2016 年末，腾讯，百度，华为，搜狗和滴滴面试题汇总 2016 年未，腾讯，百度，华为，搜狗和滴滴面试题汇总【码农每日一题】Java 内部类(Part 2)相关面试题关注一下嘛，又不让你背锅！问：Ja...

stefan 2019-08-26 11:31 评论0 收藏0
CSS3新增的伪类有哪些与居中div的多种方法

摘要：新增伪类有那些选择属于其父元素的首个元素选择属于其父元素的最后元素属于父元素的特定类型的唯一子元素属于父元素的唯一子元素的每个元素选择父元素的第二个子元素在元素之前添加内容在元素之后添加内容已启用控制表单为禁用状态，不可点击 CSS3新增伪类有那些？ p:first-of-type:选择属于其父元素的首个元素 p:last-of-type:选择属于其父元素的最后元素 p:only-o...

mcterry 2019-08-30 15:56 评论0 收藏0