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>
.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;}
- 可以添加多张背景图片，用，隔开，最先添加的在上层
