第三章 盒子模型筆記

1.盒子模型-border
    組成寬度、顏色、樣式：
    border-width: 2px;/*邊框寬度*/
    border-color: pink;/*邊框顏色*/
    border-style: solid;/*邊框樣式*/
    複合寫法border: 1px solid pink;
    left：
    right：
    top：
    bottom；
 

  代碼示例：
    .box{
        width: 200px;
        height: 200px;
        /* background-color: pink; */
        border-width: 2px;/*邊框寬度*/
        border-color: pink;/*邊框顏色*/
        border-style: solid;/*邊框solid實線 dotted點狀線 dashed虛線 double雙實線*/

    }
    <div class='box'></div>

    border-style: solid;  /*默認3px黑色邊框*/
    單例型寫法/複合型寫法
    border:厚度 樣式 顏色；對四條邊
    border-right:厚度 樣式 顏色；
    border-right-width：右邊厚度
    border-width: 10px 10px 10px 10px；上 右 下 左
    border: none;去除邊框

    border-color:blue/red/yellow
    border-color:rgb(255,0,0)
    border-color:rgba(255,0,0,0)//alpha：0透明，1不透明
    border-color:#ffffff

2、盒子模型外邊框-margin
    margin:10px;/*外邊距,上右下左各10px*/
    margin-top:
    margin-right:
    margin-bottom:
    margin-left:
    margin:10px 30px;/*上下10px，左右30px*/
    margin:10px 30px 50px;/*上10px，左右30px，下50px*/
    margin：auto;
    margin：0 auto;/*常見水平居中方式*/
    二個相鄰的盒子外邊距合併特性
    解決合併問題：
        1、給父級設置內邊距代替自己外邊距
        2、給父級加邊框
        3、給父級overflow:hidden
        4、設置絕對定位
        5、設置display:inline-block;
        %：基於父元素寬度的百分比的外邊距
    inherit:從父元素繼承外邊距

3、盒子模型內邊距-padding

4、盒子寬度高度計算：
正常模型：
    box-sizing:content-box(默認)、往外擴
    width/height+border+padding+margin(左右和上下)

怪模模型：
    border-box計算寬度width/height+border+padding往內縮

.box1,.box2{/*並列選擇器*/

}
5、外邊距和內邊距合拼問題
解決方案：
    overflow:hidden;解決內邊距重合的
    float: left;
    display: inline-block;
    border:1px transparent solied;
    transparent:透明