css詳解3

時間  2019-11-10
標籤 css 詳解 欄目 CSS 简体版
原文   原文鏈接

 

 

 

 

 

 

推薦學習連接：css盒模型javascript

 

一、盒模型的經常使用屬性

1.一、pading

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box">魔降風雲變</div>
</body>
</html>

內容在左上角顯示css

若是我想要讓字往右走。html

       #box{
            width: 200px;
            height: 200px;
            background-color: red;
            padding-left: 20px ;
        }
    </style>

給盒子左邊添加個pading，讓盒子內容往右走。盒子變大了，從藍框裏面寫java

在一行上，由於你的pading增大使得盒子變大了，會致使整個頁面佈局出現混亂。爲了使盒子大小不變，pading增長了多少，盒子就相應減小多少css3

    <style>
        #box{
            width: 180px;
            height: 200px;
            background-color: red;
            padding-left: 20px ;
        }
    </style>

pading用的好能起到不少效果，下面那裏就是pading擠出來的：web

1.二、邊框border數據庫

 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #box{
            width: 300px;
            height: 300px;
            background-color: red;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

添加了一個黑色邊框的div塊瀏覽器

邊框三要素，border: 1px solid #000;  粗細 線型  顏色，還能夠單獨來設置服務器

    <style>
        #box{
            width: 300px;
            height: 300px;
            background-color: red;
  border-width: 4px;
            border-style: solid;
            border-color: blue;
        }
    </style>

邊框能夠表示上下左右，將左右加寬： 兩個值表示  上下   左右網絡

    <style>
        #box{
            width: 300px;
            height: 300px;
            background-color: red;
            border-width: 4px 10px;
            border-style: solid;
            border-color: blue;
        }
    </style>

邊框還能夠加四個值，應該是表明 上 右 下 左 

    <style>
        #box{
            width: 300px;
            height: 300px;
            background-color: red;
            border-width: 4px 10px 15px 20px;
            border-style: solid;
            border-color: blue;
        }
    </style>

 

線型也能夠修改，也能夠四種：

    <style>
        #box{
            width: 300px;
            height: 300px;
            background-color: red;
            border-width: 4px 10px 15px 20px;
            border-style: solid dotted dashed double;
            border-color: blue;
        }
    </style>
olid dotted dashed double; 實線 點 虛線  雙線

去掉底色只要邊框的樣子

    <style>
        #box{
            width: 300px;
            height: 300px;
            border-width: 4px 10px 15px 20px;
            border-style: solid dotted dashed double;
            border-color: blue;
        }
    </style>
background-color: red;去掉背景色

只要一個邊：  border-top  border-right border-bottom  border-left

    <style>
        #box{
            width: 300px;
            height: 300px;
            border-top: 1px solid red;
        }
    </style>

再加個背景色：

    <style>
        #box{
            width: 300px;
            height: 300px;
            border-top: 1px solid red;
            background-color: yellow;
        }
    </style>

 使用場景border-top

1.3製做三角形

 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: #000;
            border-top: 15px solid yellow;
            border-left: 15px solid red;
            border-right: 15px solid green;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

加一個底部邊框：

    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: #000;
            border-top: 15px solid yellow;
            border-left: 15px solid red;
            border-right: 15px solid green;
         border-bottom: 15px solid purple;
        }
    </style>

加個圖片就是相框了。

盒子寬高變小：

            width: 50px;
            height: 50px;

盒子寬高變小：

            width: 10px;
            height: 10px;

 

再變小：

            width: 0px;
            height: 0px;

 

不要下邊框：

    <style>
        #box{
            width: 0px;
            height: 0px;
            background-color: #000;
            border-top: 15px solid yellow;
            border-left: 15px solid red;
            border-right: 15px solid green;
            /*border-bottom: 15px solid purple;*/
        }
    </style>

左右設爲透明色

        #box{
            width: 0px;
            height: 0px;
            background-color: #000;
            border-top: 15px solid yellow;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent; /*border-bottom: 15px solid purple;*/
        }

去掉背景色：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #box{
            width: 0px;
            height: 0px;
            border-top: 15px solid yellow;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

 三角形應用場景：

 

 

 

 

 刪除線使用：

兩個渲染不一樣的span標籤

 

1.三、magin 詳解 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        span:nth-child(1){
            background-color: red;
        }
    </style>
</head>
<body>
    <span>魔降風雲變</span><span>小馬過河</span>
</body>
</html>

選中第一個

    <style>
        span:nth-child(1){
            background-color: red;
        }
  span:nth-child(2){
            background-color: blue;
        }
    </style>

選中第二個

 

nth-child是css3的選擇器

margin是外邊距，一個盒模型和另外一個盒模型之間的距離。網頁上不僅是div是盒模型，網頁上任意一個標籤都是盒模型。只要有pading border margin 的都稱爲盒模型

 設置一個右margin

    <style>
        span:nth-child(1){
            background-color: red;
          margin-right : 20px;
        }
        span:nth-child(2){
            background-color: blue;
        }
    </style>

 盒子2往右走了20px

    <style>
        span:nth-child(1){
            background-color: red;
            margin-right : 20px;
        }
        span:nth-child(2){
            background-color: blue;
            margin-left: 100px;
        }
    </style>

設置一個左margin，盒子又往右走了100px，總共120px

margin在水平方向上和咱們想象的同樣，margin是疊加的。

 

再來看看垂直方向的margin

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{width: 200px;height: 200px}
        #box1{background-color: red;}
        #box2{background-color: black;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>
將兩個div共有的部分div{width: 200px;height: 200px}寫在一塊兒，獨有的寫在獨有的裏面，省代碼，更簡潔
兩個div,獨佔一行

 如今給第一個盒子一個margin-bottom

    <style>
        div{width: 200px;height: 200px}
        #box1{background-color: red;margin-bottom: 30px}
        #box2{background-color: black;}
    </style>

第二個盒子下移了30px，兩者相聚30

我再給第二個盒子添加一個margin-top

    <style>
        div{width: 200px;height: 200px}
        #box1{background-color: red;margin-bottom: 30px}
        #box2{background-color: black;margin-top: 100px}
    </style>

結果兩者間相聚100px，而不是130px。這種現象是外邊距合併。能夠理解爲，一個30的口，一個一百的口，30這個小的口掉到100這個大的口裏埋沒了。也就是說margin在垂直方向會出現外邊距合併的現象。外邊距的距離以最大的外邊距爲基準。之後寫網頁須要避免這個問題。外邊距合併也被稱做塌陷。

 

也就是說下面這樣的地方要麼設置bottom，要麼設置top，只需設置一個margin就能夠了。也就避免了外邊距塌陷問題。

 

以下：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{width: 200px;height: 200px}
        #box1{background-color: red;margin-bottom: 30px}
        #box2{background-color: black;margin-top: 100px}
        #box3{background-color: purple}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3">
    </div>
</body>
</html>

box沒有p標籤的時候，box2,3垂直方向沒有距離

 

當有p標籤的時候，有了距離了這是啥狀況？

<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3">
        <p>mm</p>
    </div>
</body>

添加一個p的選擇器

    <style>
        div{width: 200px;height: 200px}
        #box1{background-color: red;margin-bottom: 30px}
        #box2{background-color: black;margin-top: 100px}
        #box3{background-color: purple}
        #box3 p{background-color: yellow;}
    </style>

我要將mm往下走，能夠給紫盒子用margin-top

    <style>
        div{width: 200px;height: 200px}
        #box1{background-color: red;margin-bottom: 30px}
        #box2{background-color: black;margin-top: 100px}
        #box3{background-color: purple ;margin-top: 100px}
        #box3 p{background-color: yellow;}
    </style>

這也是用塌陷問題。margin這個現象存在不少坑

若是用這種方式的話這裏也用margin來調距離，可是很差調，這個地方用浮動佈局更方便

二、浮動屬性的使用

2.1浮動的初步理解

　　垂直方向出現的塌陷，給子盒子設置margin，都是在一些文檔流下，(文檔流式佈局，從上往下，從左往右就像流水同樣去寫。不可能先寫下面的再寫上面的。流式佈局中有一個標準的文檔流，就是在瀏覽器頁面中你設置一個盒子好比div，它始終從左上角開始)

好比下面的導航欄， 有一個整個的大的div。中間有個div盒子居中，而後又有三個子div，分別放導航 登陸 和購物車的三個部分。這樣用浮動佈局就比較好。浮動佈局最開始是解決文字環繞現象的 ，若是用浮動，很容易就出現文字環繞現象了。因爲浮動能實現並排顯示，因而就用來作佈局了。在浮動佈局以前用的是table。把整個表格的寬度設置爲整個body的寬度，表格太麻煩，使用浮動佈局簡單不少。除了浮動佈局外，還有不少佈局，好比定位佈局，flash佈局

 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        img{width: 400px}
    </style>
</head>
<body>
　　
    <img src="timg.gif" alt="">
　　
    <p>
        我喜歡出發。
凡是到達了的地方，都屬於昨天。哪怕那山再青，那水再秀，那風再溫柔。太深的流連便成了一種羈絆，絆住的不只有雙腳，還有將來。
怎麼能不喜歡出發呢？沒見過大山的巍峨，真是遺憾；見了大山的巍峨，沒見過大海的浩瀚，仍然遺憾；見了大海的浩瀚，沒見過大漠的廣袤，依舊遺憾；見了大漠的廣袤，沒見過森林的神祕，仍是遺憾。世界上有不絕的風景，我有不老的心情。
我天然知道，大山有坎坷，大海有浪濤，大漠有風沙，森林有猛獸。即使這樣，我依然喜歡。
打破生活的平靜即是另外一番景緻，一種屬於年輕的景緻。真慶幸，我尚未老。即使真老了又怎麼樣，不是有句話叫老當益壯嗎?
因而，我還想從大山那裏學習深入，我還想從大海那裏學習勇敢，我還想從大漠那裏學習沉着，我還想從森林那裏學習機敏。我想學着品味一種繽紛的人生。
    </p>
</body>
</html>

如今看到的效果是圖片和文字是上下排着的。

給p標籤設置一個浮動屬性。float浮動有三個值，一個是none（全部元素在標準流文檔下沒有浮動，標準文檔流就是以前寫的全部標籤在網頁上的排版），

 這裏有點問題，修改一下代碼，把圖片放在div裏面，給div設置左浮動：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        img{width: 200px}
        #box{float: left}
    </style>
</head>
<body>
    <div id="box"><img src="timg.gif" alt=""></div>
    <p>
        我喜歡出發。
凡是到達了的地方，都屬於昨天。哪怕那山再青，那水再秀，那風再溫柔。太深的流連便成了一種羈絆，絆住的不只有雙腳，還有將來。
怎麼能不喜歡出發呢？沒見過大山的巍峨，真是遺憾；見了大山的巍峨，沒見過大海的浩瀚，仍然遺憾；見了大海的浩瀚，沒見過大漠的廣袤，依舊遺憾；見了大漠的廣袤，沒見過森林的神祕，仍是遺憾。世界上有不絕的風景，我有不老的心情。
我天然知道，大山有坎坷，大海有浪濤，大漠有風沙，森林有猛獸。即使這樣，我依然喜歡。
打破生活的平靜即是另外一番景緻，一種屬於年輕的景緻。真慶幸，我尚未老。即使真老了又怎麼樣，不是有句話叫老當益壯嗎?
因而，我還想從大山那裏學習深入，我還想從大海那裏學習勇敢，我還想從大漠那裏學習沉着，我還想從森林那裏學習機敏。我想學着品味一種繽紛的人生。
    </p>
</body>
</html>

左浮動以後p標籤就會往圖片左邊靠，這就是文字環繞

若是給p標籤加個邊框：

    <style>
        img{width: 200px;height: 150px}
        #box{float: left}
        p{border: 1px solid red} </style>

一旦設置了浮動，這些標籤就不是標準文檔流了。就會產生一種現象，浮動。文檔不是貼着頁面了，這個p標籤是做爲文檔流下的第一個標籤了，往上頂，雖然p的盒子往上擠了，佔據了box的位置，可是文字不會擠仍是圍繞着它，文字不會被蓋住。box盒子設置了浮動了，盒子飄起來了，p就去貼父元素的邊，若是這兩個盒子同樣大小，那麼p標籤就被覆蓋看不見了。

若是給盒子再設置一個左浮動，它會去找浮動盒子的邊，貼邊就沒有空白摺疊了。

額，這裏給p標籤設置一個浮動，另起一行了。不瞭解緣由：

    <style>
        img{width: 200px;height: 150px}
        #box{float: left}
        p{border: 1px solid red;float: left}
    </style>

看下面的例子：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{width: 200px;height: 200px}
        .box1{background-color: red;}
        .box2{background-color: black;}
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

設置兩個標準文檔流下的盒子，塊級標籤，div標籤，獨佔一行，上下排版

如今想讓盒子在一行內顯示，讓紅色盒子浮動

    <style>
        div{width: 200px;height: 200px}
        .box1{background-color: red;float: left}
        .box2{background-color: black;}
    </style>

紅色盒子浮動了，黑色盒子上去了。紅色盒子浮動了，就不是標準文檔流下的盒子了。黑色盒子瀏覽器認爲是標準文檔流下的第一個盒子。

黑色盒子其實是被蓋住了，

將黑色盒子的寬度改一改：

    <style>
        div{width: 200px;height: 200px}
        .box1{background-color: red;float: left}
        .box2{width:500px;background-color: black;}
    </style>

給黑色盒子加個左浮動：

    <style>
        div{width: 200px;height: 200px}
        .box1{background-color: red;float: left}
        .box2{width:500px;background-color: black;float: left}
    </style>

黑色盒子浮動起來後出來了，貼的是紅色浮動盒子的邊，

浮動它有一種現象，一是：浮動脫離了標準文檔流，脫標了，不在文檔上佔有位置了。下面標準文檔流下的盒子就往上擠。

給紅色盒子設置了浮動，它有種現象就是貼邊，就是它會去找浮動盒子的邊，它找不到浮動盒子的邊就去找父元素的邊，它的父元素是body。給黑色盒子設置浮動，它就去找浮動元素的邊，即紅色盒子的邊

 2.2浮動在頂部欄的使用案例

這些地方都有container

 

 

若是寫的沒有渲染上，首先看看選擇器是否是忘記寫#.這些東西了。

先寫一下top。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{padding: 0;margin: 0}
        #top{
            width: 100%;
            height: 40px;
            background-color: #333;
        }
        .container{
            width:1226px;
            height: 40px;
            margin-right: auto;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="top">
        <div class="container">
            <div class="top_l"></div>
            <div class="shop"></div>
            <div class="login"></div>
        </div>
    </div>
</body>
</html>

去掉全部自帶的pading和margin。設置一個黑色的盒子。黑盒子裏面設置一個紅色的盒子。紅色盒子設置margin-right: auto; 紅色盒子默認從左邊排列

將紅色盒子設置成margin-left: auto;

    <style>
        *{padding: 0;margin: 0}
        #top{
            width: 100%;
            height: 40px;
            background-color: #333;
        }
        .container{
            width:1226px;
            height: 40px;
            margin-left: auto;
            background-color: red;
        }
    </style>

紅色盒子就往右邊去靠了。

若是margin-left: auto;margin-ringt: auto;都使用，那麼紅色盒子就跑到中間去了。實現了子盒子在父盒子中的居中。給子盒子左右margin都設置成自動

        .container{
            width:1226px;
            height: 40px;
        margin-right: auto;
            margin-left: auto;
            background-color: red;
        }

實現子盒子在父盒子中的水平居中，還能夠簡寫：

        .container{
            width:1226px;
            height: 40px;
            margin: 0 auto;
            background-color: red;
        }

給子盒子的margin 上下設置成0，左右設置成auto。（黑色變少了，我調整瀏覽器100%正常顯示了）

 

在上面基礎上添加top_l類盒子的選擇器，後面的幾個盒子都是紅色盒子的子盒子，排列從紅色盒子開頭開始：

    <style>
        *{padding: 0;margin: 0}
        #top{
            width: 100%;
            height: 40px;
            background-color: #333;
        }
        .container{
            width:1226px;
            height: 40px;
            margin: 0 auto;
            background-color: red;
        }
    #top .top_l{ width: 300px; height: 40px; background-color: greenyellow;
        }
    </style>

 

如今添加另外兩個紅色盒子中的子盒子：

    <style>
        *{padding: 0;margin: 0}
        #top{
            width: 100%;
            height: 40px;
            background-color: #333;
        }
        .container{
            width:1226px;
            height: 40px;
            margin: 0 auto;
            background-color: red;
        }
        #top .top_l{
            width: 300px;
            height: 40px;
            background-color: greenyellow;
        }
 #top .shop{ width: 100px; height: 40px; background-color: blue;
        }
        #top .top_l{
            width: 130px;
            height: 40px;
            background-color: gold;
        }
    </style>

查看異常，不是想象中的，居然把我得第一個黃綠色盒子變沒了。緣由是我第三個盒子的命名寫錯了，複製過來忘記修更名字 #top .top_l

改掉選擇器名字

   <style>
        *{padding: 0;margin: 0}
        #top{
            width: 100%;
            height: 40px;
            background-color: #333;
        }
        .container{
            width:1226px;
            height: 40px;
            margin: 0 auto;
            background-color: red;
        }
        #top .top_l{
            width: 300px;
            height: 40px;
            background-color: greenyellow;
        }
        #top .shop{
            width: 100px;
            height: 40px;
            background-color: blue;
        }
        #top .login{
            width: 130px;
            height: 40px;
            background-color: gold;
        }
    </style>

 

選擇正確的這三個div將塊變成行內塊：

  #top .container div{display: inline-block}

結果存在空白摺疊。若是想把後兩個盒子放在右邊，還須要測量尺寸。

如今去掉行內塊的設置，回到以前的操做：

如今給綠色盒子設置成左浮動：

        #top .top_l{
            width: 300px;
            height: 40px;
            background-color: greenyellow;
            float: left;
        }

藍色盒子成爲了紅色盒子中的第一個標準流的盒子。被浮動飄起來的綠色盒子壓蓋了。

再給藍色盒子設置左浮動，藍色盒子貼着綠色左浮動的盒子，黃色盒子成了紅色盒子中標準文檔流的第一個盒子，而且被覆蓋住了。

        .container{
            width:1226px;
            height: 40px;
            margin: 0 auto;
            background-color: red;
        }
        #top .top_l{
            width: 300px;
            height: 40px;
            background-color: greenyellow;
            float: left;
        }
        #top .shop{
            width: 100px;
            height: 40px;
            background-color: blue;
            float: left;
        }

如今給紅色盒子內的三個盒子選擇器都設置float: left;  實現了多個子元素盒子排在同一行，而不是按照塊元素獨佔一行來顯示了。

如今將藍色盒子和黃色盒子設置成右浮動。

        #top .shop{
            width: 100px;
            height: 40px;
            background-color: blue;
            float: right;
        }
        #top .login{
            width: 130px;
            height: 40px;
            background-color: gold;
            float: right;

這樣就實現了這兩個盒子在右邊

下面來看頂部元素的大體的佈局：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{padding: 0;margin: 0}
        #top{
            width: 100%;
            height: 40px;
            background-color: #333;
        }
        .container{
            width:1226px;
            height: 40px;
            margin: 0 auto;
            background-color: red;
        }
        #top .top_l{
            width: 300px;
            height: 40px;
            background-color: greenyellow;
            float: left;
        }
        #top .shop{
            width: 100px;
            height: 40px;
            background-color: blue;
            float: right;
        }
        #top .login{
            width: 130px;
            height: 40px;
            background-color: gold;
            float: right;
        }
    </style>
</head>
<body>
    <div id="top">
        <div class="container">
            <div class="top_l">導航</div>
            <div class="shop">登陸註冊</div>
            <div class="login">購物車</div>
        </div>
    </div>
</body>
</html>

這樣就實現了頂部的佈局：

原網頁的頂部欄樣子：

2.3分析網頁的元素組成

分析下面的這行：

 這一欄跟上面相似，有個同樣的container。1處包着一個div,div裏面包着一個圖片。2裏面有ul，ul裏面有li，li裏面有a。3裏面有個form表單，form裏面有兩個input

 

背景色rgba background-color: rgba(255,255,255,1);
將登陸註冊的改成rgba，RGBA是表明Red（紅色） Green（綠色） Blue（藍色）和 Alpha的色彩空間，也就是透明度/不透明度。
        #top .login{
            width: 130px;
            height: 40px;
            background-color: rgba(255,255,255,1);
            float: right;
        }

盒子也是有前後的，兩個盒子一塊兒右浮，先定義的盒子先浮動，在右邊，後定義的盒子在從右數隨後。

將登陸設置成.2增長了透明色，父標籤的底色都顯現了。background-color: rgba(0,0,0,.2); 最後一個數能夠調整透明度的吧？

三個div都浮動了。第三個div裏面form的兩個input再浮動就與外面浮動沒有任何關係，由於一個也是一個邏輯區，不必定非得是div，只要是把它包裹的東西就好了。好比ul裏面全部的li也是邏輯區，鼠標懸浮在電視這個li裏面的時候，下面出現的東西也是包裹着li裏面的。li標籤裏的也須要浮動。搜索圖標和搜索框間沒有空白摺疊，這裏能夠用浮動，也能夠用寫在一行實現呀。 

 

 

這裏面有個div，div裏面有個ul,ul是紅框大小，上左下都有pading。首先看它的內容是在哪裏顯示的，應該是從左上角開始的。一行就是一個li標籤，箭頭那裏就是一個span標籤

 

先想一個大的結構，再想單塊，四塊div，再想一想怎麼在一行內顯示。大的結構寫好了再寫裏面細的內容。這裏應該也有大的div，裏面有個容器div,而後纔是四個小div的吧？再思考一下，左邊那個和右邊三個彷佛沒有關係。左邊那個是獨立的，右邊三個是獨立的總體。那麼可不能夠認爲左邊是個div，右邊是個ul，這個是否是叫圖片列表。那麼用div能夠麼，能夠。可是列表列表，指的是相同的內容列表。這裏右邊三個都是同樣的。而後左邊黑色的左浮，右邊的右浮。左邊的黑色左浮，右邊的左浮也能夠，而後裏面的三個小元素也左浮。

  思考這裏應該是一張圖，上下有margin

2處是左浮，3處是個圖片列表，一個ul裏面8個li。第5個li放不下了就換行顯示。即浮動元素放不下了，就換行貼着父元素的邊。而後再作每一個li裏面的內容。若是光寫大的盒子用顏色來表示的話，那麼網頁的結構，架構啊就寫出來了。若是你能把結構畫出來，那麼就用標籤給它表現出來。
https://www.apeland.cn/web/3/63 的34,35有兩個對網頁的總體架構分析。推薦看看。

三、浮動的知識

3.一、浮動帶來的問題 

浮動帶來的問題：浮動脫標不佔位置，那麼全部的盒子都設置固定高度麼？若是我不知道這個盒子內容有多少，須要多少高度，那麼如何讓它去適應適合的高度。一個父盒子，怎麼知道本身須要多少高度呢？靠內容。內容5000就5000的高度，內容一萬就一萬的高度，讓父元素適應高度。若是一個父盒子，往裏面添加了內容，須要的高度變了，那麼應該讓它本身適應這個高度，不能一直手動計算並修改這個高度。子盒子設置高度，但願它撐起父元素的高度。可是父盒子下有多個子盒子都是浮動的脫離標準文檔流的。怎麼能撐起父盒子的高度呢？浮動帶來的問題：撐不起父盒子的高度

 浮動能實現塊元素並排。能實現一行兩列三列的佈局。上面就是三列布局，能夠把它看作table的一行，多列單元格，分列布局。網頁其實就是一個表格，行和列的存在。 

浮動的做用： 實現元素並排

3.二、浮動的現象

1.脫離標準文檔流，不在頁面上佔位置 「脫標」
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{padding: 0;margin: 0}
        .father{
            width: 800px;
            height: 800px;
            border: 1px solid #000;
        }
        .child1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .child2{
            width: 300px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="child1"></div>
        <div class="child2"></div>
    </div>
</body>
</html>

如今父盒子802*802px，寬高800,800，做爲body的第一個元素，排列方式是始終在左上角，這是標準流文檔排列下的方式。紅色盒子是做爲父盒子黑框的第一個元素在左上角，綠色黑子做爲黑框的第二個子標籤。由於獨佔父元素的一行，上下排列。

如今給第一個紅色盒子設置一個左浮動屬性，它就脫離標準文檔流了，不充當標準文檔流下的黑框的第一個元素了。紅色盒子飄起來了 ，綠色盒子仍是標準文檔流下的盒子，它會認爲綠色盒子是標準文檔流中的第一個盒子。就會往左上角去擠。此時同時也出現了壓蓋現象，紅色盒子壓蓋在了綠色盒子上面。

        .child1{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }

 

綠色盒子不想被紅色壓蓋就須要作層級優先顯示，下面地方就用了層級，壓蓋了原來的內容，上面的優先級要大：

包括這裏也層級，存在優先級顯示：

 外面的div是標準流下的盒子，1處就是一個浮動的盒子，只要給它設置浮動就會壓蓋掉父的

 1跟2是有關係的，點擊1浮現2,。1是li標籤裏的,包着一個子盒子2，hover

 

那麼這裏隱藏了內容了。好比過節優惠活動的時候這裏就出現了。這是預留的位置

通常是張動態圖

上面就是浮動的第一個現象，脫離標準文檔流，不在頁面上佔位置

 

如今不給父盒子設置高度，父盒子是200

/*height: 800px;*/

取消紅色第一個盒子的左浮動以後，父盒子高度被內容填充到了200+200=400：

繼續給紅色盒子設置左浮動屬性，那麼紅色盒子不佔位置了，父元素的盒子變成了200.

這就是浮動以後脫離標準文檔流，不在頁面上佔位置

下面給父元素添加一個屬性：

        .father{
            width: 800px;
            /*height: 800px;*/
            border: 1px solid #000;
         margin: 100px auto;
        }

上下100px，左右居中，貼着父元素的邊

紅色盒子貼着父元素的邊，綠色盒子設置左浮以後會貼着紅色盒子的邊，貼邊現象。

浮動的現象之一：貼邊現象

這時，讓綠色盒子設置左浮動，出現一個問題：

這兩個盒子都不佔位置，父元素的盒子沒有設置位置，如今父元素的高度就是邊框2px。

 這時假如我在下面有個導航欄，導航欄應該放在哪裏？就會放在2px邊框下面，這樣就全亂了。

 

這時我將紅色盒子200px的寬度註釋掉，綠色盒子的寬度也註釋掉，這兩個div放入內容。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{padding: 0;margin: 0}
        .father{
            width: 800px;
            /*height: 800px;*/
            border: 1px solid #000;
            margin: 100px auto;
        }
        .child1{
            /*width: 200px;*/
            height: 200px;
            background-color: red;
            float: left;
        }
        .child2{
            /*width: 300px;*/
            height: 200px;
            background-color: green;
            float: left;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="child1">魔降風雲變</div>
        <div class="child2">小馬過河</div>
    </div>
</body>
</html>
View Code

這兩個盒子去掉寬度以後，盒子的寬度就是裏面內容的寬度，高度仍是有的。這是浮動的現象之一：收縮現象

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{padding: 0;margin: 0}
        .father{
            width: 800px;
            /*height: 800px;*/
            border: 1px solid #000;
            margin: 100px auto;
        }
        .child1{
            /*width: 200px;*/
            height: 200px;
            background-color: red;
            /*float: left;*/
        }
        .child2{
            /*width: 300px;*/
            height: 200px;
            background-color: green;
            /*float: left;*/
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="child1">魔降風雲變</div>
        <div class="child2">小馬過河</div>
    </div>
</body>
</html>
View Code

此時，再把紅色盒子和綠色盒子的浮動屬性去掉，兩個div各佔一行：

給紅色盒子設置浮動以後：

再給綠色盒子設置浮動以後：

給綠色盒子設置右浮:

上面栗子明顯看出，浮動元素有收縮效果發生，而且父元素沒有高度時是撐不起父盒子的。撐不起父盒子，若是父盒子下面有盒子的話，就會佔領紅色和綠色盒子所在的區域。這樣頁面就混亂了。

 

四、清除浮動

清除浮動做用，個人理解是：在父盒子不設高度，須要用內容來撐起父盒子的高度的狀況下，清除浮動帶來的不能支撐起父盒子的問題（影響）。

何時清除浮動？個人理解知足兩個條件是：一、div這類的浮動實現並排 二、父盒子沒設置高度。

4.一、給父元素添加固定高度

        .father{
            width: 800px;
            height: 200px;
            border: 1px solid #000;
            margin: 50px auto;
        }

給父元素添加和子盒子同樣的高度，父元素撐起了的，但不是子盒子撐起來的：

這時紅色盒子忽然有添加高度的需求了，又出現問題了。

        .child1{
            /*width: 200px;*/
            height: 400px;
            background-color: red;
            float: left;
        }

，子元素在父元素高度外，父盒子至關因而沒有撐起來，頁面又會出現混亂

將父盒子高度再次修改爲最高的子盒子高度，又不會影響頁面了。

一個網頁有特別多幾百上千的浮動，那麼每次都要手動去改父盒子的高度嗎？顯然不可能的。

因此給父元素添加固定高度，不靈活。後期不易 維護。可是若是是萬年不變導航欄是可使用這種方法的。

 好比這裏，沒有變化的須要，將父盒子高度固定了。

 

 4.2內牆法

給浮動盒子的最後放一堵牆，這堵牆設置一個屬性，這個屬性解決這個問題。這堵牆通常是clear both。這樣就不用本身去計算浮動元素的高度了。

內牆法：給最後一個浮動元素的後面添加一個空的塊級標籤，而且設置該標籤的屬性爲clear:both;
問題：冗餘

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{padding: 0;margin: 0}
        .father{
            width: 800px;
            /*height: 400px;*/
            border: 1px solid #000;
            margin: 50px auto;
        }
        .child1{
            /*width: 200px;*/
            height: 400px;
            background-color: red;
            float: left;
        }
        .child2{
            /*width: 300px;*/
            height: 200px;
            background-color: green;
            float: right;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="child1">魔降風雲變</div>
        <div class="child2">小馬過河</div>
    </div>
</body>
</html>
View Code

如今去掉父盒子的高度：

添加clear both；

     .clear{clear: both}

<div class="father">
        <div class="child1">魔降風雲變</div>
        <div class="child2">小馬過河</div>
        <div class="clear"></div>
    </div>

解決了浮動元素撐不起父盒子的問題：

可是內牆法有缺陷，一個網頁有不少個浮動，每次都要在全部子盒子後面添加<div class="clear"></div>才能計算並解決子盒子撐不起父盒子的問題，那麼須要寫不少次這個空的標籤。這樣代碼冗餘，代碼量增大，也增大網絡傳輸用的帶寬。

4.3僞元素清除法

        .clearfix::after{
            content: '&';
        }
    </style>
<body>
    <div class="father clearfix">
        <div class="child1">魔降風雲變</div>
        <div class="child2">小馬過河</div>
    </div>
</body>

添加一個僞元素選擇器，在父盒子內容的最後添加一個內容。給須要添加的父盒子添加這個類

下面出現了文字環繞現象

內牆法：給最後一個浮動元素的後面添加一個空的塊級標籤，而且設置該標籤的屬性爲clear:both;

如今，給給最後一個浮動元素的後面添加一個空的塊級標籤。轉塊級標籤，而且使用clear: both;

這樣就撐起了父盒子，可是如今不想要&符，去掉它

        .clearfix::after{
            content: '';
            display: block;
            clear: both;
        }

若是我想用&，怎樣去掉它？display: none;？會把前面的覆蓋掉，又沒有撐起來了。

可是能夠這樣：

        .clearfix::after{
            content: '&';
            display: block;
            clear: both;
            visibility: hidden;
            
        }

這個屬性將能夠看見的隱藏，可是空行還在，佔位置

那麼把這個位置去掉：

        .clearfix::after{
            content: '&';
            display: block;
            clear: both;
            visibility: hidden;
         height: 0;
        }

這樣清除會多出幾行代碼。不如直接用空格的:

        .clearfix::after{
            content: '';
            display: block;
            clear: both;
        }

4.4 overflow：hidden；

 overflow的功能演示：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box{width: 200px;height: 200px;border: 1px solid #000}
    </style>
</head>
<body>
    <div class="box">
          燕子去了，有再來的時候；楊柳枯了，有再青的時候；桃花謝了，有再開的時 候。可是，聰明的，你告訴我，咱們的日子爲何一去不復返呢？——是有人偷了他 們罷：那是誰？又藏在何處呢？是他們本身逃走了罷——現在又到了哪裏呢？
     我不知道他們給了我多少日子，但個人手確乎（1）是漸漸空虛（2）了。在默默裏算着，八千多日子已經從我手中溜去，像針尖上一滴水滴在大海里，個人日子滴在時間的流裏，沒有聲音，也沒有影子。我不由頭涔涔（3）而淚潸潸（4）了。
       去的儘管去了，來的儘管來着；去來的中間，又怎樣地匆匆呢？早上我起來的時候，小屋裏射進兩三方斜斜的太陽。太陽他有腳啊，輕輕悄悄地挪移了；我也茫茫然跟着旋轉。因而——洗手的時候，日子從水盆裏過去；吃飯的時候，日子從飯碗裏過去；默默時，便從凝然的雙眼前過去。我覺察他去的匆匆了，伸出手遮挽時，他又從遮挽着的手邊過去，天黑時，我躺在牀上，他便伶伶俐俐（5）地從我身上跨過，從我腳邊飛去了。等我睜開眼和太陽再見，這算又溜走了一日。我掩着面嘆息。可是新來的日子的影兒又開始在嘆息裏閃過了。 　　
      在逃去如飛的日子裏，在千門萬戶的世界裏的我能作些什麼呢？只有徘徊（6）罷了（7），只有匆匆罷了；在八千多日的匆匆裏，除徘徊外，又剩些什麼呢？過去的日子如輕煙，被微風吹散了，如薄霧，被初陽蒸融了；我留着些什麼痕跡呢？我何曾留着像遊絲（8）樣的痕跡呢？我赤裸裸來到這世界，轉眼間也將赤裸裸的回去罷？但不能平的，爲何偏要白白走這一遭啊？ 　　
       你聰明的，告訴我，咱們的日子爲何一去不復返呢？
    </div>
</body>
</html>

文字太多超出了設定的高度，

其實裏面使用默認屬性

overflow: visible

 如今設置超出部分隱藏：

  .box{width: 200px;height: 200px;border: 1px solid #000;overflow: hidden}

隱藏看不見了，可是超出的我還須要：

     .box{width: 200px;height: 200px;border: 1px solid #000;overflow: scroll}

下面沒有滾動欄的屬性值；

       .box{width: 200px;height: 200px;border: 1px solid #000;overflow: auto}

還能夠繼承父的超出部分的怎麼作：

    <style> body{overflow: hidden}
        .box{width: 200px;height: 200px;border: 1px solid #000;overflow: inherit} </style>

使用這個屬性以前：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{padding: 0;margin: 0}
        .father{
            width: 800px;
            margin: 50px auto;
            border: 1px solid #000;
        }
        .child1{
            height: 400px;
            background-color: red;
            float: left;
        }
        .child2{
            height: 200px;
            background-color: green;
            float: right;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="child1">魔降風雲變</div>
        <div class="child2">小馬過河</div>
    </div>
</body>
</html>
View Code

使用這個屬性以後，

        .father{
            width: 800px;
            margin: 50px auto;
            border: 1px solid #000;
            overflow: hidden;
        }

給父盒子使用overflow: hidden;以後，父盒子被撐起來了。

實現的緣由：使用overflow: hidden;以後，在CSS2.1版本中會撐起一個BFC 塊級格式化上下文

5.BFC詳解

 https://book.apeland.cn/details/355/

BFC佈局規則
  1. 1.內部的Box會在垂直方向，一個接一個地放置。
  3. 2.Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
  5. 3.每一個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。
  7. 4.BFC的區域不會與float 元素重疊。
  9. 5.BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
  11. 6.計算BFC的高度時，浮動元素也參與計算
那些元素會生成BFC
  1. 1.根元素
  3. 2.float屬性不爲none
  5. 3.position爲absolute或fixed
  7. 4.display爲inline-block
  9. 5.overflow不爲visible

 

.overflow不爲visible時會產生BFC。BFC會自動讓內部浮動元素計算高度。浮動帶來的影響就是子元素不會計算高度，父元素不知道用哪一個高度，撐不起父元素。BFC以最高的元素爲基準撐起父元素。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{padding: 0;margin: 0}
        .father{
            width: 800px;
            margin: 50px auto;
            border: 1px solid #000;
            overflow: hidden;
        }
        .child1{
            height: 400px;
            background-color: red;
            /*float: left;*/
        }
        .child2{
            height: 200px;
            background-color: green;
            /*float: right;*/
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="child1">魔降風雲變</div>
        <div class="child2">小馬過河</div>
    </div>
</body>
</html>
View Code

取消紅色和綠色盒子的浮動，給父盒子添加屬性overflow: hidden;  這樣就造成了BFC（可查看造成的條件在上）：

驗證了第一句話：1.內部的Box會在垂直方向，一個接一個地放置。

由之前博客（塌陷問題）可知：Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊

根元素也是實現了BFC的。

 將紅色盒子設爲左浮動（出現了收縮現象），浮動和不浮動的盒子都是貼着父元素左邊。

由此證實：3.每一個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。

 

 

 哪些會造成BFC   2.float屬性不爲none

 紅色盒子左浮的時候，float屬性不爲none造成BFC，綠色盒子寬度800px

將綠色盒子設置成overflow:hidden的時候綠盒子造成BFC：。4.BFC的區域不會與float 元素重疊。

 

兩個都是左浮的的子盒子通常都是造成BFC  。 4.BFC的區域不會與float 元素重疊。 因此兩個左浮的盒子一個貼父元素的邊。一個被擠出第一個浮動元素的BFC，貼着第一個浮動元素，實現並排。

  1. .BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
  3. 6.計算BFC的高度時，浮動元素也參與計算

像下面這些元素：

這些能夠顯現出來的不能用overflow:hidden；不然超出部分隱藏，那麼就顯示不出來這些內容了。若是這行沒有須要顯現出來的這種效果，那麼能夠用overflow:hidden。上面的那個都是用的固定高度。

清除浮動 給父元素添加固定高度，內牆法，僞元素清除法，overflow:hidden    僞元素清除法不會出現問題，overflow:hidden 須要注意超出部分也會隱藏的問題。

 

六、絕對定位和相對定位

 6.1技術使用到的地方舉例

鼠標懸浮時，form表單顏色加深

鼠標懸浮小米9，也有改變。 懸浮  僞類選擇器   hover

鼠標懸浮搜索圖標，改變：

小米9和小米9 SE 怎麼實如今搜索框裏呢？定位實現的。而且這兩個是壓蓋在了input上面。

下面購物車這裏下拉下來了，下拉下來是js操做，一個動畫，捲簾門效果下拉的。下拉下來的這塊內容優先級是大於下面那塊內容的。

 

下面紅框是定位效果：

 

看下面：1是2定位過去的

 

 

還用了清除浮動，在下邊的div裏。

 

6.2相對定位：

 (子盒子設置相對定位後)相對於原來的位置，移動方向與屬性(上下左右)反，移動屬性值個單位

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box{width: 500px;height: 600px;border: 1px solid #000}
        .box .a{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .box .b{
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .box .c{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
    </div>
</body>
</html>

三個標準文檔流下的盒子：

給b綠色盒子設置相對定位：

        .box .b{
            width: 200px;
            height: 200px;
            background-color: green;
            position: relative;
        }

給b設置相對定位後刷新沒有效果，說明設置相對定位後與咱們的標準文檔流的盒子沒有區別，也米有像浮動同樣脫標

設置相對定位後，可使用上下左右四個屬性的英文作設置。那麼我用top試試：

        .box .b{
            width: 200px;
            height: 200px;
            background-color: green;
     position: relative; top :30px;
        }

結果是在父盒子中，設置了相對定位的綠盒子相對於原來它在標準文檔流下當前盒子所在的位置下移30px，top 30px 頂部距離原位置30px，移動方向與屬性相反。而且原來的位置不像浮動那樣，它仍是佔有原來的位置。移動後顯示的位置若是存在其它元素，會存在壓蓋現象。這裏是綠色壓蓋了藍色

若是我再給第二個盒子設置一個left

        .box .b{
            width: 200px;
            height: 200px;
            background-color: green;
            position: relative;
            top :30px;
            left: 50px;
        }

 (子盒子設置相對定位後)相對於原來的位置，移動方向與屬性(上下左右)反，移動屬性值個單位

雖然這樣能夠實現壓蓋，可是原來的位置還保留在那裏，會影響整個佈局的。

那麼這種相對定位的使用場景通常是作子絕父相的佈局。子元素設置絕對定位，父元素設置相對定位。

 

特徵：

  • 與標準文檔流下的盒子沒有任何區別

  • 留「坑」，會影響頁面佈局

做用：

作「子絕父相」佈局方案的參考

參考點：

 　　以原來的盒子爲參考點

6.3絕對定位

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box{width: 500px;height: 600px;border: 1px solid #000}
        .box .a{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .box .b{
            width: 200px;
            height: 200px;
            background-color: green;

        }
        .box .c{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
    </div>
</body>
</html>
View Code

回到以前的狀態

給b綠盒子設置絕對定位

        .box .b{
            width: 200px;
            height: 200px;
            background-color: green;
            position: absolute;
        }

c藍色盒子不見了

給藍色盒子寬度加100，改爲300。發現綠色盒子是脫標了。

給一個標準流文檔下的盒子設置了絕對定位，第一種現象是它脫標了，不在頁面上佔位置

購物車這裏也是脫標了，不在頁面上佔位置。若是它在頁面上佔位置，那麼整個導航就會被拖下去的。因此說這裏確定也是絕對定位的。因此作壓蓋的時候咱們通常使用的是絕對定位

壓蓋

壓蓋

絕對定位也有四個屬性：上下左右

這裏給b綠色盒子設置絕對定位top 20px

        .box .b{
            width: 200px;
            height: 200px;
            background-color: green;
 position: absolute; top:20px;
        }

那麼b綠色盒子距離頂部20px，是以body爲參考呢仍是以父盒子爲參考呢？給父盒子上下設置margin，左右居中

 .box{width: 500px;height: 600px;border: 1px solid #000;margin: 100px auto}

我再給b綠盒子設置一個left值

 

我將b綠盒子絕對定位的屬性上左設置爲0px：

        .box .b{
            width: 200px;
            height: 200px;
            background-color: green;
            position: absolute;
            top:0px;
            left: 0px;
        }

當我將b綠盒子設置下左0px的時候，它以瀏覽器顯示的左下角爲目標，即便改變左下角的位置它仍是跟着移動

設置絕對定位的子盒子右下0px

 

我把滾動條下移：它動了

我將它放到右上角，移動滾動條，它最終會變沒的。

 

 

 

 一、不針對於祖先元素的參考點
有top參與的狀況：參考點是頁面的左上角或者右上角。
有bottom參與的狀況：參考點是首屏的左下角或者右下角。

 

因此絕對定位是：子盒子設置了絕對定位，上下左右的屬性值是距離上下左右的距離。它脫離標準文檔流不佔位置了。一個屬性時就還有一邊跟父盒子對應。

 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box{width: 500px;height: 600px;border: 1px solid #000;}
        .box .a{
            width: 200px;
            height: 200px;
            background-color: red;

        }
        .box .b{
            width: 200px;
            height: 200px;
            background-color: green;
            position: absolute;
            bottom: 20px;
            left: 20px;
        }
        .box .c{
            width: 300px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
    </div>
</body>
</html>
View Code

如今讓b綠色盒子絕對定位且下20px，左20px。綠色盒子脫離了標準文檔流不佔位置。

6.四、子絕父相的佈局

子絕父相總結：

絕對定位的子盒子以離它最近的相對定位的祖輩盒子的對應角爲原點。(跟margin無關，跟相對定位的祖輩盒子的border有關)。若是祖輩沒有設置相對定位的，那麼以瀏覽器顯示框的四個對應角爲原點。子盒子用上下左右屬性來定位本身對應邊距離對應原點上下左右屬性值個位置。屬性值能夠爲負，負爲在父盒子或瀏覽器顯示框的外部區域；正爲父盒子或瀏覽器顯示框的內部區域。

 

再讓父盒子設置相對定位

 .box{width: 500px;height: 600px;border: 1px solid #000;position:relative}

絕對定位的子盒子以相對定位的父盒子的四個邊爲參考作絕對定位。

給設置了相對定位的父盒子設置右浮，父盒子在body下往右靠，絕對定位的子盒子也跟着走，相對於父盒子的位置不變。

加相對定位的綠盒子下屬性改成top屬性，

子絕父相。父正常改變位置，子相對父位置不變，子以父的四個頂點爲原點，在父內絕對定位且父內空間爲正座標，超出父則爲負座標。

 

 子絕父相。父正常改變位置，子相對父位置不變，子以父的四個頂點爲原點，在父內絕對定位且父內空間爲正座標，超出父則爲負座標。

 

下圖父相對對定位且右浮。子（綠色）絕對定位left: 20px;bottom: -50px;   在父內絕對定位且父內空間爲正座標，超出父則爲負座標。左20子左在父內距父左20。下-50子下距父下50且子下在父外，父外爲負，父內爲正，父邊爲0。

 

 

 如今以下：

<style>
    body{margin: 100px}
    .box{width: 500px;height: 600px;border: 1px solid #000}
    .box .a{
        width: 200px;
        height: 200px;
        background-color: red;
    }
    .box .b{
        width: 200px;
        height: 200px;
        background-color: green;
        position: absolute;
        /*top: 20px;*/
        left: 20px;
        bottom: -50px;
    }
    .box .c{
        width: 300px;
        height: 200px;
        background-color: blue;
    }
</style>

 子絕對定位，左20，下-50。

 

        body{margin: 100px;border: 4px solid yellow;}
        #father-of-box{border: 4px solid purple;width: 800px;height: 800px;}
        .box{width: 500px;height: 600px;border: 1px solid #000}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        body{margin: 100px;border: 4px solid yellow;}
        #father-of-box{border: 4px solid purple;width: 800px;height: 800px;}
        .box{width: 500px;height: 600px;border: 1px solid #000}
        .box .a{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .box .b{
            width: 200px;
            height: 200px;
            background-color: green;
            position: absolute;
            /*top: 20px;*/
            left: 20px;
            bottom: -50px;
        }
        .box .c{
            width: 300px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="father-of-box">
        <div class="box">
            <div class="a"></div>
            <div class="b"></div>
            <div class="c"></div>
        </div>
    </div>
</body>
</html>
View Code

box，father,body沒有設置相對定位。box內第二個盒子綠盒子絕對定位左20下-50結果以瀏覽器顯示出來的對應角爲原點，參考點不是body的邊界，在body的margin內的角。

 如今給father-of-box設置相對定位。

 #father-of-box{border: 4px solid purple;width: 800px;height: 800px;position: relative}

 如今綠盒子以father-of-box的左下角爲原點。

 

給father-of-box左margin20，下margin60，絕對定位的子盒子以離它最近的相對定位的祖輩盒子的對應角爲原點。(跟margin無關，跟相對定位的祖輩盒子的border有關)

將box設置爲相對定位：

 .box{width: 500px;height: 600px;border: 1px solid #000;position: relative}

 將box設置爲相對定位後，由於絕對定位的子盒子以離它最近的相對定位的祖輩盒子的對應角爲原點。(跟margin無關，跟相對定位的祖輩盒子的border有關)，因此以box的左下角爲原點

 
子絕父相總結：

絕對定位的子盒子不佔標準文檔流的空間，可是會壓蓋別人的位置。絕對定位的子盒子以離它最近的相對定位的祖輩盒子的對應角爲原點。(跟margin無關，跟相對定位的祖輩盒子的border有關)。若是祖輩沒有設置相對定位的，那麼以瀏覽器顯示框的四個對應角爲原點。子盒子用上下左右屬性來定位本身對應邊距離對應原點上下左右屬性值個位置。屬性值能夠爲負，負爲在父盒子或瀏覽器顯示框的外部區域；正爲父盒子或瀏覽器顯示框的內部區域。

 6.5浮動和絕對定位的特徵：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        span{background-color: red;}
    </style>
</head>
<body>
    <span>魔降風雲變</span>
</body>
</html>

給它span設置一個左浮動：

span{background-color: red;float: left}

去掉浮動，再添加一個span，

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        span{background-color: red;}
    </style>
</head>
<body>
    <span>魔降風雲變</span>
    <span>我是小馬過河</span>
</body>
</html>
View Code

有空白摺疊

將兩個設置左浮動

span{background-color: red;float: left}

去掉了空白摺疊

 span{background-color: red;float: left;width: 200px;height: 60px}

添加左浮動以後，行內標籤span不用轉行內塊也能夠設置寬高了。這時浮動元素帶來的特徵

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        span{background-color: red;position: absolute;width: 600px;height: 60px}
    </style>
</head>
<body>
    <span>魔降風雲變</span>
    <span>我是小馬過河</span>
</body>
</html>

給span行內標籤設置絕對定位也能夠添加寬高，可是相對定位是不能夠的。一旦給一個元素設置了浮動，它的寬高就不受限制了。

好比下面這個logo，設置了margin-top很差使了。會拽着父元素往下走

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .container{width: 100%;height: 100px;margin: 20px auto;background-color: #000; }
        .logo{width: 55px;height: 55px;background-color: #ff6700;}
    </style>
</head>
<body>
    <div class="container">
        <div class="logo"></div>
    </div>
</body>
</html>

想要將黃色盒子在褐色盒子中垂直居中，

給log添加一個margin-top,父盒子容器被拉下來了，可是log仍是沒有動

        .logo{width: 55px;height: 55px;background-color: #ff6700;margin-top:30px}

給log再加個浮動：

.logo{width: 55px;height: 55px;background-color: #ff6700;margin-top:30px;float: left}

讓子盒子垂直居中，須要讓子盒子在父元素中設置浮動，才能使用margin-top的方法將子盒子在父盒子中垂直移動位置

七、iconfont使用方法

小圖標使用的是iconfont

像這種小圖標，若是東西多了佔用本身的帶寬，請求本身的也多了。若是是用的別人服務器裏寫好的圖標，本身服務器壓力也能減少一點。

 網址：https://www.iconfont.cn/

它們其實就是ttf字體文件

可簡單搜索,下載調色:

添加入庫：

添加至項目->沒有項目就新建->添加到項目中能夠查看到剛纔添加的圖標。若是用連接的方式有三種用法 unicode 、font class 、symbol。

不會使用的話查看這裏

解壓以後目錄修改成fonts目錄，demo裏面有使用方法。刪了就行，沒用。

 

 在css目錄下建立myIconfon.css樣式，將使用方法裏的內容複製到樣式文件中。url改成正確的fonts目錄這個路徑下。

樣式和字體配置好後就能夠在html中引入這個css樣式<link rel="stylesheet" href="css/myIconfont.css">

第三步：挑選相應圖標並獲取字體編碼，應用於頁面<i class="iconfont">&#x33;</i>

 

 使用案例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/myIconfont.css">
    <style>
        i.active{font-size: 30px}
    </style>
</head>
<body>
    <i class="iconfont active">&#xe600;</i>
    <input type="submit" value="&#xe61f;" class="iconfont">
</body>
</html>

經過font-size: 30px控制圖標大小。

若是我把fontface的字體文件路徑註釋掉，就成了小方框

css配置的代碼：css和fonts同目錄下。

@font-face {font-family: 'iconfont';
    src: url('../fonts/iconfont.eot');
    src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/iconfont.woff') format('woff'),
    url('../fonts/iconfont.ttf') format('truetype'),
    url('../fonts/iconfont.svg#iconfont') format('svg');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}

這樣幾個小圖標也是iconfont

 

 還有另外一種方法使用，使用網上的字體樣式而不是本地下載下來的。

將本地的字體文件地址改爲網絡上的地址連接，同樣可使用：

 

八、子絕父相的應用案例之一

大框是個div，1和2是個div。2裏面有個圖片。1裏面有個3是列表ul，4這裏隱藏了一個li，類名從下面的元素審查裏看出和其它li標籤有區別，這裏隱藏了。

這個隱藏的li裏面有個子標籤div。

li父元素設置相對定位

子元素設置絕對定位。子絕父相的結構：

 子元素top  88, 向下移了88；left -92  負的  向左移了92，到了如今的位置。子絕父相，絕對定位不佔位置。這個div覆蓋了下面的圖片，可是透明度高，能看到一點壓蓋的圖片。它的優先級z-index是21，比下面圖片優先級高，壓蓋了下面的圖片。

 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #box{
            width: 1226px;
            height: 100px;
            margin: 0 auto;
            background: #000;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li class="active">魔降風雲變1</li>
            <li class="active">魔降風雲變2</li>
            <li class="active">魔降風雲變3</li>
            <li class="active">魔降風雲變4</li>
            <li class="active">魔降風雲變5</li>
            <li class="active">魔降風雲變6</li>
            <li class="active">魔降風雲變7</li>
            <li class="active">魔降風雲變8</li>
            <li class="active">魔降風雲變9</li>
        </ul>
    </div>
</body>
</html>

一個居中div，裏面有ul，不少個li。

 清除浮動

        #box ul{
         overflow: hidden;
        }

9個li要浮動，overflow: hidden;要作清除浮動

    <style>
        #box{
            width: 1226px;
            height: 100px;
            margin: 0 auto;
            background: #000;
        }
        #box ul{
 overflow: hidden; padding: 12px 0 0 30px;
            width: 500px;
            height: 88px;
            background-color: red;
        }
    </style>

ul大小，寬高用內容來填充。ul上右設置padding

 

默認margin和padding沒有取消，取消默認：

ul中默認有黑圓圈這些，取消默認 

 ul{list-style: none}

把兩個背景色去掉，內容從這裏開始顯示：

ul大小這樣的：

讓url下的每一個li浮動，第一個li單獨設置一下，設置寬度100px吧。，高度和ul高度同樣就能夠。將ul寬度取消，給li設置寬度，有幾個li就計算出來，而後在加上第一個li設置的100寬度。

 

    <style>
        *{margin: 0;padding: 0}
        #box{
            width: 1226px;
            height: 100px;
            margin: 0 auto;
            /*background: #000;*/
        }
        ul{list-style: none}
        #box ul{
            overflow: hidden;
            padding: 12px 0 0 30px;
            width: 500px;
            height: 88px;
            /*background-color: red;*/
        }
        #box ul li{
            float: left;
         width: 60px;
            height: 88px;
        }
        #box ul li.active{
            width: 100px;
            height: 88px;
            background-color: green;
        }
    </style>

ul寬度不夠，li少了一個

去掉ul的寬度：

讓li裏的文字居中，能夠padding-top去擠，

        #box ul li{
            float: left;
            width: 60px;
            height: 88px;
            padding-top: 30px;
        }

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{margin: 0;padding: 0}
        #box{
            width: 1226px;
            height: 100px;
            margin: 0 auto;
            /*background: #000;*/
        }
        ul{list-style: none}
        #box ul{
            overflow: hidden;
            padding: 12px 0 0 30px;
            /*width: 500px;*/
            height: 88px;
            /*background-color: red;*/
        }
        #box ul li{
            float: left;
            width: 60px;
            height: 88px;
            padding-top: 30px;
        }
        #box ul li.active{
            width: 100px;
            height: 88px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li class="active"></li>
            <li>魔降1</li>
            <li>魔降2</li>
            <li>魔降3</li>
            <li>魔降4</li>
            <li>魔降5</li>
            <li>魔降6</li>
            <li>魔降7</li>
        </ul>
    </div>
</body>
</html>
View Code

加上背景色，有個盒子想調整到這個位置上：

 
 
#box ul{
    overflow: hidden;
    padding: 12px 0 0 30px;
    /*width: 500px;*/
    height: 88px;
    background-color: red;
}
 
 

 #box ul li{
            float: left;
            width: 60px;
            height: 88px;
            padding-top: 30px;
        }
        #box ul li.active{
            width: 100px;
            height: 88px;
            background-color: green;
      position: relative;
        }
         #box ul li.active .box{
       position: absolute;
             width: 234px;
             height: 600px;
 background-color: rgba(0,0,0,.2);
             top: 0;
             left: 0;
         }
 

 

加個綠色盒子的子盒子（透明色的盒子），子盒子絕對定位，綠盒子相對定位。子盒子上左爲o。由於設了超出部分隱藏屬性，因此沒顯示。
 

 
 

我但願透明盒子下移再右移，那麼就不能用overflow: hidden;。去掉overflow:hidden ,使用僞元素清除法。
 

 
 
        .clearfix{
   content: ''; clear: both; display: block;
        }


 <ul class="clearfix">
 

 

去掉overflow:hidden ,以前使用它的目的是ul
 

 

取消掉ul屬性padding-top
 

 

 
 

 
 
        ul{list-style: none}
        #box ul{
            /*overflow: hidden;*/
            padding: 12px 0 0 30px;
            /*width: 500px;*/
            height: 88px;
            background-color: red;
        }
        #box ul li{
            float: left;
            width: 60px;
            height: 88px;
            background-color: yellow;
        }
        #box ul li.active{
            width: 100px;
            height: 88px;
            background-color: green;
            position: relative;
        }
         #box ul li.active .box{
             position: absolute;
             width: 234px;
             height: 600px;
             background-color: rgba(0,0,0,.2);
            top: 88px; left: -30px;
         }
 

 

top是下移綠盒子高度值個單位，left是子盒子左遠離父盒子左的單位數，是負值。由於子盒子要和紅盒子左豎直方向對齊，因此左移ul在紅盒子的左padding值。
 

 

 
 

這個也是定位：
 

 

 
 

圖片src，文本都是數據：圖片放在某個目錄下，數據庫存這些圖片的信息及圖片的地址。看這些聯想表的結構是什麼樣的。
 

 

 
 

 看圖片想象數據庫表的結構：一條數據，能夠是表的一行。字段有 id ，推薦，文章標題，內容，發佈時間，閱讀等等。若是本身創建表的話，存儲字段是怎樣的。
 



        

            

        	





    

		

            
相關文章

            

                

                

                    

                

            


            
相關標籤/搜索

            
        


    

        

            

        

        

        
        

        

        

    




	

    





    

    	

    

        每日一句
    

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







    

    


    



    

        本站公眾號
    

    

           歡迎關注本站公眾號,獲取更多信息

        
    




    

    




	


	







    

        聯繫我們
        最近搜索
        最新文章
        
        沪ICP备13005482号-10

            MyBatis教程
            SQL 教程
            MySQL教程
            Java 教程
            Thymeleaf 教程
            Hibernate教程
            Spring教程 
            Redis教程