css_day4

盒子模型的组成

border边框 padding内边距 margin外边距

关于盒子的边框

默认的边框样式是none：没有边框
边框样式是不可以不写的，一定要存在
border-style: none;
/* 没有边框 /
border-style: solid;
/ 实线 /
border-style: double;
/ 双实线 /
border-style: dotted;
/ 点线 /
border-style: dashed;
/ 虚线 */
圆角边框 border-radius:20px ； 后面赋值是圆的半径

关于盒子的内边距

控制内容与边框的距离————内边距——————padding
图片、盒子也可以作为内容存在
盒子的宽度，不一定是width属性，也有可能是padding

关于盒子的外边距

1.如果想要控制盒子与盒子之间的距离，那么使用margin。
2.距离在盒子的外边的时候，使用外边距。
3.垂直塌陷——当垂直排布的两个盒子，添加相对应的margin，那么他们之间的距离不是相加，而是取最大值。
（例如：由两个上下排布的盒子，之间距离是300px，那么直接把这300px直接给其中一个即可）
4.包含塌陷：存在父子关系的盒子，给子元素添加margin-top，有可能会把父元素一起带跑。原因是内部的margin溢出到外部了。
三种解决方法：1.给父元素设置上边框 因为会添加没有意义的边框
2.给父元素设置上padding 因为会添加没有意义的内边距
3.给父元素设置overflow:hidden; 触发了BFC机制，让内部布局不影响外部

拓展知识

1.特殊的行内元素：行内元素，使用padding与margin的时候，会失效
行内元素添加垂直的padding没有效果
行内元素添加垂直的margin没有效果
2.设置盒子居中：如果把距离写死，那么就不适合所有的屏幕
一种方法，可以让距离自适应————自行计算
margin: 0 auto; auto:自动计算
3.行内与行内块不能居中：margin: 0 auto对行内元素没有效果
margin: 0 auto对行内块元素没有效果
margin: 0 auto只服务于块级元素
4.清除内外边距：默认情况，很多标签都有自带的内外边距，这些默认的样式会影响到我们的布局。
例如a标签的下划线，li标签前面的小点点，p标签上下的距离。
如何清除标签自带的内外边距：*{
margin: 0;
padding: 0;
}

盒子的实际大小

盒子的真实宽高=设置的宽高 + border + padding