前端布局总结（持续更新）

Yuanf 发布于2019-08-30 15:53 / 1889人阅读

摘要：一水平居中直接父集设置优点兼容性好，甚至可以兼容缺点里的文字也会水平居中，可以在添加还原使用定位优点居中元素不会对其他的产生影响缺点属于内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀弹性布局另一种写法缺点低版本浏览器不支持

一.水平居中

(1)直接父集设置text-align:center;

.parent{text-align:center;}

    DEMO

优点：兼容性好，甚至可以兼容ie6、ie7
缺点：child里的文字也会水平居中，可以在.child添加text-align:left;还原

（2）使用定位absolute+transform
.parent {position:relative;}
.child {position:absolute;left:50%;transform:translateX(-50%);}
优点：居中元素不会对其他的产生影响
缺点：transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀
（3）弹性布局
.parent {display:flex;}
.child {margin:0 auto;}
另一种写法
.parent {display:flex;justify-content:center;}
缺点：低版本浏览器(ie6 ie7 ie8)不支持

（4）表格
.child {display:table;margin:0 auto;}
缺点：不支持ie6、ie7,将div换成table

二.垂直居中

（1）表格table-cell+vertical-align
.parent {display:table-cell;vertical-align:middle;}
ie8以上均支持

（2）定位absolute+transform
.parent {position:relative;}
.child {position:absolute;top:50%;transform:translateY(-50%);}
缺点：transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀

（3）弹性布局flex+align-items
.parent {display:flex;align-items:center;}
缺点：兼容性存在一定问题

三.水平垂直居中

（1）表格
.parent {text-align:center;display:table-cell;vertical-align:middle;}
.child {display:inline-block;}
优点：兼容性较好
（2）定位
.child {position:absolute;left:50%;top:50%;transform:tranplate(-50%,-50%);}
缺点：兼容性存在一定问题
（3）弹性布局
.parent {display:flex;justify-content:center;align-items:center;}
缺点：兼容性存在一定问题

四.多列布局定宽+自适应

（1）浮动


    
        left
    
    
        right
        right
    


.left {
   float:left;
   width:100px;
}
.right {
    overflow:hidden;
}
.clear-fix::after {
   content:""; 
   display: block; 
   clear:both; 
}

另种写法（左边居中）

.left {
   float:left;
   width:100px;
}

缺点：记得清除浮动不支持ie6

（2）表格

.parent {
    display:table;
    width:100%;
    table-layout:fixed;
}
.left {
    width:100px;
}
.right,.left {
    display:table-cell; 
}

（3）弹性布局

.parent {
    display:flex;
}
.left {
    width:100px;
}
.right {
    flex:1;
}

五.等分布局

（1）浮动


    1
    2
    3
    4        


.parent{
    margin-left: -20px;
}
.column{
    float: left;
    width: 25%;
    padding-left: 20px;
    box-sizing: border-box;
}
（2）弹性布局
.parent{
    display: flex;
}
.column{
    flex: 1;
}
.column+.column{
    margin-left:20px;
}

六.rem布局（1套代码解决2端）

七.浮动布局(具体)

1.整体给宽高 margin：0 auto
2.局部给宽高 margin：0 auto
3.分别每个给宽高和浮动（有图片的话，则给图片设置display:block;margin:0 auto;）

.custom-list{
    width:100%;
    height:6rem;
    margin-top:1rem;
    margin:0 auto;
}

.custom-line{
    width:17.2rem;
    height:2.7rem;
    margin:1rem auto 0 auto;
}

.custom-line>div {
    width: 3.44rem;
    height:100%;
    float:left;
}

.pic{
    width:1.5rem;
    height:1.5rem;
    display:block;
    margin:0 auto;
}
在要浮动部位的父集上增加class="clear-fix"
.clear-fix::after {
   content:""; 
   display: block; 
   clear:both; 
}


        你就是帅
        
            
                
                    
                
                你
            
            
                
                    
                
                就
            
            
                
                    
                
                是
            
            
                
                    
                
                帅

八.不等宽高布局

 
                不等宽高布局
                

.free-line {
    margin-top: 1rem;
    width: 17.2rem;
    height: 2.49rem;
    margin: 1rem auto 0 auto;
    font-size: 0;
}

.free-line>div {
    height: 100%;
    display: inline-block;
    vertical-align: top;
}

.indicate {
    width: 3.07rem;
    background-color: #fff;
    color: #333;
    position: relative;
}
.indicate>img {
 width: 1rem;
 height: 1rem;
 position: absolute;
 bottom: 40%;
 left: 50%;
 transform: translate(-50%,0);
 
}
.free-arrow {
    width: 1.64rem;
    position: relative;
    height: 100%;
}
.free-arrow>img {
    position: absolute;
    width: 0.34rem;
    height: 0.63rem;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

专线服务服务器托管持续增长可持续持续改进持续学习

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

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

前端布局总结（持续更新）

摘要：一水平居中直接父集设置优点兼容性好，甚至可以兼容缺点里的文字也会水平居中，可以在添加还原使用定位优点居中元素不会对其他的产生影响缺点属于内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀弹性布局另一种写法缺点低版本浏览器不支持一.水平居中 (1)直接父集设置text-align:center; .parent{text-align:center;} DEMO 优点...

Baoyuan 2019-08-05 13:32 评论0 收藏0
优秀文章收藏（慢慢消化）持续更新~

摘要：整理收藏一些优秀的文章及大佬博客留着慢慢学习原文协作规范中文技术文档协作规范阮一峰编程风格凹凸实验室前端代码规范风格指南这一次，彻底弄懂执行机制一次弄懂彻底解决此类面试问题浏览器与的事件循环有何区别笔试题事件循环机制异步编程理解的异步 better-learning 整理收藏一些优秀的文章及大佬博客留着慢慢学习原文:https://www.ahwgs.cn/youxiuwenzhan...

JeOam 2019-08-23 18:24 评论0 收藏0
前端面试题总结——HTML(持续更新中)

摘要：等知名网站已经开始测试并使用格式。页面加载速度更快结构化清晰页面显示简洁。表现与结构相分离。易于优化搜索引擎更友好，排名更容易靠前。用于替换当前元素，用于在当前文档和引用资源之间确立联系。前端面试题总结——HTML(持续更新中) 1.什么是HTML？ HTML：HyperText Markup Language超文本标记语言 2.XHTML和HTML有什么区别 HTML是一种基本的W...

afishhhhh 2019-08-01 18:38 评论0 收藏0
前端面试题总结——HTML(持续更新中)

摘要：等知名网站已经开始测试并使用格式。页面加载速度更快结构化清晰页面显示简洁。表现与结构相分离。易于优化搜索引擎更友好，排名更容易靠前。用于替换当前元素，用于在当前文档和引用资源之间确立联系。前端面试题总结——HTML(持续更新中) 1.什么是HTML？ HTML：HyperText Markup Language超文本标记语言 2.XHTML和HTML有什么区别 HTML是一种基本的W...

binta 2019-08-26 17:15 评论0 收藏0
前端最实用书签(持续更新)

摘要：前言一直混迹社区突然发现自己收藏了不少好文但是管理起来有点混乱所以将前端主流技术做了一个书签整理不求最多最全但求最实用。前言一直混迹社区,突然发现自己收藏了不少好文但是管理起来有点混乱; 所以将前端主流技术做了一个书签整理,不求最多最全,但求最实用。书签源码书签导入浏览器效果截图showImg(https://segmentfault.com/img/bVbg41b?w=107...

sshe 2019-08-23 12:00 评论0 收藏0