解決高度塌陷、定位問題

weixin_33807284發表於2018-07-11

高度塌陷

父元素包含的子元素，子元素多高。父親沒指定，預設子元素高。
子元素設定浮動以後，子元素脫離文件流，此時子元素無法撐起父元素的高度，導致父元素的高度塌陷
我們可以將父元素的高度寫死，避免塌陷
元素重疊，子父一起動。

解決高度塌陷

面試 開啟BFC
特點
1 設定元素浮動 缺點寬度丟失 不推薦
2設定元素絕對定位 不推薦和1一樣
3 設定元素為inline-block 缺點寬度丟失 也不推薦
4將元素的overflow設定為一個非visible的值 推薦

ie6以下不執行BFC。
（但是還有背的屬性 haslayout（類似BFC））
（只是在ie裡面支援）zoom：1；後面代表放大倍數。1是預設不放大。
所以預設這二個同時寫。
ie6設定寬度了，在伺服器端就不會踏。

清除浮動

     .box1{
         width: 100px;
         height: 100px;
         background-color: yellow;
         /*設定box1向左浮動*/
         float: left;
     }
     .box2{
         width: 200px;
         height: 200px;
         background-color: yellowgreen;

box1影響box2上移，為了不影響浮動對當前元素產生的影響。
clear來完成功能
可選值：
none，預設值，不清除浮動
left，清除左側浮動元素對當前元素的影響
right，清除右側浮動元素對當前元素的影響
both，清除兩側浮動元素對當前元素的影響
清除對他影響最大的那個元素的浮動

解決高度塌陷

可以直接在高度塌陷的父元素的最後，新增一個空白的div，由於這個div並沒有浮動，所以他是可以撐開父元素的高度的

.clear{
            clear: both;
        }

可以通過after偽類向元素的最後新增一個空白的塊元素，然後對其清除浮動最推薦
after內聯元素。偽類

.clearfix:after{
            content: "";
            /*轉換為一個塊元素*/
            display: block;
            /*清除兩側的浮動*/
            clear: both;
        }
        /*在ie6中不支援after偽類處理*/
        .clearfix{
            zoom: 1;
        }

相對定位

相對定位元素，位置還有，不脫離文件流。所以塊還是快，內聯還是內聯。position：relative。會提升一個層級。
相對自身的位置定位。

left: 100px;
top: 200px;

絕對定位。

position：absolute。
脫離文件流。
相對於離他最近開啟定位的祖先元素。都沒開就是瀏覽器左上角。
會提升一個層級。
內聯變塊，寬高有效，塊變被內容撐開。
父元素開相對
子元素相對於父元素開絕對。
relative（必須有）

固定定位

static：預設值，元素沒有開啟定位
relative：開啟元素的相對定位
absolute：開啟元素的絕對定位
fixed：開啟元素的固定定位（也是絕對定位的一種）
固定定位也是一種絕對定位，它的大部分特點都和絕對定位一樣
不同的是：
固定定位永遠相對00
當滾動條動，他也不走。
fixed

11576306-80a4521f241fcb75.png
homework3.png

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>homework</title>
    <style type="text/css">

        *{
            margin: 0;
            padding: 0;
        }
        body{
            font: 12px/1 字型
        }
        .outer{
            width: 300px ;
            /*height:471px ;*/
            /*background-color: #bfa;*/
            margin: 0 auto;
        }
        .title{
            border-top: 2px #019e8b solid;
            height:36px ;
            background-color: #f5f5f5;  
            line-height: 36px;
            padding: 0px 22px 0px 16px;
        }

        .title a{
            float: right;
            color: red
        }
        
        .title h3{
            font: 16px/36px '微軟雅黑'
            /*改掉預設的行高*/
        }

        .content h3{
            margin-top: 15px;
            margin-bottom: 15px;
        }
        
        .content{
            border: 1px solid #deddd9;
            /*高考內容撐開*/
            padding: 0px 28px 0px 20px
        }
        .content li{
            margin-bottom: 15px;
        }

        .content a{
            color: black;
            text-decoration: none;
            font-size:12px; 
        }

        .content a:hover{
            color: red;
            text-decoration:underline;
        }

        .content ul{
            list-style: none;
            border-bottom: 1px dashed #deddd9;
        }

        .content .red-font{
            color: red;
            font-weight: bold;
        }



        .content .right{
            float: right;
        }

        .content .no-border{
            border: none;
        }





    </style>
</head>
<body>
    
    <div class="outer">
        <div class="title">
            <a href="#">18年面授開班計劃</a>
            <h3>近期開班</h3>
            
        </div>
        <div class="content">
            <h3><a href="#">人工智慧+python-高薪就業班</a></h3>
            <ul>
                <li>
                    <a class='right' href="#"><span class="red-font">預約報名</span></a>
                    <a href="#">開班時間： <span class="red-font">2018-04-26</span></a>
                    
                </li>
                <li>
                    <a class='right' href="#"><span class="red-font">無座名額爆滿</span></a>
                    <a href="#">開班時間： <span class="red-font">2018-04-26</span></a>
                    
                </li>
                <li>
                    <a class='right' href="#"><span >開班盛況</span></a>
                    <a href="#">開班時間： <span >2018-04-26</span></a>
                    
                </li>
                <li>
                    <a class='right' href="#"><span >開班盛況</span></a>
                    <a href="#">開班時間： <span ">2018-04-26</span></a>
                    
                </li>
                <li>
                    <a class='right' href="#"><span >開班盛況</span></a>
                    <a href="#">開班時間： <span >2018-04-26</span></a>
                    
                </li>
                
            </ul>
            <h3><a href="#">Android開發+測試-高薪就業班</a></h3>
            <ul>
                <li>
                    <a class='right' href="#"><span class="red-font">預約報名</span></a>
                    <a href="#">開班時間： <span class="red-font">2018-04-26</span></a>
                    
                </li>
                
                <li>
                    <a class='right' href="#"><span >開班盛況</span></a>
                    <a href="#">開班時間： <span >2018-04-26</span></a>
                    
                </li>
                <li>
                    <a class='right' href="#"><span >開班盛況</span></a>
                    <a href="#">開班時間： <span ">2018-04-26</span></a>
                    
                </li>
                <li>
                    <a class='right' href="#"><span >開班盛況</span></a>
                    <a href="#">開班時間： <span >2018-04-26</span></a>
                    
                </li>
                
            </ul>
            <h3><a href="#">大資料軟體開發-青芒工作室</a></h3>
            <ul class="no-border">
                <li>
                    <a class='right' href="#"><span class="red-font">預約報名</span></a>
                    <a href="#">開班時間： <span class="red-font">2018-04-26</span></a>
                    
                </li>
                
                <li>
                    <a class='right' href="#"><span >開班盛況</span></a>
                    <a href="#">開班時間： <span ">2018-04-26</span></a>
                    
                </li>
                <li>
                    <a class='right' href="#"><span >開班盛況</span></a>
                    <a href="#">開班時間： <span >2018-04-26</span></a>
                    
                </li>
                
            </ul>
        </div>
    </div>





</body>
</html>

相關文章