网站布局总结

---

作者：叶茂；
标签: css兼容性

---

知识点

flex布局的问题

1.渐进增强的布局思路

渐进增强简介：在低版本浏览器中满足最基本的浏览需求，在高版本的浏览器中表现更完美的呈现效果。
优雅降级简介：首先使用高版本的css满足高版本浏览器的呈现，再使用hack等技术完善低版本浏览器的呈现。

• border-radius、box-shadow等直接使用就可以达到渐进增强的效果。在低版本浏览器中这些属性不会生效，在高版本浏览器中生效表现更好的效果。

• flex布局与这些不同，有一个小的知识点：父元素display:flex后,子元素的float、clear、vertical-align属性都会失效，并且布局不会受到子元素display:inline-block的影响。

2. 不使用弹性布局

用较老的css写法可以在各版本浏览器表现相同的效果。
不使用flex的时候横向布局用display:inline-block还是float:left？

• 用display:inline-block;实现横向布局可以避免父元素高度不被撑开。但是元素之间的空格会生效，影响精确的布局，使用float元素之间的空格则会被忽略。
• 单行横向布局的时候，父元素使用white-space:nowrap，子元素display:inline-block可以较方便的实现横向布局。
• 子元素浮动，父元素使用overflow:hidden,快速恢复高度。
• 父元素设置margin-right为负值，可以不用去除最后一个子元素的margin-right，可以在多行横向布局时方便的实现精确横向布局。

// display:inline-block的空格不会被忽略


    

        
1
        
2
        
3
        
4
        
5
    

inline-block元素之间的空格不会被忽略

    

        

        

        

        

        
 //最后的子元素不用取消margin-right
    

float+margin负值实现横向布局

IE8的兼容问题

• 不支持flex布局，border-radius等css3新属性。
• 不支持:nth-chlid(n)、:last-child选择器，但是支持:first-child
• 不支持background简写,scss中有以下写法可以简化代码。

.demo {
    background: {
        color: #fff;
        image: url("./img.png");
        repeat: no-repeat;
        position: center;
        size: 100%;
    }
}

• 不支持css3推荐的伪元素选择器用双引号::after,支持单引号:after

适用场景

1. 不支持css3新属性的浏览器满足基本的浏览需求时，高级浏览器表现更好效果，使用弹性盒布局。
2. 对于要求大部分浏览器表现相同效果，使用上述方案代替弹性盒布局，并注意IE8的css属性兼容性。

多行文本溢出显示省略号。

.description {
    // 多行文本溢出显示省略号方案
    display: -webkit-box;

    width: 100px;

    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

适用场景

文本内容长度不确定，文本超出宽度后换行，超出高度后显示省略号。