css整理－05 边框,背景和浮动，定位

边框

样式:border-style

• hidden, dotted, dashed, solid , double, groove, ridge, inset, outset
  
• 最不可预测的是double,这都是由用户代理决定的
  
• 可以每边设置不同样式

宽度

颜色

简写

• 当三个一起简写的时候，没有顺序

背景

背景图片：background-image

• 背景默认是不继承的；但可以使用background-image: inherit;来继承

重复: background-repeat

• repeat-x, repeat-y, no-repeat

位置: background-position

• 不能超过两个关键字，一个水平方向，一个垂直方向，没有顺序
  
• 如果使用数值／百分数的话为水平和垂直顺序
  
• 如果只有一个，默认另一个为ccenter

关联: background-attachment

• scroll,fixed

简写: background

• |background-color|background-image|background-repeat|background-attachment|brackground-position|
  
• 没有顺序限制，不过background-position的两个值必须要在一起

浮动

浮动元素

• 会以某种方式将浮动元素从文档的正常流中删除,不过它还是对文档的其余部分有影响
  
• 一个元素浮动的时候，其他元素会环绕该元素
  
• 浮动元素周围的外边距不会合并

浮动的内幕

• 浮动元素的包含框就是离其最近的块级祖先元素
  
• 浮动元素会生成一个块级框，而不论这个元素本身是什么
  
• 浮动元素不能超过其包含框的边界;除了设置margin为负值之外
  
• 浮动元素的浮动方向边界必须是其包含框中之前出现的浮动元素的边界或是包含框边界；除非后出现的浮动元素顶部再先出现浮动元素的底端
  
• 浮动元素的顶端不能比之前出现的浮动元素的顶端高
  
• 如果浮动元素在其包含框之前有其他元素，浮动元素的顶端不能比包含该元素所生成框更高

清除: clear

• 保证元素左右边界不接触浮动元素
  
• 清除区域是在元素上外边距之上增加的额外间隔，不允许任何浮动元素进入这个范围

定位

类型

• static:元素框正常生成
  
• relative:元素框偏移某个距离，原本占用的控件仍保留
  
• absolute:元素框从文档流中完全删除，相对其包含块定位，不保留原来占用的空间
  
• fixed:表现同上，不过其包含框是视窗本身;

包含块

• 根元素的包含块由用户代理建立
  
• 非根元素，其position是relative, static,包含块则由最近的块级框，表单元格或行内祖先框的内容边界构成
  
• 非根元素，其position是absolute,包含块设置为最近的position不是static(默认)的祖先元素

偏移属性

• 对于设置relative, position, fixed的元素有效

剪切

• clip: react(top,right,bottom,left)
  
• 保留其原来的长宽占位等特性

非替换元素的放置和大小

• 绝对定位居中:

       #parent{
        width: 100px;
        height: 100px;
        position: relative;
       }
       #child{
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto 0;
       }

  替换元素的放置和大小

• 与非替换元素不同，替换元素有固有的高度和宽度，除非特别设置，不然其大小不会改变