5-24 css內容的補充

阿新 • • 發佈：2018-05-27

商城 class 大於頂部 sch inpu -i lin 都沒有

1，標準文檔流

宏觀的將，我們的web頁面和ps等設計軟件有本質的區別，web 網頁的制作，是個“流”，從上而下，像 “織毛衣”。而設計軟件，想往哪裏畫東西，就去哪裏畫

標準文檔流下有哪些微觀現象？

1.1空白折疊現象

多個空格會被合並成一個空格顯示到瀏覽器頁面中。img標簽換行寫。會發現每張圖片之間有間隙，如果在一行內寫img標簽，就解決了這個問題，但是我們不會這樣去寫我們的html結構。這種現象稱為空白折疊現象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .father 
{
            width: 300px;
            height: 510px;
            border: 1px solid yellow;
            padding: 0;
            margin: 0;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            margin-bottom: 50px;
            /*float: left; 
*/
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: green;
            margin-top: 50px;
            /*float: left*/
        }

        /*奇淫技巧現象

        標準流下的盒子。垂直方向出現塌陷問題。以大設置的值為準

        浮動元素的盒子，垂直方向不會出現問題。
        */
    </style>
</head>
<body>
    <div class="father">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>

</body>
</html>

View Code

1.2.高矮不齊，底邊對齊

文字還有圖片大小不一，都會讓我們頁面的元素出現高矮不齊的現象，但是在瀏覽器查看我們的頁面總會發現底邊對齊

1.3自動換行，一行寫不滿，換行寫

如果在一行內寫文字，文字過多，那麽瀏覽器會自動換行去顯示我們的文字。

2，塊級元素和行內元素

學習的初期，我們就要知道，標準文檔流等級森嚴。標簽分為兩種等級：

行內元素
塊級元素

比如h1標簽和span，同時設置寬高，來看瀏覽器效果，那麽你會發現：

2.1行內元素和塊級元素的區別：（非常重要）

行內元素：

與其他行內元素並排；
不能設置寬、高。默認的寬度，就是文字的寬度。

塊級元素：

霸占一行，不能與其他任何元素並列；
能接受寬、高。如果不設置寬度，那麽寬度將默認變為父親的100%。

2.2塊級元素和行內元素的分類：

在以前的HTML知識中，我們已經將標簽分過類，當時分為了：文本級、容器級。

從HTML的角度來講，標簽分為：

文本級標簽：p、span、a、b、i、u、em。
容器級標簽：div、h系列、li、dt、dd。

　　PS：為甚麽說p是文本級標簽呢？因為p裏面只能放文字&圖片&表單元素，p裏面不能放h和ul，p裏面也不能放p。

現在，從CSS的角度講，CSS的分類和上面的很像，就p不一樣：

行內元素：除了p之外，所有的文本級標簽，都是行內元素。p是個文本級，但是是個塊級元素。
塊級元素：所有的容器級標簽都是塊級元素，還有p標簽。

2.3塊級元素和行內元素的相互轉換

我們可以通過display屬性將塊級元素和行內元素進行相互轉換。display即“顯示模式”。

2.3.1塊級元素可以轉換為行內元素：

一旦，給一個塊級元素（比如div）設置：

display: inline;

那麽，這個標簽將立即變為行內元素，此時它和一個span無異。inline就是“行內”。也就是說：

此時這個div不能設置寬度、高度；
此時這個div可以和別人並排了

2.32行內元素轉換為塊級元素：

同樣的道理，一旦給一個行內元素（比如span）設置：

display: block;

那麽，這個標簽將立即變為塊級元素，此時它和一個div無異。block”是“塊”的意思。也就是說：

此時這個span能夠設置寬度、高度
此時這個span必須霸占一行了，別人無法和他並排
如果不設置寬度，將撐滿父親

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       *{
           padding: 0;
           margin: 0;
       }
        h1{
            width: 300px;
            height: 100px;
            background: red;
            display: inline;
            /*隱藏當前的元素，但是不占當前位置*/
            /*display: none;*/
            /*隱藏當前的元素，但是占據當前位置*/
            visibility: hidden;
        }
        span{
            width: 100px;
            height: 100px;
            background-color: green;
            /*display: block;*/
        }
        input{
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>

    <!-- 塊級標簽：
        1.獨占一行
        2.可以設置寬度
        3.如果不設置寬高，默認是父元素的100%寬度

        h1~h6 div ul li form table

        行內標簽：
        1.在一行內顯示
        2.不能設置寬度
        3.它的寬高是內容的寬高


        行內塊標簽：
        1.在一行內顯示
        2.可以設置寬度
     -->
    <h1>1級標題</h1>
    <h1>1級標題</h1>

    <span>內容</span>
    <span>內容</span>
    <a href="#">百度</a>
    <a href="#">百度</a>


    <input type="text">
    <input type="text">



    
</body>
</html>

View Code

標準流裏面的限制非常多，導致很多頁面效果無法實現。如果我們現在就要並排、並且就要設置寬高，那該怎麽辦呢？辦法是：移民！脫離標準流！

css中一共有三種手段，使一個元素脫離標準文檔流：

（1）浮動
（2）絕對定位
（3）固定定位

3，浮動(float)　

浮動是CSS中裏面布局最多的一個屬性，也是很重要的一個屬性。

float表示浮動的意思。它有四個值：

　　none表示默認，不浮動。

　　left表示向左浮動。

　　right表示向右浮動。

浮動有四個效果：

1，浮動元素脫標：

2，浮動元素相互貼靠

3，浮動元素字圍效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>`</title>
    <style>
        div{
            float: left;
        }
        p{
            border: 1px solid red;
        }
        
    </style>
</head>
<body>

    <!-- 所謂字圍效果，當div浮動，p不浮動，div遮蓋住了p，div的層級提高，但是p中的文字不會被遮蓋，此時就形成了字圍效果。

    ******永遠記住：關於浮動，我們初期一定要遵循一個原則，永遠不是一個盒子單獨浮動，要浮動就要一起浮動

    css:
    display
    浮動
    定位


     -->

    <div>
        <img src="./1.jpg" >    
    </div>
    <p>
        123路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛
    </p>
    
</body>
</html>

View Code

4，浮動元素緊湊效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        /*導航欄的樣式*/
        .nav{
            width: 1226px;
            height: 40px;
            background-color: yellow;
            margin: 0 auto;
        }
        .nav .navt{
            width: 375px;
            height: 40px;
            background-color: red;
            float: left;
        }
        .nav .car{
            width: 120px;
            height: 40px;
            background-color: green;
            float: right;
            margin-left: 15px;
        }
        .nav .login{
            width: 140px;
            height: 40px;
            background-color: pink;
            float: right;
         }
        .wrap{
            width: 1226px;
            height: 110px;
            margin: 0 auto;
        }
        .wrap .logo{
            width: 62px;
            height: 55px;
            background-color: purple;
            float: left;
            margin-top: 22px;
        }
        .wrap .nav2{
            width: 850px;
            height: 110px;
            background: pink;
            float: left;
        }
        .wrap .search{
            width: 296px;
            height: 50px;
            float: right;
            background-color: gray;
            margin-top: 30px;
        }
        /*大圖標*/
        .big{
            width: 1226px;
            height: 460px;
            background-color: aqua;
            margin: 0 auto;
        }
        .big .good{
            width: 234px;
            height: 460px;
            background-color: purple;
            float: left;
        }
        .big .pic{
            width: 992px;
            height: 460px;
            background-color: cornflowerblue;
            float: right;
        }
        .old{
            width: 1226px;
            height: 170px;
            margin: 0 auto;
        }
        .old .trade{
            width: 234px;
            height: 170px;
            background-color: red;
            margin: 0 auto;
            margin-top: 14px;
            float: left;
        }
        .old .note{
            width: 316px;
            height: 170px;
            background-color: red;
            margin-top: 14px;
            margin-left: 14px;
            float: left;
        }
        .old .mi{
            width: 316px;
            height: 170px;
            background-color: red;
            margin-top: 14px;
            margin-left: 14px;
            float: left;
        }
        .old .link{
            width: 316px;
            height: 170px;
            background-color: red;
            margin-top: 14px;
            margin-left: 14px;
            float: left;
        }
        .shop{
            width: 1226px;
            height: 40px;
            /*background-color: yellow;*/
            margin:0 auto;
            margin-top: 20px;
        }
        .shop .lshop{
            width: 234px;
            height:40px ;
            float: left;
            background-color: blue;
        }
        .shop .rshop{
            width: 70px;
            height:25px ;
            float: right;
            margin-top: 15px;
            background-color: blue;
        }
        .time {
            width: 1226px;
            height: 340px;
            /*background-color: gray;*/
            margin: 0 auto;
            margin-top: 1px;
        }
        .time .time1{
            width: 234px;
            height: 340px;
            background-color: deeppink;
            float: left;
        }
        .time .weigh{
            width: 234px;
            height: 340px;
            background-color:deeppink;
            margin-left: 14px;
            float: left;
        }
        .time .headset{
            width: 234px;
            height: 340px;
            background-color:deeppink;
            margin-left: 14px;
            float: left;
        }
        .time .computer{
            width: 234px;
            height: 340px;
            background-color:deeppink;
            margin-left: 14px;
            float: left;
        }
        .time .phone{
            width: 234px;
            height: 340px;
            background-color:deeppink;
            margin-left: 14px;
            float: left;
        }

    </style>
</head>
<body>
    <div class="nav">
        <div class="navt"></div>
        <div class="car"></div>
        <div class="login"></div>
    </div>
    <div class="wrap">
    <div class="logo"></div>
    <div class="nav2"></div>
    <div class="search"></div>
    </div>
    <div class="big">
        <div class="good">內容</div>
        <div class="pic">
            <img src="./picture/mi8.jpg" height="460px" width="992" alt="小米8"></div>
    </div>
    <div class="old">
        <div class="trade">以舊換新</div>
        <div class="note">紅米</div>
        <div class="mi">小米 </div>
        <div class="link">路由器 </div>
    </div>
    <div class="shop">
        <div class="lshop">開始閃購</div>
        <div class="rshop">購物</div>
    </div>
    <div class="time">
        <div class="time1"></div>
        <div class="weigh"></div>
        <div class="headset"></div>
        <div class="computer"></div>
        <div class="phone"></div>
    </div>
</body>
</html>

View Code

4,清除浮動

為什麽要清除浮動？

為了後面方便改頁面布局，因為修改一塊區域的布局，會影響父盒子的布局。

清除浮動有四種方法：

　　1，給父盒子設定高度。

　　2，clear:both。

　　3,偽元素清除法。

　　4，overflow：hidden。

4.1給父盒子設定高度，這種方法不靈活。

4.2 clear:both

有三個值：

left：當前元素左邊不允許有浮動元素

right：當前元素右邊不允許有浮動元素

both：當前元素左右兩邊不允許有浮動元素

給浮動元素的後面加一個空的div，並且該元素不浮動，然後設置clear：both。

4.3偽元素清除法

給浮動子元素的父盒子，也就是不浮動元素，添加一個clearfix的類，然後設置。

.clearfix:after{
    /*必須要寫這三句話*/
    content: ‘.‘;
    clear: both;
    display: block;
}

新浪首頁

/*新浪首頁清除浮動偽元素方法*/
              content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden

4.4 overflow:hidden(常用)

　　overflow屬性規定當內容溢出元素框時發生的事情。

說明：

這個屬性定義溢出元素內容區的內容會如何處理。如果值為 scroll，不論是否需要，用戶代理都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內容也會出現滾動條。

有五個值：

值	描述
visible	默認值。內容不會被修剪，會呈現在元素框之外。
hidden	內容會被修剪，並且其余內容是不可見的。
scroll	內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
auto	如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
inherit	規定應該從父元素繼承 overflow 屬性的值。

逐漸演變成overflow：hidden清除法。

5，margin的用法

兩個標準流下的盒子，在垂直方向有塌陷問題，

當給兩個標準流下兄弟盒子設置垂直方向上的margin時，那麽以較大的為準，那麽我們稱這種現象叫塌陷。沒法解決，我們稱為這種技巧叫“奇淫技巧”。記住這種現象，在布局垂直方向盒子的時候主要margin的用法。

當我們給兩個標準流下的兄弟盒子設置浮動之後，就不會出現margin塌陷的問題。

當一個div元素設置margin：0 auto;時就會居中盒子，那我們知道margin:0 auto;表示上下外邊距離為0，左右為auto的距離，那麽auto是什麽意思呢？

設置margin-left:auto；我們發現盒子盡可能大的右邊有很大的距離，沒有什麽意義。當設置margin-right:auto；我們發現盒子盡可能大的左邊有很大的距離。當兩條語句並存的時候，我們發現盒子盡可能大的左右兩邊有很大的距離。此時我們就發現盒子居中了。

另外如何給盒子設置浮動，那麽margin:0 auto失效。

使用margin：0 auto;註意點：

1.使用margin: 0 auto;水平居中盒子必須有width，要有明確width，文字水平居中使用text-align: center;

2.只有標準流下的盒子才能使用margin:0 auto;

當一個盒子浮動了，固定定位，絕對定位(後面會講)，margin:0 auto; 不能用了

3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;

另外大家一定要知道margin屬性是描述兄弟盒子的關系，而padding描述的是父子盒子的關系

善於使用父親的padding，而不是margin

技術分享圖片

如果讓大家實現如圖的效果，應該有不少的同學做不出來。

那麽我們來看看這個案例，它的坑在哪裏？

下面這個代碼應該是大家都會去寫的代碼。

        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 300px;
            height: 300px;
            background-color: blue;
        }
        .xiongda{
            width: 100px;
            height: 100px;
            background-color: orange;
            
            margin-top: 30px;
        }

技術分享圖片

因為父親沒有border，那麽兒子margin-top實際上踹的是“流” 踹的是行,所以父親掉下來了，一旦給父親一個border發現就好了。

那麽問題來了，我們不可能在頁面中無緣無故的去給盒子加一個border，所以此時的解決方案只有一種。就是使用父親的padding。讓子盒子擠下來。

6，文本屬性和字體屬性

6.1文本屬性

介紹幾個常用的。

6.1.1文本對齊

text-align 屬性規定元素中的文本的水平對齊方式。

屬性值：none | center | left | right | justify

文本顏色

color屬性

文本首行縮進

text-indent 屬性規定元素首行縮進的距離，單位建議使用em

文本修飾

text-decoration屬性規定文本修飾的樣式

屬性值：none(默認) | underline(下劃線) | overline(定義文本上的一條線) | line-through (定義穿過文本下的一條線) | inherit(繼承父元素的text-decoration屬性的值。)

行高

line-height就是行高的意思，指的就是一行的高度。

6.2字體屬性

字體大小

font-size表示設置字體大小，如果設置成inherit表示繼承父元素的字體大小值。

字體粗細

font-weight表示設置字體的粗細

字體系列

font-family

font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif

如果瀏覽器不支持第一個字體，則會嘗試下一個。瀏覽器會使用它可識別的第一個值。如果都不支持則顯示宋體。

行高 line-height

針對單行文本垂直居中

公式：行高的高度等於盒子的高度，可以使當行文本垂直居中，註意只適用單行文本。

針對多行文本垂直居中

行高的高度不能小於字體的大小，不然上下字之間會緊挨一起。

第一步，一個寬度300*300的盒子，看盒子中一共顯示了幾行文字，假如是5行，再看一下行高，如果行高是line-height:30px; 那麽就知道行高*5=150px

第二步，讓(盒子的高度-150px)/2=75;那麽設置盒子的padding-top:75px;同時保證盒子的高度為300px,那麽高度改為225px;

font-family介紹

使用font-family註意幾點：

1.網頁中不是所有字體都能用哦，因為這個字體要看用戶的電腦裏面裝沒裝，
比如你設置： font-family: "華文彩雲"; 如果用戶電腦裏面沒有這個字體，
那麽就會變成宋體
頁面中，中文我們只使用：微軟雅黑、宋體、黑體。
如果頁面中，需要其他的字體，那麽需要切圖。英語：Arial 、 Times New Roman

2.為了防止用戶電腦裏面，沒有微軟雅黑這個字體。
就要用英語的逗號，隔開備選字體，就是說如果用戶電腦裏面，
沒有安裝微軟雅黑字體，那麽就是宋體：
font-family: "微軟雅黑","宋體"; 備選字體可以有無數個，用逗號隔開。
3.我們要將英語字體，放在最前面，這樣所有的中文，就不能匹配英語字體，
就自動的變為後面的中文字體：
font-family: "Times New Roman","微軟雅黑","宋體";

4.所有的中文字體，都有英語別名，
我們也要知道：微軟雅黑的英語別名：
font-family: "Microsoft YaHei";
宋體的英語別名： font-family: "SimSun";
font屬性能夠將font-size、line-height、font-family合三為一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";

5.行高可以用百分比，表示字號的百分之多少。
一般來說，都是大於100%的，因為行高一定要大於字號。
font:12px/200% “宋體” 等價於 font:12px/24px “宋體”;
反過來，比如： font:16px/48px “宋體”;
等價於 font:16px/300% “宋體”

7 background

7.1先來講講顏色表示法

一共有三種：單詞、rgb表示法、十六進制表示法

rgb:紅色綠色藍色三原色
光學顯示器，每個像素都是由三原色的發光原件組成的，靠明亮度不同調成不同的顏色的。
用逗號隔開，r、g、b的值，每個值的取值範圍0~255，一共256個值。
如果此項的值，是255，那麽就說明是純色：

黑色：
background-color: rgb(0,0,0);
光學顯示器，每個元件都不發光，黑色的。

白色：
background-color: rgb(255,255,255);

顏色可以疊加，比如黃色就是紅色和綠色的疊加：
background-color: rgb(255,255,0);

再比如：
background-color: rgb(111,222,123);
就是紅、綠、藍三種顏色的不同比例疊加。

16進制表示法
紅色：
background-color: #ff0000;
所有用#開頭的值，都是16進制的。
#ff0000：紅色
16進制表示法，也是兩位兩位看，看r、g、b，但是沒有逗號隔開。
ff就是10進制的255 ，00 就是10進制的0，00就是10進制的0。所以等價於rgb(255,0,0);
怎麽換算的？我們介紹一下
我們現在看一下10進制中的基本數字（一共10個）:
0、1、2、3、4、5、6、7、8、9

16進制中的基本數字（一共16個）:
0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f

16進制對應表：
十進制數十六進制數
0 0
1 1
2 2
3 3
……
10 a
11 b
12 c
13 d
14 e
15 f

16 10
17 11
18 12
19 13
……
43 2b
……
255 ff

十六進制中，13 這個數字表示什麽？
表示1個16和3個1。那就是19。這就是位權的概念，開頭這位表示多少個16，末尾這位表示多少個1。
小練習：
16進制中28等於10進制多少？
答：2*16+8 = 40。

16進制中的2b等於10進制多少？
答：2*16+11 = 43。

16進制中的af等於10進制多少？
答：10 * 16 + 15 = 175

16進制中的ff等於10進制多少？
答：15*16 + 15 = 255

所以，#ff0000就等於rgb(255,0,0)

background-color: #123456;
等價於：
background-color: rgb(18,52,86);

所以，任何一種十六進制表示法，都能夠換算成為rgb表示法。也就是說，兩個表示法的顏色數量，一樣。

十六進制可以簡化為3位，所有#aabbcc的形式，能夠簡化為#abc;
比如：
background-color:#ff0000;
等價於
background-color:#f00;

比如：
background-color:#112233;
等價於
background-color:#123;

只能上面的方法簡化，比如
background-color:#222333;
無法簡化！
再比如
background-color:#123123;
無法簡化！

要記住：
#000 黑
#fff 白
#f00 紅
#333 灰
#222 深灰
#ccc 淺灰

background-color屬性表示背景顏色

background-img:表示設置該元素的背景圖片

那麽發現默認的背景圖片，水平方向和垂直方向都平鋪

background-repeat:表示設置該元素平鋪的方式

屬性值：

值	描述
repeat	默認。背景圖像將在垂直方向和水平方向重復。
repeat-x	背景圖像將在水平方向重復。
repeat-y	背景圖像將在垂直方向重復。
no-repeat	背景圖像將僅顯示一次。
inherit	規定應該從父元素繼承 background-repeat 屬性的設置。

給元素設置padding之後，發現padding的區域也會平鋪背景圖片。

repeat應用案例

還是上面那個超鏈接導航欄的案例，我們給body設置平鋪的圖片，註意：一定找左右對稱的平鋪圖片，才能實現我們要的效果

background-position: 屬性設置背景圖像的起始位置。這個屬性設置背景原圖像（由 background-image 定義）的位置

屬性值：

值	描述
top left top center top right center left center center center right bottom left bottom center bottom right	如果您僅規定了一個關鍵詞，那麽第二個值將是"center"。默認值：0 0；這兩個值必須挨在一起。

值

描述

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

如果您僅規定了一個關鍵詞，那麽第二個值將是"center"。

默認值：0 0；

這兩個值必須挨在一起。

雪碧圖技術（精靈圖技術）

CSS雪碧即CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合並技術，該方法是將小圖標和背景圖像合並到一張圖片上，然後利用css的背景定位來顯示需要顯示的圖片部分

CSS 雪碧圖應用原理：
只有一張大的合並圖，每個小圖標節點如何顯示單獨的小圖標呢？

其實就是截取大圖一部分顯示，而這部分就是一個小圖標。

使用雪碧圖的好處：

1、利用CSS Sprites能很好地減少網頁的http請求，從而大大的提高頁面的性能，這也是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因；
2、CSS Sprites能減少圖片的字節，曾經比較過多次3張圖片合並成1張圖片的字節總是小於這3張圖片的字節總和。
3、解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的制作效率。
4、更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便

不足：

1）CSS雪碧的最大問題是內存使用
2）拼圖維護比較麻煩
3）使CSS的編寫變得困難
4）CSS 雪碧調用的圖片不能被打印

我們可以使用background綜合屬性制作通天banner，什麽是通天banner呢，就是一般我們電腦的屏幕都是1439.但是設計師給我們的banner圖都會比這個大，

那麽我們可以此屬性來制作通天banner。

background:  red  url(‘./images/banner.jpg‘)  no-repeat   center top;

background-attach

設置fixed之後，該屬性固定背景圖片不隨瀏覽器的滾動而滾動

8 定位position

8.1定位

定位有三種：

1.相對定位 2.絕對定位 3.固定定位

這三種定位，每一種都暗藏玄機，所以我們要一一單講。

8.2相對定位

相對定位:相對於自己原來的位置定位

現象和使用：

1.如果對當前元素僅僅設置了相對定位，那麽與標準流的盒子什麽區別。

2.設置相對定位之後，我們才可以使用四個方向的屬性： top、bottom、left、right

特性：

1.不脫標

2.形影分離

3.老家留坑（占著茅房不拉屎，惡心人）

所以說相對定位在頁面中沒有什麽太大的作用。影響我們頁面的布局。我們不要使用相對定位來做壓蓋效果

用途：

1.微調元素位置

2.做絕對定位的參考（父相子絕）絕對定位會說到此內容。

參考點：

自己原來的位置做參考點。

8.3絕對定位

特性：

1.脫標 2.做遮蓋效果，提成了層級。設置絕對定位之後，不區分行內元素和塊級元素，都能設置寬高。

參考點(重點)：

一、單獨一個絕對定位的盒子

1.當我使用top屬性描述的時候是以頁面的左上角（跟瀏覽器的左上角區分）為參考點來調整位置
2.當我使用bottom屬性描述的時候。是以首屏頁面左下角為參考點來調整位置。

二、以父輩盒子作為參考點

1.父輩元素設置相對定位，子元素設置絕對定位，那麽會以父輩元素左上角為參考點，這個父輩元素不一定是爸爸，它也可以是爺爺，曾爺爺。

2.如果父親設置了定位，那麽以父親為參考點。那麽如果父親沒有設置定位，那麽以父輩元素設置定位的為參考點

3.不僅僅是父相子絕，父絕子絕，父固子絕,都是以父輩元素為參考點

註意了：父絕子絕，沒有實戰意義，做站的時候不會出現父絕子絕。因為絕對定位脫離標準流，影響頁面的布局。相反‘父相子絕’在我們頁面布局中，是常用的布局方案。因為父親設置相對定位，不脫離標準流，子元素設置絕對定位，僅僅的是在當前父輩元素內調整該元素的位置。

還要註意，絕對定位的盒子無視父輩的padding

作用：頁面布局常見的“父相子絕”，一定要會！！！！

*{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 100%;
            height: 69px;
            background: #000;
        }
        .box .c{
            width: 960px;
            height: 69px;
            background-color: pink;
            /*margin: 0 auto;*/
            position: relative;
            left: 50%;
            margin-left: -480px;

            /*設置絕對定位之後，margin:0 auto;不起任何作用，如果想讓絕對定位的盒子居中。當做公式記下來 設置子元素絕對定位，然後left:50%; margin-left等於元素寬度的一半，實現絕對定位盒子居中*/
        }

View Code

8.4固定定位

固定當前的元素不會隨著頁面滾動而滾動

特性:

1.脫標 2.遮蓋，提升層級 3.固定不變

參考點：

設置固定定位，用top描述。那麽是以瀏覽器的左上角為參考點
如果用bottom描述，那麽是以瀏覽器的左下角為參考點

作用： 1.返回頂部欄 2.固定導航欄 3.小廣告

9 z-index

z-index

這個東西非常簡單，它有四大特性，每個特性你記住了，頁面布局就不會出現找不到盒子的情況。

z-index 值表示誰壓著誰，數值大的壓蓋住數值小的，
只有定位了的元素，才能有z-index,也就是說，不管相對定位，絕對定位，固定定位，都可以使用z-index，而浮動元素不能使用z-index
z-index值沒有單位，就是一個正整數，默認的z-index值為0如果大家都沒有z-index值，或者z-index值一樣，那麽誰寫在HTML後面，誰在上面壓著別人，定位了元素，永遠壓住沒有定位的元素。
從父現象：父親慫了，兒子再牛逼也沒用

5-24 css內容的補充

商城 class 大於頂部 sch inpu -i lin 都沒有 1，標準文檔流宏觀的將，我們的web頁面和ps等設計軟件有本質的區別，web 網頁的制作，是個“流”，從上而下，像 “織毛衣”。而設計軟件，想往哪裏畫東西，就去哪裏畫標準文檔流下有哪些微觀現象？

5-24 css內容的補充

1，標準文檔流

1.1空白折疊現象

1.3自動換行，一行寫不滿，換行寫

2，塊級元素和行內元素

2.3塊級元素和行內元素的相互轉換

2.3.1塊級元素可以轉換為行內元素：

2.32行內元素轉換為塊級元素：

3，浮動(float)

4,清除浮動

5，margin的用法

善於使用父親的padding，而不是margin

6，文本屬性和字體屬性

6.1文本屬性

6.1.1文本對齊

文本顏色

文本首行縮進

文本修飾

行高

6.2字體屬性

字體大小

字體粗細

字體系列

行高 line-height

font-family介紹

7 background

7.1先來講講顏色表示法

background-color屬性表示背景顏色

background-img:表示設置該元素的背景圖片

background-repeat:表示設置該元素平鋪的方式

repeat應用案例

雪碧圖技術（精靈圖技術）

8 定位position

8.1定位

8.2相對定位

8.3絕對定位

8.4固定定位

9 z-index

z-index

相關推薦

3，浮動(float)　