【CSS】关于CSS的盒子模型

一、标准模式和怪异模式

/*标准模式，元素实际宽度为：width+margin+border+padding     */
div {
    box-sizing: content-box;
}

/*怪异模式，元素实际宽度即为：width+margin     */
div {
    box-sizing: border-box;
}

​ padding和border不会撑大盒子，前提是padding和border不会超过width宽度

二、基本属性

01.尺寸

p {
    width: 200px; 
    height: 100px;
}

div {
    /*内容小于最小高度，以最小高度为准，超过最小高度，以实际内容为准*/
    min-height: 200px;
    
    /*
    max-height: 500px;
    min-width: 300px;
    max-width: 500px;
    */
}

---

02.边框——border

div{
    /*border：width style color;*/
    /*border-style: solid | dashed | dotted | double;*/
    border: 1px solid red;
    /*也可分别设置*/
    border-left:2px solid blue;
    border-top-color: black;
    border-right-style: dotted;
}

（1）盒子阴影——box-shadow

div{
    box-shadow:1px 1px 1px 1px black;
    /*第1个值设置对象的阴影水平偏移值,可负*/
    /*第2个值设置对象的阴影垂直偏移值,可负*/
    /*第3个值设置对象的阴影模糊值，可省略，不可为负*/
    /*第4个值设置对象的阴影外延值，可省略，不可为负*/
    /*第5个值设置对象的阴影的颜色*/
}

（2）圆角边框——border-radius

div{
    /*设置圆角的半径长度*/
    border-radius:25px;
    /*
    	也可分别设置，设置原理同padding
    	左上方向出发，顺时针对应；有缺省，取对角值
    */
}

---

03.内边距——padding

盒子的边框与内容的间隔

div {
    /*一个值，即上下左右的内边距都一样*/
    padding: 10px;
    
    /*两个值，则第一个值为上下内边距，第二个值为左右内边距*/
    padding: 10px 20px;
    
    /*三个值，第一个为上内边距，第二个为左右内边距，第三个为下内边距*/
    padding: 10px 20px 30px;
    
    /*四个值，则按上右下左依次赋值内边距*/
    padding: 10px 20px 30px 40px;
}
/*设置：上方向出发，顺时针对应；有缺省，取对边值*/

【注意】默认情况下，padding会撑大盒子

---

04.外边距——margin

盒子与盒子之间的间隔

div {
    /*一个值，即上下左右的外边距都一样*/
    padding: 10px;
    
    /*两个值，则第一个值为上下外边距，第二个值为左右外边距*/
    padding: 10px 20px;
    
    /*三个值，第一个为上外边距，第二个为左右外边距，第三个为下外边距*/
    padding: 10px 20px 30px;
    
    /*四个值，则按上右下左依次赋值外边距*/
    padding: 10px 20px 30px 40px;
}
/*设置：上方向出发，顺时针对应；有缺省，取对边值*/

（1）关于外边距的一些问题

（a）外边距塌陷的问题

父元素和子元素在都设置了外边距的情况下，外边距会塌陷，只会作用在父元素身上（父元素和子元素之间没有间距），值为两者较大的那个，

【解决办法】

/*第一种*/
div{
    /*为父元素设置边框*/
      border:1px solid transparent;
}

/*第二种*/
div{
    /*为父元素设置内边距*/
     padding:1px;
}

/*第三种*/
div{
    /*在父元素内添加*/
 	overflow:hidden; 
}

（b）浮动盒子边框叠加的问题

浮动盒子有边框的情况下，在浮动时，后面的盒子会紧贴边框，于是，此时会产生两个盒子边框叠加的问题，即两者盒子之间的边框有两条，宽度实际变大了

【解决办法】可以设置浮动盒子的margin-left为负值，负值数量为边框的线宽，即可解决

li {
    float: left;
    list-style: none;
    width: 100px;
    height: 200px;
    /*因为设置了边框，所以在li浮动时，两个li之间的实际边框会是两个像素*/
    border:1px solid red;
    
    /*设置margin-left,让后面的li盒子向左多移动1个像素*/
    margin-left: -1px;
    /*这样就可以解决两个li盒子之间的边框问题*/
}

---

三、border延伸——CSS三角形

01.原理

• 当盒子为空，仅设置边框宽度，且四个边框样式不一，则可看到盒子由四个三角形构成

  p {
      border-top: 50px solid red;
      border-right: 50px solid green;
      border-bottom: 50px solid blue;
      border-left: 50px solid yellow;
  }
  

---

• 02.方法

  • 先添加一个空的盒子，宽、高都设置为0；

    div{
        width: 0;
        height: 0;
    }
    

  • 再给盒子设置边框

    div{
        width: 0;
        height: 0;
        /*即边框宽度为50px；边框颜色为透明*/
        border：50px solid transparent;
    }
    

  • 然后再单独设置一条边框的颜色，方向：top、right、bottom、left

    div{
        width: 0;
      height: 0;
        /*即边框宽度为50px；边框颜色为透明*/
        border：50px solid transparent;
        /*给左边框加上颜色*/
        border-left-color：red；
    }
    

  

---

• 最后可生成对应方向的等腰直角三角形

• 为了兼容性可添加以下样式

  div{
      width: 0;
    height: 0;
      /*即边框宽度为50px；边框颜色为透明*/
      border：50px solid transparent;
      /*给左边框加上颜色*/
      border-left-color：red；
      
      /*兼容性*/
      line-height：0；
      font-size：0
  }
  

• 03.其它

• 如果为了生成直角三角形

• 则:

  div {
      width: 0;
      height: 0;
      /*把上边框调大，并把边框颜色设置为透明*/
      border-top：100px solid transparent;
      /*给左边框加上颜色*/
      border-right：50px solid red;
      /*左边框和下边框设置为0*/
      border-bottom：0 solid transparent;
      border-left：0 solid transparent;
      /*最后生成直角三角形*/
  }
  

  div {
      /*整合写法*/
      border-color: transparent red transparent transparent;
      border-style: solid;
      border-width: 100px 50px 0 0;
  }
  

---