第三章 盒子模型笔记

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双实线*/

    }
    

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