HTML+CSS知识总结第五期

一.CSS基础知识总结（接上篇）

（1）盒子模型

1.内边距（padding）:

padding属性用于设置内边距。 是指边框与内容之间的距离。
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距

2.外边距（margin）：

margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边    取值顺序跟内边距相同。

关于盒子的计算： 

3.盒子居中： 1. 必须是块级元素。2. 盒子必须指定了宽度（width）然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

4.清除元素的默认内外边距：内外边距为0

5.盒子阴影： box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影（inset/outset）；

（2）浮动 

1.浮动（float）：让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

特点：加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。

加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏 给了标准流的盒子。

特别注意，首先，浮动是脱标的，会影响下面的标准流元素，我们需要给浮动的元素添加一个标准
流的父亲，这样，最大化的减小了对其他标准流的影响， 其次，特别注意浮动可以使元素显示模式体现为行内块特性。

2.清除浮动带来的影响：清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。

解决方法为：可以给父级添加： overflow为hidden|auto|scroll 都可以实现,只要不是visible 。