CSS笔记（四）边框、内边距、外边距
盒⼦边框border
内边距padding：控制盒⼦的内容，有撑开盒⼦的问题
外边距margin：盒⼦和盒⼦的距离，有外边距合并问题
1、边框：border
  边框三个属性必须⼀起出现：border-width：1px; border-color: red;  border-style: solid;  //solid实线边框，dashed虚线，dotted点线  三个属性连写：border: 1px solid red;
border radius什么意思注：  border会撑开带有width和height的盒⼦
属性：border-top/bottom/left/right：5px；设置上下左右的距离
    border-radius：5px; 设置边框圆⾓
    border-collapse：collapse；合并相邻边框
2、内边距：padding
padding：10px；有⼀个上下左右10像素的边框
padding-left/right/top/bottom
padding: 10px 20px 30px; 上10  左右20  下30
注：padding会撑开带有width和height的盒⼦，
注：padding会撑开盒⼦，border也会撑开，如果规定盒⼦的⼤⼩，要把这两个的长度也计算进去。
（1）padding不会撑开盒⼦的情况
给有宽度的div设置padding会撑开盒⼦，⽽div⾥⾯的⼦div如果没有给宽度，继承⽗div的宽度，padding就不撑开。
3、外边距：margin
（1）text-align：只能让div⾥⾯的⽂本居中对齐；
让div盒⼦居中对齐：margin: 0 auto;  ⾃动充满。左右充满就居中了
=margin-left: auto; margin-right: auoto;
⽤margin: 0 auto；设置居中条件：必须是块级元素和有指定⾼度；
（2）外边距合并：
相邻元素垂直外边距会合并，以最⼤的为准，如上下两个div，⼀个有margin-bottom⼀个有margin-top，这两个会合并。⽆法避免。
（3）嵌套块集元素垂直外边距合并：
⼀个⼤div⾥⾯有个⼩的div，⼩的div设置margin-top会把两个div⼀起下来，⽽不是⼩div距离⼤div的mergin-top；⽆法避免。
解决：（1）为⽗亲元素定义1像素的上边框或者上内边距：border：1px solid #000；会撑开盒⼦⼤⼩
（2）为⽗亲元素添加overflow:hidden;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。