各种属性（二）

复合属性

是指可以设置多个属性值的属性，例如
background:

• url: 地址(本地地址，网络地址);
• repeat : 默认值 水平和垂直都铺满;
  • repeat-x：只铺满水平方向(左右)
  • repeat-y: 只铺满垂直方向(上下);
  • no-repeat: 不平铺 (图片放不满，留出空白);
• background-size: 50% 50%; 设置背景图片的尺寸

border:
边框： 宽度 样式 颜色
样式： 实线 solid
虚线 dashed
点线 dotted
border: 2px solid black;

背景图（雪碧图又称精灵图）

仅仅是作为示例；以实际的图片为主
background: url(…/…/…/img/chun.jpg);
写入背景图片

背景图尺寸

repeat ：no-repeat；（禁止背景图片平铺）
background-size: 100% 100%;（设置背景图片的尺寸）

背景图移动 background-position

/*background-position: 背景图的移动
			  background-position: 值1  值2;
	  		  值1：  水平方向移动的距离
	  		  值2：  垂直方向移动的距离

	  		  值的形式：
	  		  1. left center right   top center bottom
	  		  2. px（像素）
	  		  3. %（百分比）

	  备注： 背景大小的百分比是参考标签自身的大小
	  		 背景移动的百分比市参考图片自身的大小		   
			*/
		background-image: url(天蝎.jpg);
		background-size: 50% 50% ;
		background-position: 50% 50%;

内容超出容器

overflow : hidden;（超出部分隐藏）
overflow: 用来处理内容超出容器

• hidden: 隐藏;
• scroll: 滚动超出的部分

文字环绕

• 利用图片属性实现

<p style="width:400px;">
    <img src="#.jpg" align="right" width="120" hspace="5" vspace="5">
    文字环绕；文字环绕；文字环绕；文字环绕；文字环绕；文字环绕；
    文字环绕；文字环绕；文字环绕；文字环绕；文字环绕；文字环绕；
    文字环绕；文字环绕；文字环绕；文字环绕；文字环绕；文字环绕；
</p>

标签的属性align=“right”，想让图片居左，文字在右环绕，可以将align属性设置为left
其中 vspace 表示图片与文字的上下距离，hspace 表示左右距离。

• 利用CSS属性实现

<div style="width:400px;">
    <div style="float:left; clear: both;" align="center">
        <img src="#.jpg" width="120" alt="" hspace="8">
    </div>
    文字环绕；文字环绕；文字环绕；文字环绕；文字环绕；文字环绕；
    文字环绕；文字环绕；文字环绕；文字环绕；文字环绕；文字环绕；
    文字环绕；文字环绕；文字环绕；文字环绕；文字环绕；文字环绕；
</div>

float使文字环绕在一个元素的四周，它的值决定图片的位置
clear定义某一边是否有环绕文字