HTML每個元素都可以看做一個盒子,

盒子包括 content,padding,border,margin

方向 :top, right, bottom, left

內容相關屬性:

1. width:寬度
   1. min-width :最小寬度,瀏覽器視窗小於最小寬度是,可以滾動檢視
   2. max-width : 最大寬度
2. height:高度
   1. min-height : 最小高度
   2. max-height: 最大高度

內邊距相關padding:

1. padding-top
2. padding-right
3. padding-bottom
4. padding-left
5. 縮寫屬性:padding: 10px,20px,30px,40px(順時針,上右下左)
   1. 四個值:順時針,上右下左
   2. 三個值 : 上右下,沒有左,左邊跟隨著右邊的值
   3. 兩個值: 上和右(下跟隨上,左跟右)
   4. 一個值: 全部方向都是相同的值

外邊距相關margin:

1. margin-top
2. margin-right
3. margin-bottom
4. margin-left
5. 縮寫屬性:margin: 10px,20px,30px,40px(順時針,上右下左)
   1. 四個值:順時針,上右下左
   2. 三個值 : 上右下,沒有左,左邊跟隨著右邊的值
   3. 兩個值: 上和右(下跟隨上,左跟右)
   4. 一個值: 全部方向都是相同的值
6. 上下margin傳遞->父子:
   1. margin-top傳遞　
      1. 如果塊級元素的頂部線和父元素的頂部線層疊,那麼這塊級元素的margin-top的值會傳遞給父
         級元素
   2. margin-bottom傳遞
      1. 如果塊級元素的低部線和父元素的低部線層疊,那麼這塊級元素的margin-bottom的值會傳遞給父級元素
   3. 解決:
      1. 父元素設定padding-top/padding-bottom
      2. 給父元素設定border
      3. 觸發BFC:設定一個元素的overflow為auto/hidden (常用)
         1. BFC:(block format context 塊級格式化上下文)

         2. 類似結界

         3. 如何觸發BFC

            1. 浮動可以觸發
            2. 設定一個元素的overflow為auto/hidden
7. 上下margin摺疊->兄弟:
   1. 垂直方向上相鄰的2個margin(margin-top, margin-bottom) 有可能會合併成1一個margin,這種情況叫做摺疊(collapse)
   2. 水平方向上margin永遠不會摺疊
   3. 摺疊後最終值計算規則
      1. 兩個值進行比較,取最大值
   4. 防止摺疊
      1. 只設置一個元素的margin
   5. 上下margin摺疊的用處
      1. 比如連續段落之間的margin,恰好需要這種摺疊

border(邊框)

1. 邊框寬度
   1. border-top-width ,border-right-width .border-bottom-width .border-left-width
   2. 簡寫:border-width
2. 邊框顏色
   1. border-top-color....
   2. 簡寫:border-color　　
3. 邊框樣式
   1. border-top-style.....
   2. 簡寫 border-style
   3. 取值
      1. none 無樣式
      2. dotted 點
      3. dashed 虛線
      4. solid 實線
      5. double 雙線
      6. groove
      7. ridge
      8. inset
      9. outside
4. border -top/border -right/border -bottom/border -left:1px red solid
5. 全部簡寫: border :1px red solid

邊框的形狀:

1. 矩形:

   1.   .box1 {
            width: 100px;
            height: 100px;
            background-color: blue;
            border-top: 20px orangered solid;
            border-left: 20px red solid;
          }
      

2. 三角形

   1. /* 上箭頭三角形 */
          .box3 {
            width: 0px;
            height: 0px;
            border-top: 100px solid orangered;
            /* transparent 透明 */
            border-left: 100px solid transparent;
            
            /* 旋轉 transform: rotate(角度deg);*/
            transform: rotate(-45deg);
          }
      

      
      
      

圓角效果:

1. radius 半徑,周圍
2. border-* -*-radius: 20px 10px
   1. * :方向 top,left.bottom.right
   2. 後面設定兩個引數,第一個是水平方向的半徑,第二個是垂直方向的半徑
   3. 還可以設定百分比
3. border-radius 參考的是當前元素的border+padding+content

4.  border-top-left-radius: 50px 25;
   

   /*圓角*/

   .box4{ width:100px; height:100px; background-color:red;
   /*border-top-left-radius:50px; border-bottom-left-radius:50px; border-top-right-radius:50px; border-bottom-right-radius:50px;*/ /*簡寫圓形*/ border-radius:50px; /* 等同　*/ /*border-radius:50%;*/ }

行內非替換元素注意點

1. 在行內非替換元素 width, height, margin-bottom, margin-top 不起作用
2. 在行內非替換元素作用特殊: padding-top, padding-bottom 上下會多出來區域,但是這個區域不佔空間
3. 在行內非替換元素作用特殊: border-top, border-bottom 上下會多出來區域,但是這個區域不佔空間　　
   1. 　　解決: display: inline-block
      • 1

word-break: 讓單詞可以斷開