Day6前端學習之路——佈局

時間 2020-02-03

標籤 day6 day 前端學習之路佈局简体版

原文原文鏈接

一.定位

1）靜態定位 css

position：static（默認）html

2）相對定位瀏覽器

position：relative（要配合top、bottom、left、right等屬性來使用）ide

3）絕對定位佈局

position：absolute測試

絕對定位固定元素是相對於 <html> 元素或其最近的「positioned」祖先元素，一個「positioned」元素是指 position 值不是 static 的元素。

4）固定定位字體

position：fixed（要配合top、bottom、left、right等屬性來使用）flex

固定定位固定元素則是相對於瀏覽器視口自己

5）堆疊順序spa

z-indexcode

幾種定位的區別：https://baijiahao.baidu.com/s?id=1631432397252663686&wfr=spider&for=pc

http://zh.learnlayout.com/position.html

2、彈性盒子Flexbox

display：flex

屬性	備註	值
flex-direction	指定主軸的方向	row/column，默認是row
flex-wrap	換行	wrap/wrap-reverse，flex-direction和flex-wrap能夠合併爲flex-flow: row wrap;
flex	三個屬性的縮寫，flex-grow/flex-shrink /flex-basis	flex:0 1 auto（默認）
align-items	控制在交叉軸的位置	stretch（默認）/center/flex-start/flex-end
justify-content	控制在主軸上的位置	flex-start（默認）/flex-end/center/space-around（均勻分佈）/space-between（不會在兩端留下任何空間）
order	flex項排序	數字，默認0，越大越後面

3、佈局

3.1 佈局模型

flow 流動模型（默認）
float 浮動模型
layer 層模型

3.1.1 流動模型

兩個典型的特徵：

塊狀元素以行的形式佔據位置（獨佔一行），自上而下按順序垂直延伸分佈
行內元素在所包含元素內從左到右水平分佈顯示

3.1.2 浮動模型

任何元素默認不能浮動，使用css定義浮動

div{float:left;}　　div{float:right;}

3.1.3 層模型

三種形式：

相對定位-position:relative
絕對定位-position:absolute
固定定位-position:fixed

3.1.4 z-index

利用該屬性，能夠改變元素相互覆蓋的順序

只對定位元素有效（即position屬性值爲relative/absolute/fixed）
父子關係處理：若是父元素z-index有效，那麼不管族元素是否設置z-index都會在父元素上方
相同z-index：若都沒有設置改值，一個定位一個沒有定位，定位元素覆蓋未定位元素；若都沒有定位但發生了重合或者都定位了且發生了位置重合，則按照文檔流順序，後面的覆蓋前面的。

3.2 float詳解

3.2.1 float多個特性

破壞性——破壞了父標籤的本來結構，父標籤出現了坍塌

包裹性——普通的div若是不設置寬度，會撐滿整個屏幕寬度，設置了float以後，寬度自動調整爲包裹着內容寬度，而不是撐滿整個父容器

清空格——正常的img之間是有空格的，增長了float以後，img之間沒有空格，根本緣由是float會致使節點脫離文檔流結構

3.2.2 清除浮動

爲父元素添加 overflow:hidden(父元素就有了高度，但不會發生坍塌）
浮動父元素
clear:both——經過在全部浮動元素下方添加一個clear:both的元素，能夠消除float的破壞性。
clearfix——經過僞元素選擇器，在div後面增長了一個clear:both的元素，跟第三種方法是一個道理

3.3 網頁佈局方式

3.3.1 一列布局

固定寬和高，設置margin：0 auto來水平居中

3.3.2 二列布局

最多見的就是使用float來實現，但會出現文本環繞等效果，須要及時清除浮動

如何父級元素沒有設置高度，則須要設置overflow:hidden來清除浮動產生的影響
對於本身相鄰元素清除浮動產生的影響用：clear：both;

3.3.3 三列布局

兩側定寬中間自適應

首先設置父級元素的寬度，能夠左左右設置浮動。而後中間設置margin調整間距。也能夠都設置成左浮動，設置margin，調整間距。一樣注意清除浮動的影響！

 <div class="main">
        <div class="left">left</div>
        <div class="middle">middle</div>
        <div class="right">right</div>
 </div>

.main{
            width: 100%;
            background: red;
            overflow: hidden;
        }
        .left{
            background: yellow;
            float: left;
            width: 100px;
        }
        .middle{
             background: rosybrown;
             float: left;
             width: cacl(100%-200px);
         }
        .right{
            background: green;
            float: right;
            width: 100px%;
        }

或者爲父級元素設置relative屬性，再爲子元素設置absolute屬性，再分別定位，調整間距

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>    
    <div class="center" style="background-color: pink;">
        <p>center</p>
        <p>center</p>
    </div>                
    <div class="right"  style="background-color: lightgreen;">
        <p>right</p>
    </div>            
</div>

<style>
p{margin: 0;}
.parent{position: relative;height:40px;}
.left,.right,.center{position: absolute;}
.left{left: 0;width:100px;}
.right{right: 0;width: 100px;}
.center{left: 120px; right: 120px;}
</style>

3.3.4 混合佈局

在一列布局的基礎上，保留top和foot部分，將中間的main部分改形成兩列或三列布局，小的模塊能夠再逐級同理劃分。

<div class="top"></div>
    <div class="main">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
<div class="footer"></div>

.top{
            height: 100px;
            background: teal;
        }
        .footer{
            height: 100px;
            background: wheat;
        }
        .main{
            width: 100%;
            background: red;
            overflow: hidden;
        }
        .left{
            background: yellow;
            float: left;
            width: 50%;
        }
        .right{
            background: green;
            float: right;
            width: 50%;
        }

3.4 對齊方式

3.4.1 水平居中

（1）行內元素的水平居中

若是被設置元素爲文本、圖片等行內元素時，在父元素中設置text-align:center實現行內元素水平居中，將子元素的display設置爲inline-block，使子元素變成行內元素

<div class="parent" style="background-color: gray;">
  <div class="child" style="background-color: lightblue;">DEMO</div>
</div>
<style>
.parent{text-align: center;}    
.child{display: inline-block;}
</style>

（2）塊狀元素的水平居中（定寬）

當被設置元素爲定寬塊級元素時用 text-align：center 就不起做用了。能夠經過設置「左右margin」值爲「auto」來實現居中的。

<div class="parent" style="background-color: gray;">
  <div class="child" style="background-color: lightblue;">DEMO</div>
</div>
        .child{
            width: 200px;
            margin: 0 auto;
        }

（3）塊狀元素的水平居中（不定定寬）

在實際工做中咱們會遇到須要爲「不定寬度的塊級元素」設置居中，好比網頁上的分頁導航，由於分頁的數量是不肯定的，因此咱們不能經過設置寬度來限制它的彈性。

能夠直接給不定寬的塊級元素設置text-align：center來實現，也能夠給父元素加text-align:center 來實現居中效果。

當不定寬塊級元素的寬度不要佔一行時，能夠設置display 爲 inline 類型或inline-block（設置爲行內元素顯示或行內塊元素）

<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
.container{text-align:center;background: beige}
.container ul{list-style:none;margin:0;padding:0;display:inline-block;}
.container li{margin-right:8px;display:inline-block;}

3.4.2 垂直居中

和水平居中同樣，這裏要講垂直居中，首先設定兩個條件即父元素是盒子容器且高度已經設定

場景1：子元素是行內元素，高度是由其內容撐開的

這種狀況下，須要經過設定父元素的line-height爲其高度來使得子元素垂直居中

<div class="wrap line-height">
    <span class="span">111111</span>
</div>
 .wrap{
            width:200px ;
            height: 300px;
            line-height: 300px;
            border: 2px solid #ccc;
        }
.span{
            background: red;
        }

場景2：子元素是塊級元素可是子元素高度沒有設定

在這種狀況下其實是不知道子元素的高度的，沒法經過計算獲得padding或margin來調整，可是仍是存在一些解法。

經過給父元素設定display:table-cell;vertical-align:middle來解決

<div class="wrap">
    <div class="non-height ">11111</div>
</div>
.wrap{
       width:200px ;
       height: 300px;
       border: 2px solid #ccc;
　　　　display: table-cell;
　　　　vertical-align: middle;
}
 .non-height{
       background: green;
        }

場景3：子元素是塊級元素且高度已經設定

計算子元素的margin-top或margin-bottom，計算方法爲父(元素高度-子元素高度)/2

<div class="wrap ">
    <div class="div1">111111</div>
</div>
  .wrap{
            width:200px ;
            height: 300px;
            border: 2px solid #ccc;
        }
.div1{
            width:100px ;
            height: 100px;
            margin-top: 100px;
            background: darkblue;
        }

3.4.3 水平垂直居中

(1)水平對齊+行高

text-align + line-height實現單行文本水平垂直居中

<style>
.test{
    text-align: center;
    line-height: 100px;
}
</style>
<div class="test" style="background-color: lightblue;width: 200px;">測試文字</div>

(2)水平+垂直對齊

text-align + vertical-align　　在父元素設置text-align和vertical-align，並將父元素設置爲table-cell元素，子元素設置爲inline-block元素

<style>
.parent{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.child{
    display: inline-block;
}
</style>

<div class="parent" style=" width:200px; height:100px;">
  <div class="child" style="">測試文字</div>
</div>

若子元素是圖像，可不使用table-cell，而是其父元素用行高替代高度，且字體大小設爲0。子元素自己設置vertical-align:middle

<div class="parent" style="background-color: gray; width:200px; ">
  <img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test">
</div>

<style>
.parent{
    text-align: center;
    line-height: 100px;
    font-size: 0;
}
.child{
    vertical-align: middle;
}
</style>

(3)相對+絕對定位

使用absolute，利用絕對定位元素的盒模型特性，在偏移屬性爲肯定值的基礎上，設置margin:auto

<style>
.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    width: 80px;
    margin: auto;
}
</style>

<div class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <div class="child" style="background-color: lightblue;">測試文字</div>
</div>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。