资讯专栏INFORMATION COLUMN

前端布局总结(持续更新)

Baoyuan / 2779人阅读

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

一.水平居中

(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/57407.html

相关文章

  • 前端布局总结持续更新

    一.水平居中 (1)直接父集设置text-align:center; .parent{text-align:center;} DEMO 优点:兼容性好,甚至可以兼容ie6、ie7缺点:child里的文字也会水平居中,可以在.child添加text-align:left;还原 (2)使用定位absolute+transform.parent {position:r...

    Yuanf 评论0 收藏0
  • 优秀文章收藏(慢慢消化)持续更新~

    ...技术文档协作规范(阮一峰) Javascript编程风格 凹凸实验室前端代码规范 vuejs风格指南 Event Loop 这一次,彻底弄懂 JavaScript - 执行机制 一次弄懂Event Loop(彻底解决此类面试问题) 浏览器与Node的事件循环(Event Loop)有何区别? 笔试题...

    JeOam 评论0 收藏0
  • 前端面试题总结——HTML(持续更新中)

    前端面试题总结——HTML(持续更新中) 1.什么是HTML? HTML:HyperText Markup Language超文本标记语言 2.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的标记语言 3.简述一下你对HTML语义化的理解? html语义化...

    afishhhhh 评论0 收藏0
  • 前端面试题总结——HTML(持续更新中)

    前端面试题总结——HTML(持续更新中) 1.什么是HTML? HTML:HyperText Markup Language超文本标记语言 2.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的标记语言 3.简述一下你对HTML语义化的理解? html语义化...

    binta 评论0 收藏0
  • 前端最实用书签(持续更新)

    ...发现自己收藏了不少好文但是管理起来有点混乱; 所以将前端主流技术做了一个书签整理,不求最多最全,但求最实用。 书签源码 书签导入浏览器效果截图 书签源码请戳github地址Chrome---设置---书签---导入书签就可在浏览器即可使...

    sshe 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<