總結(jié)

1. margin: 針對不同容器，利用margin來添加距離，存在margin重疊情況；
2. padding:讓元素的內(nèi)容跟元素的內(nèi)邊距有一定的邊距；

• 當(dāng)有多行文本時，欲使文本居中，則使用padding添加上下值，使整個文本居中；

3. 居中

• 水平居中
  • 塊狀元素的水平居中： margin: 0 auto;
  • 行內(nèi)元素的水平居中：父元素中設(shè)置 text-align:center;
• 垂直居中
  • 塊狀元素的垂直居中：vertical-align: middle;也可以通過設(shè)置父元素的padding或本元素的margin的具體值來實(shí)現(xiàn)垂直居中；
  • 行內(nèi)元素的垂直居中：
    • 單行文本的垂直居中：line-height與height值相同；
    • 多行文本的垂直居中：給多行文本容器外面添加一個新的容器，通過設(shè)置新容器的padding使內(nèi)部容器垂直居中；
• 設(shè)置定位后的水平垂直定位方法：元素設(shè)置position:absolute;父容器設(shè)置position:relative;通過設(shè)置left,top等定位值，來使本元素相對于父容器進(jìn)行定位；如以下代碼：

             /*類選擇器container為父容器*/
             .container{
                      position:relative;
               }
             /*p為子元素*/
             p{
                     width:100px;
                     height: 120px;
                     position: absolute;
                     left: 50%;
                     top: 50%;
                     margin-left: -50px;
                     matgin-top: -60px;
               }     

• ul的居中：主要用于導(dǎo)航欄的書寫中
  • ul設(shè)置position:absolute來使其在頁面中進(jìn)行定位偏移；
  • li設(shè)置float:left使幾個li能夠水平緊密連接，利用下一個兄弟選擇器（ul li+li{}）來給除了第一個li之外，后面的li設(shè)置樣式，通過設(shè)置margin-left來設(shè)置它們之間的距離；
  • 實(shí)際開發(fā)中，導(dǎo)航欄用ul li a三層添加，特別注意的一點(diǎn)是，在默認(rèn)情況下a標(biāo)簽時行內(nèi)元素，是不能設(shè)置寬高的，而且還有默認(rèn)的下劃線以及顏色設(shè)置，它的顏色是不會繼承父級的，所以需要給a標(biāo)簽進(jìn)行一些特殊設(shè)置：
    • 去除a標(biāo)簽的默認(rèn)下劃線： text-decoration: none;
    • 重新設(shè)置a標(biāo)簽的字體顏色；
    • 重點(diǎn)：在給a標(biāo)簽添背景顏色時，由于a標(biāo)簽為行內(nèi)元素，所以添加的寬高只有內(nèi)容寬高大小，不會添加整個li容器，所以需要設(shè)置a標(biāo)簽為塊狀元素，即設(shè)置display:block;此時a標(biāo)簽會繼承l(wèi)i元素的寬度和行高值，即背景色填充就會填充完整；
  • 實(shí)際開發(fā)中導(dǎo)航欄存在a鏈接時，最好使用div+a的布局，減少ul>li>a的使用；

4. 清除浮動（子元素添加浮動后，會使父級元素的高度塌陷）

• 給父級元素添加高度，能夠包含住里面的子元素高度；
• clear:both;
  • 重點(diǎn)：在實(shí)際開發(fā)中，本元素添加浮動會使父級容器的高度塌陷，即高度為零，此時會影響父級容器外元素的正常流動排列，怎樣恢復(fù)父級容器的高度，添加clear:both；但是添加位置不同，達(dá)到的效果也不盡相同；
    • 當(dāng)添加在父級容器中所有添加浮動的子元素的后面時，父級容器高度恢復(fù)；
    • 當(dāng)添加在父級容器外面，緊隨父級元素后面時，父級元素的高度還是零，但是父級元素外面的其他元素不會受到浮動影響，正常流動排列；
• overflow:hidden;（給父級元素添加，作用是激發(fā)BFC）
• clearfix偽類清除浮動；（給父級元素添加after偽類元素，此方法是最有效的方式）

    .clearfix:after{
              display: block;/*默認(rèn)情況下偽類是一個行內(nèi)元素，不能設(shè)置寬高*/
              height:0;
              content: "";
              clear:both;
      }

5. 脫離文檔流

• position:absolute;
• float:left;
• position:fixed;

6. 頁面搭建
7. 鍵值對 key:value;

• key:鍵，屬性名；
• value: 屬性值；

8. position定位

• position:absolute; 絕對定位；
• position:relative; 相對定位；
• position:fixed; 固定定位；

9. background背景屬性
   + background-color: 背景顏色；
   + background-image: 背景圖片,url(" 地址")；
   + background-repeat: 是否重復(fù)背景；
   + background-position: 背景位置（left top:左上角）;
10. border-radius: 設(shè)置圓角，圓形： border-radius:50%;
11. 透明度處理：
    • rgba():若給元素添加背景色用raba，則背景色會透明，文字不會透明；
    • opacity: 0-1;背景透明，文字也透明；

    opacity: 0.4;/*不兼容IE7瀏覽器*/
    filter:alpha(opacity=40);/*在IE7瀏覽器下的處理方式*/
    

12. 遮罩層的寫法：

    width:100%;;
    height:100%;
    background:rgba(255,255,255,0.4);
    position: absolute;
    left: 0;
    top: 0;

13. 文本超出固定寬度的處理方法：

• 單行文本超出固定寬度后，文本用省略號顯示的寫法代碼：

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

• 英文不折行的問題處理： word-wrap: break-word;
• 出現(xiàn)滾動條的寫法：overflow-y: scroll;

14. 行內(nèi)元素的寬高及上下padding不能設(shè)置；