CSS学习笔记之定位

---

CSS的盒子及相关

盒子基础

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

浮动和清除

• 为父元素添加overflow：hidden属性强制包围浮动元素，该属性真正左右是防止包含元素被内容撑大
• 在父元素中添加非浮动元素，或者通过clearfix添加，例子如下，content必须要有

   
   
It's fun to float.

 Here is the footer element…

.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

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

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;}

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