css初级入门----篇三（书接上回）

21、padding属性用于设置内边距指边框与内容之间的距离。

padding-top上内边距padding-right右内边距

padding-bottom下内边距padding-left左内边距

22、外边距（margin）

设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。

margin-top:上外边距margin-right:右外边距margin-bottom:下外边距

margin-left:上外边距margin:上外边距 右外边距  下外边距  左外边

取值顺序跟内边距相同。

注：让一个盒子实现水平居中，需要满足一下两个条件：

必须是块级元素。 盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

例   .header{ width:960px; margin:0 auto;}

清除元素的默认内外边距，* {padding:0; margin:0; }把值设置为0即可

行内元素是只有左右内外边距的，是没有上下内外边距的。

23、相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面元素有下外边距margin-bottom，下面元素有上外边距margin-top，则他们间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）

24、嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并

解决方案：

可以为父元素定义1像素的上边框或上内边距

可以为父元素添加overflow:hidden

25、content宽度和高度

使用宽度属性width和高度属性height可以对盒子的大小进行控制。

符合CSS规范的盒子模型的总宽度和总高度的计算原则是：

盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和

盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和

注：宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）

计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。

26、盒子模型布局稳定性

优先使用宽度（width） 其次使用内边距（padding） 再次外边距（margin）

padding  会影响盒子大小， 需要进行加减计算

margin 会有外边距合并 还有 ie6下面margin 加倍的bug所以最后使用

27、盒子阴影box-shadow:[水平阴影 垂直阴影] 模糊距离 阴影尺寸 阴影颜色  内/外阴影

28、浮动(float)   CSS的定位机制有3种：普通流（标准流）、浮动和定位。

（1）普通流(normal flow)，一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局

（2）浮动，元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，

移动到其父元素中指定位置的过程

left元素向左浮动right元素向右浮动none元素不浮动（默认值）

（3）浮动首先创建包含块的概念（包裹），浮动的元素总是找理它最近的父元素对齐，

是不会超出内边距的范围

浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，

则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，

则A元素的顶部会和上一个元素的底部对齐

一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。

这样才能一行对齐显示

元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少。浮动根据元素书写的位置来显示相应的浮动。

29、清除浮动，主要为了解决父级元素因为子级浮动引起内部高度为0 的问题

    就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素

方法：clear属性用于清除浮动  选择器{clear:属性值;}

父级添加overflow属性方法  使用after伪元素清除浮动  

使用before和after双伪元素清除浮动

30、定位

top顶端偏移量，定义元素相对于其父元素上边线的距离

bottom底部偏移量，定义元素相对于其父元素下边线的距离

left左侧偏移量，定义元素相对于其父元素左边线的距离

right右侧偏移量，定义元素相对于其父元素右边线的距离

static自动定位（默认定位方式）

relative相对定位，相对于其原文档流的位置进行定位

absolute绝对定位，相对于其上一个已经定位的父元素进行定位

fixed固定定位，相对于浏览器窗口进行定位