20181207_Second_小結

時間 2019-11-08

標籤 second 小結简体版

原文原文鏈接

1. 上下 200*200 盒子的重疊，切記用 absolute 絕對定位爲最佳解決方案css

2. 移動端多使用粘連佈局html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title></title>
        
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <meta name="viewport"
              content="user-scalable=no,
                       width=device-width,
                       initial-scale=1.0,
                       minimum-scale=1.0,
                       maximum-scale=1.0"/>
        
        <style rel="stylesheet" type="text/css">
            html, body, div {
                margin: 0;
                padding: 0;
            } html, body { width: 100%; height: 100%; /* 參照屏幕區域的高 */
                min-width: 600px; overflow: hidden;
            } #wrap { width: 100%; min-height: 100%; // 使 footer 始終在屏幕的底部
                
                background: cadetblue;
            } #content { width: 100%; padding-bottom: 50px;
                
                font-size: 14px;
                background: darkgrey;
            } #footer { // 必須放在 wrap 的外面 width: 100%; height: 50px; margin-top: -50px;
                
                background: chocolate;
                text-align: center;
                line-height: 50px;
            }
        
        </style>
    </head>
    
    <body>
        
        <!-- 模擬屏幕區域 -->
        <div id="wrap">
            <!-- 內容區域 -->
            <div id="content"></div>
        </div>
        
        <!-- 底部區域 -->
        <div id="footer"></div>
    </body>
</html>

3. 瀏覽器有兩個滾動條瀏覽器

單獨給 html 或者 body 加 overflow: scroll; 都會做用在 document 上，生成一個滾動條
同時給 html、body 加 overflow: scroll; 會出現兩個滾動條
html 的 overflow: scroll; 會做用於 document
body 的 overflow: scroll; 會做用於 body

4. 在子元素浮動時，解決父元素高度塌陷佈局

(1) 給父元素設置固定 heightui

(2) 使父元素開啓 BFCspa

①父元素 overflow: hidden;scala

② 父元素也浮動 float代理

③ 絕對定位 position: absolute;code

④ 固定定位 position: fixed;htm

IE6 開啓 BFC : zoom: 1;

(3) 使用塊元素隔離父、子元素

⑤ 添加一個換行

<div id="wrap">
    <div id="box"></div>
    <br clear="all">    
</div>

⑥ 添加一個空的 <div> 清除浮動 clear: both;

⑦ 僞元素 before 轉換爲塊

.clearfix:after {    /* 僞元素默認是 inline 行內元素 */
    content:"";    /* 充當父元素的最後一個子元素，默認是 inline 行內元素, 至關一個 <span></span> */
    display: block;   /* 將 僞元素設置爲 block 塊級元素  */
    clear: both;
}