专栏首页前端博客:https://alili.tech前端布局总结(持续更新)

抱歉,你查看的文章已删除

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

原文链接

https://segmentfault.com/a/1190000014359914

一.水平居中

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

.parent{text-align:center;}
<div class="parent">
    <div class="child">DEMO</div>
  </div>

优点:兼容性好,甚至可以兼容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)浮动

<div class="parent  clear-fix">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

.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)浮动

<div class="parent">
    <div class="column"><p>1</p></div>
    <div class="column"><p>2</p></div>
    <div class="column"><p>3</p></div>
    <div class="column"><p>4</p></div>        
</div>

.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端)

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 <script>
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 19.2 + 'px'
 </script>

七.浮动布局(具体)

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; 
}

<section class="custom-list">
        <div class="subtitle">你就是帅</div>
        <div class="custom-line clear-fix">
            <div class="ms-left">
                <div>
                    <img class="pic" src="" alt="">
                </div>
                <div class="custom-font">你</div>
            </div>
            <div class="ms-left">
                <div>
                    <img class="pic" src="" alt="">
                </div>
                <div class="custom-font">就</div>
            </div>
            <div class="ms-right">
                <div>
                    <img class="pic" src="" alt="">
                </div>
                <div class="custom-font">是</div>
            </div>
            <div class="ms-right">
                <div>
                    <img class="pic" src="" alt="">
                </div>
                <div class="custom-font">帅</div>
            </div>
            <div class="ms-right">
                <div>
                    <img class="pic" src="" alt="">
                </div>
                <div class="custom-font"></div>
            </div>
        </div>
    </section>

八.不等宽高布局

 <div class="free-line clear-fix ">
                <div class="indicate"><img src="icon_1.png"><span>不等宽高布局</span></div>
                <div class="free-arrow"><img src="next.png"></div>
</div>
.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;
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 剖析一些经典的CSS布局问题,为前端开发+面试保驾护航

    这样做的优点就是在图文混排的时候可以很好的使文字环绕在图片周围。另外当元素浮动了起来之后,它有着块级元素的一些性质例如可以设置宽高等,但它与inline-blo...

    桃翁
  • 简单实用的纯CSS百分比圆形进度条代码解析/源码下载

    percircle是一款简单实用的纯CSS百分比圆形进度条插件。你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮...

    用户5997198
  • 无缝滚动案例简单实现代码

    <!doctype html> <html> <meta charset="utf-8"> <head> <title></title> <st...

    用户1730674
  • 如何清除浮动

    如何清除浮动 大家都知道,浮动会对文档产生影响,具体来看看会对文档产生什么影响? 清除浮动后的效果: ? 未清除浮动后的效果: ? 实例代码(未清除浮动): ...

    HTML5学堂
  • 射雕的"双飞翼布局"

    符合"渐进增强"标准+栅格理论,同时兼容性也不错,几乎没有到用hack <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...

    菩提树下的杨过
  • 前端-part8-jQurey操作样式一:获取标签属性+修改标签属性

    少年包青菜

扫码关注云+社区

领取腾讯云代金券