CSS盒子內容

內邊距

    內邊距（padding）：內容與邊框之間的距離

    注意：padding 只能移動盒子的內容

   padding屬性聯寫： padding: 10px； 內邊距的上下左右都移動

                                   padding: 10px 20px;  上下10px，左右20px

                                   padding: 10px 20px 30px; 上10px 左右20px 下30px

                                    padding: 10px 20px 30px 40px;  上10  右20  下30  左40 

    盒子大小問題：

           邊框和內邊距能夠改變盒子大小

           盒子大小（寬度） = 內容的寬度+左右內邊距+左右邊框

   注意：作案例時候要把內容大小相應減小 避免盒子越變越大

 

 嵌套盒子padding值對盒子大小的影響：

        「繼承」的盒子，默認不設置寬度的狀況下，給與盒子設置padding值在父盒子寬度範圍內，不會影響盒子大小

 

拓展：CSS3中的box-sizing屬性

        語法：box-sizing: content-box（正常計算） | border-box（智能計算） | inherit;

其中border-box能夠

• 當你設置box-sizing:border-box之後，這就能達到你想要的目的。例如，上面咱們想要一個寬度爲200px的盒子，那麼咱們直接設置寬度爲200px。是否是看起來清晰多了。當再設置它的左右邊框和左右補白後，它的內容區會自動調整。這可能更直接和一目瞭然。CSS代碼以下：

div {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 1px solid #DDD;
}

 

 

 

外邊距

      外邊距：盒子與盒子之間的距離。移動盒子。

      屬性聯寫：與內邊距聯寫同樣

      注意：外邊距不會改變盒子大小

      特色： 垂直外邊距合併，會以最大外邊距的值爲準

                  垂直外邊距塌陷--》解決方式：

                                                                a.給父元素設置邊框

                                                                b.給父元素設置overflow：hidden；

                                                                   因爲overflow：hidden觸發了元素的bfc（格式化上下文），瀏覽器自動把這個元素獨立出來（包裹性）

標籤默認的外邊距：不要忘記去除

http://www.cnblogs.com/yjzhu/archive/2012/11/05/2755095.html

標準流（normal flow）

在頁面中標籤（元素）默認的顯示方式就是標準流的顯示方式

浮動

 用法:  float: left | right;

 

 特色： 1.浮動的元素不佔位置 （脫標--脫離標準流的顯示方式）

  　　　 2.浮動可讓塊級元素在一行上顯示

              3.能夠進行元素的模式轉換（行內塊）

   做用：

            1. 圖片文字環繞效果

            2.讓塊級元素在一行上顯示使用浮動

                         網頁佈局

                         製做導航

2.2.1清除浮動（清除浮動帶來的影響）

       清除浮動：

                       1.使用clear: left | right | both;

                        直接在浮動的元素後面增長一個空標籤，在設置該空標籤clear

                          

                          

                        2.給父元素設置overflow:hidden;

                           overflow:hidden: 能夠將超出父元素的部分進行隱藏

                        3.使用僞元素清除浮動（推薦）

                      

                       或者

                        

 

                       調用者：

                        

PS：什麼時候用消除浮動

1. 父容器沒有高度
2. 父容器中全部的子元素都設置了浮動

僞元素

after:

 

before

 選擇區域：

 

 定位（重點）

做用：經過定位能夠移動元素位置

    使用場景：當頁面中出現盒子壓盒子的效果時，推薦使用定位

  定位特色： 定位體現元素之間的層級關係

分類：

       靜態定位：

       絕對定位：

       相對定位：

       固定定位：

<!-- 
        浮動元素的特色：
            1）脫標
            2）改變元素的顯示方式 
            3）顯示方式與行內塊一致

        定位有四種：
            1）靜態定位（標準流）
                關鍵字： position: static;
            2）相對定位
                關鍵字： position: relative;
                特色：
                    1）相對於本身本來的位置發生的偏移。
                    2）沒有脫標
                    3）沒有改變元素的顯示方式
            3）絕對定位：
                關鍵字： position: absolute;
                特色：
                    1）位置關係：
                        a:若是絕對定位的元素沒有父元素，那麼絕對定位的元素的位置是以body爲基準發平生移    
                        b:若是絕對定位的元素有父元素，可是父元素沒有定位，那麼絕對定位的元素的位置仍是以body爲基準發平生移
                        c:若是絕對定位的元素有父元素，而且父元素有定位（非靜態）,那麼絕對定位的元素的位置是以父元素基準發平生移的
                    2）脫標（不佔位置）
                    3）改變了元素的顯示方式，實現了模式轉換。代替浮動做用
                    4）顯示方式變爲行內塊元素
　　　　　　　4）固定定位
                    1）位置關係:
　　　　　　　　　　　　　　 a. 固定定位的元素始終是以body（瀏覽器 ）可視區域爲參照設置定位
　　　　　　　　　　　　2)脫標（不佔位置）
                    3)改變元素的顯示方式
                    4）元素的顯示方式變爲 


            注意：
                通常狀況下定位都要配合定位偏移屬性來使用trbl：top,right,bottom,left

     -->

 給導航設置圓角的代碼：

c3 裏面的屬性：border-radius：7px；