学习笔记--盒模型

盒模型

内边距
会增加盒模型的面积
4个值顺时针读取

   padding: 30px 40px 70px 100px;

边框
border: 10px solid tomato;
border会增加盒模型的面积

圆角
border: 20px solid red;
border-radius: 50%;

单一角设置
border-top-right-radius: 50%;

solid 实线
dashed 虚线
dotted 点线
double 双线

外边距
margin
三角形

    .s{
        width: 0;
        height: 0;
        border: 20px solid pink;
        border-right-color:transparent;
        border-top-color:transparent;
        border-bottom-color: transparent;
    } 

盒模型面积:
S = (bl + pl + width + pr + br)*(bt + pt +height + pb + bb)

叠加现象:
常态下,兄弟标签间的上下距以大值为准

塌陷问题
原因:常态下,父级的第一个子级是个块标签,并且使用了margin或margin-top
解决方案:
1.在父级使用border
2.不使用margin-top,在父级使用padding-top
3.在父级使用overflow: hidden

overflow: hidden的作用:
1.隐藏溢出
2.解决塌陷
3.清除浮动