前端佈局總結（持續更新）

楷楷發表於2018-04-13
前端

一.水平居中

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

相關文章