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则其空间可以被复用。
背景
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;}
- 可以添加多张背景图片,用,隔开,最先添加的在上层