CSS学习笔记之定位

---

CSS的盒子及相关

盒子基础

• postion，float，display——版式
   边框（border）。可以设置边框的宽窄、样式和颜色。
   内边距（padding）。可以设置盒子内容区与边框的间距。
   外边距（margin）。可以设置盒子与相邻元素的间距。
• 简写——上右下左，缺省取对边值
• 较宽的外边距决定了元素间的距离
• 没有设置width，其width为父元素width

• 盒子的width是其内容区的宽度，增加边距使整个盒子变得更大

  浮动和清除

• 为父元素添加overflow：hidden属性强制包围浮动元素，该属性真正左右是防止包含元素被内容撑大

• 在父元素中添加非浮动元素，或者通过clearfix添加，例子如下，content必须要有

  <section class="clearfix">
  <img src="images/rubber_duck.jpg">
  
  
  <p>It's fun to float.</p>
  
  
  </section>
  <footer> Here is the footer element…</footer>
  
  

  ```CSS
  .clearfix:after {
  content:".";
  display:block;
  height:0;
  visibility:hidden;
  clear:both;
  }

- 对于子元素通过上面的clearfix处理也可以，在上例中就是给p加标记

####定位
- position：static，relative，absolute，fixed
- fixed与absolute的区别在于fixed时不随屏幕滚动而改变，换句话说，它是对当前屏幕定位，而absolute是对于整个页面定位
- 只有当position不为static时，top，bottom，left，right属性才发挥作用
####显示属性
块级元素（段落，标题等）堆叠显示，行内元素（a，img，span）则并排显示，直到这一行没有空间才显示到下一行，通过改display为inline，block可以调整。将其设为none则其空间可以被复用。
####背景

![1.jpg](http://upload-images.jianshu.io/upload_images/80283-5baf1fb4ebd2d37f.jpg)

 background-color
 background-image
 background-repeat
 background-position
 background-size
 background-attachment
 background（简写属性）
-  比元素小的背景图片会在水平和垂直方向上重复出现，直至填满整个背景空间，使用background-repeat可以调整，有repeat，repeat-x，repeat-y，no-repeat，round（调整图片大小），space（空白填充）
- background-position 属性同时设定元素和图片的原点，默认top，left，可用百分比设置，默认顺序为水平，垂直。
- back-ground-size：
 50%：缩放图片，使其填充背景区的一半。
 100px 50px：把图片调整到 100 像素宽，50 像素高。
 cover：拉大图片，使其完全填满背景区；保持宽高比。
 contain：缩放图片，使其恰好适合背景区；保持宽高比。
- 简写
```CSS
body {
    background-image:url(images/watermark.png);
    background-position:center;
    background-color:#fff;
    background-repeat:no-repeat;
    background-size:contain;
    background-attachment:fixed;
}

简写后

body {background:url(images/watermark.png) center #fff no-repeat contain fixed;}

• 可以添加多张背景图片，用，隔开，最先添加的在上层