[19/06/07-星期五] CSS基礎_佈局&定位&背景樣式

時間 2019-11-16

標籤星期五 css 基礎佈局定位背景樣式欄目 CSS 简体版

原文原文鏈接

1、固定佈局（不適應設備的瀏覽器的變化）css

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>簡單佈局</title>
        <style type="text/css">
            /*清除默認樣式*/
            *{
                margin: 0;
                padding: 0;
            }
            .header{
                width: 1000px;
                height: 100px;
                background-color: yellowgreen;
                margin: 0 auto;
            }
            .content{
                width: 1000px;
                height: 400px;
                background-color: orange;
                margin: 10px auto;
            }
                .left{
                    width: 200px;
                    height: 100%;
                    background-color: skyblue;
                    /*設置向左浮動*/
                    float: left;
                        }
                .center{
                    width: 580px;
                    height: 100%;
                    background-color: royalblue;
                    float: left;
                    margin: 0 10px;
                    
                }
                .right{
                    width: 200px;
                    height: 100%;
                    background-color: cyan;
                    float: left;
                }
            .footer{
                width: 1000px;
                height: 100px;
                background-color: salmon;
                margin: 0 auto;
            }
            
        </style>
    </head>
    <body>
        <!--頭部信息-->
        <div class="header"> </div>
            
        <!--主體內容-->
        <div class="content"> 
            <!--左中右3個div-->
            <div class="left"> </div>
            <div class="center"> </div>
            <div class="right"> </div>    
        </div>
            
        <!--底部信息-->
        <div class="footer"> </div>
            
        
    </body>
</html>

擴展：高度塌陷html

　　在文檔流中，父元素的高度默認被子元素撐開，也就是子元素多高，父元素就多高。瀏覽器

　　在浮動流中，當爲子元素設置浮動之後，子元素會徹底脫離文檔流，此時會致使子元素沒法撐起父元素的高度，即會致使父元素的塌陷。因爲父元素的高度塌陷，因此佈局

會致使父元素下邊的元素向上移動，這樣頁面會很混亂。因此必定要避免高度塌陷。網站

解決方案1：能夠將父元素的高度寫死，可是這樣父元素的高度不能自動適應子元素高度的改變。因此這種方案不推薦。url

解決方案2：spa

　　根據W3C的標準，在頁面中的元素都有一個隱含的屬性叫Block Formatting Context 簡稱BFC，該屬性能夠打開或關閉，默認是關閉的。code

　　當設置開啓以後，元素會具備以下的特性：orm

　　　　一、父元素的垂直外邊距不會和子元素重疊。htm

　　　　二、開啓BFC的元素不會被浮動元素所覆蓋；

　　　　三、開啓BFC的元素能夠包含浮動的子元素。

　　如何開啓？（只能間接開啓）

　　　　一、設置元素浮動（即讓父元素也浮動起來）：能夠撐開高度，可是能夠致使父元素的寬度丟失，並且也會致使下邊元素上移

　　　　二、設置元素的絕對定位：跟方案1同樣效果

　　　　三、設置元素爲inline-block：能夠解決問題，可是也是致使父元素的寬度丟失。

　　　　四、將元素的overflow設置爲一個非visible的值。通常設置爲auto或hidden是最好的方案，推薦設置爲hidden，反作用最小。

注意：IE6及如下不支持BFC,它具備一個隱含屬性叫haslayout，做用和BFC相似，能夠開啓這個。

　　　　開啓方式：直接將元素的zoom（放大）設置爲1便可，反作用最小。zoom： 1 表示不放大元素，可使用這種方式。只在IE中支持，其餘不支持。

解決方案3：

前言：如何清除浮動的影響？

　　　　使用clear來清除其餘浮動元素（上邊元素）對當前元素（下邊元素）的影響（即下邊往上移動），其餘元素該浮動還浮動，下邊的不動即在原來的位置。

　　　　none：默認值，不清除浮動

　　　　left：清除左側浮動

　　　　right：清除右側浮動

　　　　both：清除兩側浮動元素對當前元素的影響，即清除對他影響最大的元素的浮動

　　能夠在高度塌陷的父元素後邊，添加一個空白的div,因爲這個div沒有浮動，能夠撐開父元素的高度，而後再對它清除浮動，這樣能夠經過這個空白的div撐開高度，

基本沒有反作用。使用這種方式雖然能夠解決問題，可是會在頁面中添加多餘的結構。

　　經過after僞類，選中父元素的後邊添加一個空白的塊元素，而後清除浮動，原理跟div同樣，效果同樣，並且不會添加多餘的div，最推薦的方式。在IE6不支持，因此

還須要使用haslayout來處理。

2、定位

　　指的是將指定的元素擺放在頁面的任意位置。經過position屬性來設置

　　可選值：　　static，默認值，元素沒有開啓定位

　　　　　　　　relative，元素開啓相對定位

　　　　　　　　absolute，元素開啓絕對定位

　　　　　　　　fixed，元素開啓固定定位（也是絕對定位的一種）

　　當開啓定位時，能夠經過left、right、top、bottom來設置（是相對於自身定位位置的）左側、右側、上側、下側設置偏移量。一般只使用2個偏移量就能夠對元素

定位。通常選擇水平和垂直方向的偏移量來爲元素定位。相對於自身定位的。

　　一、相對定位（relative）

　　　　　　　當開啓相對定位可是不設置偏移量時，元素不會產生任何變化。

　　　　　　　相對定位的元素不會脫離文檔流。

　　　　　　　相對定位會使元素提高一個層級。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>相對定位</title>
        <style type="text/css">
            .box1{
                width: 200px;
                height: 200px;
                background-color: red;
            }
            .box2{
                width: 200px;
                height: 200px;
                background-color: yellow;
                position: relative;
                left: 100px;/*開啓左偏移，是相對於自身所在位置*/
            }
            .box3{
                width: 200px;
                height: 200px;
                background-color: yellowgreen;
            }
        </style>
    </head>
    <body>
        <!--div.box$*3 快捷鍵 建立3個div名字叫box1-3 -->
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </body>
</html>

　　二、絕對定位（absolute）

　　　　　　　絕對定位會使元素脫離文檔流。

　　　　　　　開啓絕對定位若是不設置偏移量，元素的位置不會發生變化。

　　　　　　　絕對定位是相對於窗口的左上角，即瀏覽器窗口的左上角座標是（0，0），是相對於最左上角定位的。準確說是相對於離他最近的開啓了定位的祖先

　元素來定位的。若是祖先沒有開啓定位，是相對於瀏覽器窗口來定位，通常開啓子元素的定位都會開啓父元素的定位。

　　　　　　　絕對定位會提高一個層級，會改變元素的性質。　　　　

　　三、固定定位（fixed）

　　　　　　固定定位也是一種絕對定位，是種特殊的絕對定位。IE6不支持。

　　　　　　不一樣點：永遠都會相對於瀏覽器窗口進行定位。固定定位會固定在瀏覽器的位置不會隨着滾動條向下的移動而移動，如網站的廣告，二維碼。

【擴展】元素的層級和透明度

　　若是元素的層級同樣，則下邊的元素會蓋住上邊的元素，這裏的上下指的是代碼結構上的上下。

　　經過z-index屬性來指定元素的層級，能夠設置爲一個正整數來指定層級。層級越高，即整數的數字越大，越優先顯示。對於沒有開啓定位的元素則不能使用z-index。

　　父元素的層級再高也蓋不住子元素。

　　經過opacity來設置元素背景的透明度，它須要一個0-1之間的值。0，徹底透明；1，徹底不透明；0.5，半透明。在IE8及如下的瀏覽器不支持，須要使用以下屬性：

　filter（濾鏡）屬性。filter：alpha（opacity=50）；50表示半透明，它須要一個0-100之間的值。

3、背景相關的樣式　

　　一、使用圖片作網頁的背景（屬性： background-image: url(../img/zhifou.jpg); ）

　　二、設置背景圖片的位置（background-position）

　　三、設置背景圖片是否隨着頁面滾動（background-attachment）

簡寫樣式：background #bfa center no-repeat; 中間空格隔開，沒有沒有順序要求，也沒有數量的要求。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>背景圖片</title>
        <style type="text/css">
            .box1{
                width: 500px;
                height: 500px;
                margin: 0 auto;
                /*這裏：若是背景圖片大於指定的尺寸500*500，默認顯示左上角的部分
                 要顯示所有：一、把指定尺寸設置爲圖片的大小，即同樣大就能夠所有顯示
                 * */
                background-image: url(../img/zhifou.jpg);
                /*若是背景圖片小於指定尺寸，則把圖片平鋪，就是把圖片多複製幾個充滿指定的尺寸。
                 * 能夠同時爲一個元素指定背景顏色和圖片，這樣背景顏色會做爲背景圖片的底色。
                 * 通常都會同時設置背景顏色和圖片
                 * 
                 * 若是不想讓圖片平鋪？
                 * 採起background-repeat: no-repeat; 不讓圖片重複，有多大顯示多大。
                 * 默認雙方向重複
                 * repeat-x:背景圖片水平方向重複
                 * repeat-y:背景圖片垂直方向重複
                 * 
                 */
                
                
                /* background-position:
                 * 調整背景圖片在元素中的位置、可選值：left、right、top、bottom、center 選擇其中的2個值
                       也可使用具體偏移量
                 * */
                background-position:left top ;/* 實際上就是9宮格，使用這5個值來肯定*/
                background-position:100px 100px ;
                /*2個值表示水平和垂直偏移量，正數表示向右和向下，負數表示相反的方向*/
                
                /*background-attachment:設置背景圖片是否隨着頁面滾動
                 fixed:背景圖片固定在某個位置，不隨着頁面滾動。 如博客的背景圖片
                 scroll：默認值，背景圖片隨着窗口滾動
                 不隨窗口滾動的圖片通常設置給body
                 
                 * */
                background-attachment: fixed;
                
                
            }
        </style>
    </head>
    <body>
        <div class="box1"> </div>
            
        
    </body>
</html>

4、把圖片作爲按鈕

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>按鈕</title>
        <style type="text/css">
            .more{                
                display: block;/*將a轉成塊元素*/
                width: 200px;
                height: 200px;
                background-image: url(../img/更多.png);
                background-repeat:no-repeat ;                
            }
            .phone{
                display: block;
                width: 48px;
                height: 48px;
                background-image: url(../img/phone_black_48.png);
            }
            .phone:hover{/*僞類：設置鼠標放到圖片上有變化的 能夠換張背景圖*/
                background-image:url(../img/phone_blue_48.png) ;                
            }
            /*同理也能夠設置active這個僞類，當點擊圖片時有變化*/
            /*問題：
             * 背景圖片是之外部資源的形式加載進網頁的，瀏覽器每加載一個外部資源就須要單獨發送一次請求。
             *可是瀏覽器的外部資源不是同時加載的，用的時候纔會去加載。可是加載有時間差，有段時間背景圖片
             * 沒法顯示，通常不會注意到。解決措施將2個圖片整合成一個圖片，這樣能夠將3個圖片同時加載出來，
             * 而後使用圖片的偏移量來切換圖片的顯示位置，這種技術叫圖片的整合技術(CSS-Sprite,雪碧圖)
             * 優勢：
             * 一、瀏覽器只需發送一次請求，提升訪問效率，提升用戶體驗。
             * 二、將多個圖片整合成一張圖片即雪碧圖，減少了圖片的大小。注意找好雪碧圖中每一個小圖片的座標。
             * 
             * */
        </style>
    </head>
    <body>
        <a class="more" href="https://www.baidu.com/"> </a>
        <a class="phone" href=""></a>
    </body>
</html>