前端学习笔记之margin、padding、border

1.内容相关属性

2.padding属性

padding:上 右 下 左

1）3个值---无左，左跟随右

2）2个值---无下、左，下跟上；左跟右

3）1个值---上下左右全为

3.margin属性

上下两个盒子同时设置margin-bottom=20px和margin-top=20px，会被折叠，实际效果两个盒子间距只有20px

左右两个盒子同时设置margin-right=20px和margin-left=20px，实际效果两个盒子间距有40px

1）父子之间的margin传递折叠：父元素对上面一个元素有margin-top，子元素对父元素有margin-top，那么实际上父元素对上一个元素的margin-top为两个值中较大的一个

3.1margin传递

防止传递：1）给父元素设置padding-top

                   2）给父元素设置border

                   3）触发BFC：设置overflow为auto或hidden

4.margin、padding、boder与行内非替换元素

要想起作用，将行内非替换元素改为inline-block或者block

 border-radius：设置圆角

border-radius:50%;

参考的是当前border+padding+width的宽度