第三章 盒子模型筆記

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; 

     單例型寫法/複合型寫法

    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;

    margin-top:

    margin-right:

    margin-bottom:

    margin-left:

    margin:10px 30px;

    margin: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:透明