CSS 盒子模型、RestCSS、浮動、定位

盒子模型

• 邊框：border
  • 左邊框：border-left
  • 右邊框：border-right
  • 上邊框：border-top
  • 下邊框：border-bottom
  • 複合樣式：border
  • 邊框顏色：border-color
  • 邊框寬度：border-width
  • 邊框樣式：border-style
    • 實線：solid 虛線：dashed 點線：dotted 雙線：double
• 內邊距：padding
  • 上內邊距：padding-top
  • 下內邊距：padding-bottom
  • 左內邊距：padding-left
  • 右內邊距：padding-right
  • 複合樣式：padding
• 外邊距：margin
  • 上外邊距：margin-top
  • 下外邊距：margin-bottom
  • 左外邊距：margin-left
  • 右外邊距：margin-right
  • 複合樣式：margin
• 內外邊距
  • A：margin調整內部div外邊距
  • B：padding調整外部div內邊距，它調整的是自身大小，因此若是不但願破壞外觀，則儘可能使用margin佈局
    （padding有可能撐大外盒子，但若是是margin過大，則盒子內容會被擠出，但不會改變盒子自己大小）；
  • C：border內部div和外部div定位時須要找到邊界，外部div如沒有設置border，則內部div的margin設置時會一直往上找，直到找到邊界位置。
  • D：內部相鄰div間的margin，取值爲兩個div各自設置margin的最大值，而不是相加值。
    
    

RestCSS

• 爲何須要Reset CSS
  • 瀏覽器在解析某些標籤的時候，自己就自帶了一些樣式，致使咱們寫樣式的時候就會效果不一致
• 通用的ResetCSS https://meyerweb.com/eric/tools/css/reset/
• 「*」表示通配符

*{
    margin: 0;
    padding: 0;
}

浮動

• float: left / right
• 解決高度塌陷

/*父元素設置*/
.clear{
        border:blue 2px solid;
        overflow: hidden;
    }

/*使用僞元素*/
.clearfix::after{
    display: block;
    clear: both;
    content: "";
}

定位

• position
  • 默認值:static
    • 靜態定位，默認值，不會發生任何變化
  • 相對定位:relative
    • 相對定位，不會脫離文檔流，以自身元素爲參考
    • 能夠給 top、right、bottom、left
  • 絕對定位:absolute
    • 絕對定位，脫離文檔流
    • 默認以整個文檔爲參考，有定位父級，則父級參考
    • 能夠給top、right、bottom、left
  • 固定定位:fixed
    • 固定定位，脫離文檔流
    • 默認以窗口爲參考，窗口滾動，依然不會變
    • 能夠給top、right、bottom、left
• z-index
  • 定位涉及到 z-index 屬性
  • 能夠簡單理解爲誰在上面，誰在下面
  • z-index : 數字