溢出處理、盒子模型、背景圖片、float（浮動）

時間 2019-12-12

標籤溢出處理盒子模型背景圖片 float 浮動欄目 CSS 简体版

原文原文鏈接

1、overflow:溢出內容的處理
   overflow:hidden; 溢出內容隱藏(在父元素內使用,能夠清除子元素浮動對父元素的影響)
   overflow:auto; 自動滾動(有溢出產生滾動，沒有就不產生滾動條)
   overflow:scroll; 無論有沒有溢出均產生滾動條

圖片精靈技術
   服務器
   前項目部署到服務器上，圖片固然也是在服務器上。網頁若是要顯示a圖片，若是顯示b圖片，若是套不少圖片

2、盒子模型：

   margin(外邊距)、border(邊框)、padding(內間距)、內容區域

   1.w3c盒子模型(默認盒子模型-標準的盒子模型)：

       a.w3c盒子模型設置的寬高爲內容區的寬高;
       b.padding(內間距)、border(邊框)、margin(外邊距)均屬於所設置寬高外的部分；
       c.盒子寬高：border寬高+padding寬高+內容區域寬高【設置的寬高】
       d.所佔屏幕寬高：盒子寬高+margin寬高

   2.ie盒子模型

       a.ie盒子模型設置的寬高爲盒子寬高
       b.盒子寬高【設置的寬高】：border寬高+padding寬高+內容區域寬高
       c.所佔屏幕寬高：盒子寬高+margin寬高

   3.兩種盒子的比較代碼以下：css

<style type="text/css">
            div{
                width: 100px;
                height: 100px;
                background-color: pink;
            }
            .one{
                background-color: teal;
                /*width: 80px;
                height: 80px;*/
                padding: 10px;
                box-sizing: border-box;

                border-left: 10px solid cyan;
                border-bottom: 10px solid coral;
                border-right: 10px solid cyan;
                border-top: 10px solid coral;
            }
        </style>
        <body>
            <div class="one">one</div>
            <div class="two">two</div>
        </body>

View Code

3、border屬性：
   1.border-radius:5px(或百分比); 設置邊框圓角
   2.border-top-left-radius: 40px; 設置左上角邊框圓角
   3.border-bottom-right-radius: 40px; 設置右下角邊框圓角

   4.若是設置子元素圓角且父元素有背景顏色則父子元素均須要設置圓角邊框：
   eg：html

         <style type="text/css">
            div{
                width: 200px;
                height:200px;
                background-color: pink;
            }
            .inner,.outer{
                border-radius: 30px;
            }
            .inner{
                background-color: teal;
            }
        </style>

        <body>
            <div class="outer">
                <div class="inner">
                    
                </div>
            </div>
        </body>

View Code

4、background屬性：
1.background-image:url(圖片路徑); 設置背景圖片
2.background-repeat:(背景圖片平鋪方式) 服務器

　　eg：ide

        <style>
            /*背景圖片重複出現的方式*/
            background-repeat: no-repeat;
            /*在x方向鋪滿一行*/
            background-repeat: repeat-x;
            /*在y方向平鋪一列*/
            background-repeat: repeat-y;
            /*默認的鋪滿整個區域*/
            background-repeat: repeat;
        </style>

View Code

    3.background-size:100% 100%;(寬、高) 設置背景圖片大小

   4.圖片精靈技術：(在元素區域內顯示背景圖片中指定區域圖像)
       實例代碼以下：   url

        <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>圖片精靈技術</title>
                <style type="text/css">
                    div{
                        width: 153px;
                        height: 156px;
                        background-image: url(./images/QQ圖片20190620112449.jpg);
                    }
                    .one{
                        /*設置背景圖片的位置*/
                        background-position: -113px -120px;
                    }
                    .two{
                        background-position: -633px -652px;
                    }
                </style>
            </head>
            <body>
                <div class="one"></div>
                <div class="two"></div>
            </body>
            </html>

View Code

5.background-attachment：固定顯示圖片背景
實例代碼： spa

             <style type="text/css">
                body{
                    background-image: url(./images/d2a9ccbfe758a6619d25d0299257f860.jpg);
                    /*背景圖片綁定的位置，視口區？元素*/
                    /*一、固定背景 不隨滾動條的滾動而滾動*/
                    background-attachment: fixed;
                    /*二、默認的  隨着滾動條滾動*/
                    background-attachment: scroll;
                }
            </style>

View Code

5、float(浮動)
一、浮動
實例代碼：3d

         <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>浮動</title>
                <style type="text/css">
                    div{
                        width: 100px;
                        height: 100px;
                    }
                    /*浮動文字不會被覆蓋*/
                    .one{
                        height: 200px;
                        background-color: red;
                        /*左浮動  浮動元素脫離文檔流 原來的位置不保留*/
                        float: right;
                    }
                    .two{
                        background-color: orange;
                        float: right;
                    }
                    .three{
                        background-color: yellow;
                        /*margin-top: 100px;*/
                        /*清除其餘元素的浮動對自身元素(位置等)產生的影響*/
                        /*清除兄弟元素的浮動*/
                        /*clear: both;*/
                        float: right;
                    }
                    .four{
                        background-color: green;
                        float: right;
                    }
                    .five{
                        background-color: blue;
                        /*float: right;*/
                        clear: both;
                    }
                    .six{
                        background-color: cyan;
                        /*float: right;*/
                    }
                </style>
            </head>
            <body>
                <div class="one">one</div>
                <div class="two">two</div>
                <div class="three">three</div>
                <div class="four">four</div>
                <div class="five">five</div>
                <div class="six">six</div>
            </body>
            </html>

View Code

二、父子浮動
實例代碼：code

        <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>父子浮動</title>
                <style type="text/css">
                    *{
                        margin: 0;
                        padding: 0;
                    }
                    ul{
                        border: 1px solid blue;
                        list-style: none;
                        /*清除浮動   給父元素設置了高度*/
                        /*overflow: hidden;*/
                    }
                    li{
                        border: 1px solid red;
                        width: 100px;
                        height: 100px;
                        float: left;
                    }
                    div{
                        width: 100px;
                        height: 100px;
                        background-color: cyan;

                        /*清除浮動*/
                        clear: both;    
                    }
                </style>
            </head>
            <body>
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <div></div>
            </body>
            </html>