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：缩放图片，使其恰好适合背景区；保持宽高比。- 简写```CSSbody {    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;}

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