CSS 高效常用属性

常用属性

1. 盒模型 box-sizing

传统盒模型 content-box CSS3盒模型 border-box

// 默认是传统盒模型
box-sizing: content-box; 

属性值	描述
content-box	元素的宽度和高度（最小/最大属性）适用于box的宽度和高度 （padding、border会撑大盒子）
border-box	已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度（padding+border不会撑大盒子）
inherit	从父元素继承 box-sizing 属性的值

备注：

2. 背景设置 background

// 综合语法
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
background: #000 url(图片地址) 

• background-color

background-color:yellow;
background-color:#00ff00;
background-color:rgb(255,0,255);
background-color:transparent ;

值	描述
color	指定背景颜色（rgba、#FFFFFF、颜色名称）
transparent	指定背景颜色应该是透明的
inherit	指定背景颜色，从父元素继承

• background-position
  注意：工作在Firefox和Opera，background-attachment必须设置为 “fixed（固定）”

background-position:center right;

值	描述
top left等	位置，仅指定一个关键字，其他值将会是"center"
x% y%	第一个值是水平位置，第二个值是垂直，默认：0% 0%
xpos ypos	单位可以是像素（0px0px）或任何其他 CSS单位
inherit	指定background-position属性设置应该从父元素继承

• background-size

background-size:80px 60px;

值	描述
length	设置背景图像的高度和宽度。只设置一个值，则第二个值会被设置为 “auto”
percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover	保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小（背景图像的某些部分也许无法显示在背景定位区域中）
contain	保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小（可能占不满父盒子宽度或者高度）

• background-repeat

background-repeat:repeat;

值	描述
repeat	背景图像将向垂直和水平方向重复，默认
repeat-x	只有水平位置会重复背景图像
repeat-y	只有垂直位置会重复背景图像
no-repeat	background-image不会重复
inherit	从父元素继承

• background-origin

background-origin:content-box;

值	描述
padding-box	背景图像填充框的相对位置
border-box	背景图像边界框的相对位置
content-box	背景图像的相对位置的内容框

• background-clip

background-clip:content-box;

值	描述
padding-box	背景绘制在边框方框内
border-box	背景绘制在衬距方框内
content-box	背景绘制在内容方框内

• background-attachment

background-attachment:fixed;

值	描述
scroll	背景图片随着页面的滚动而滚动，这是默认的
fixed	背景图片不会随着页面的滚动而滚动
local	背景图片会随着元素内容的滚动而滚动
initial	设置该属性的默认值
inherit	从父元素继承

• background-image

  注意： 渐变属于CSS3

    	direction：可设置方向
    		- 从右下角开始，例如： to bottom right
    		- 渐变轴为180度，例如： 180deg
    		
    	shape：圆的类型
    		- ellipse： 椭圆形
    		- circle： 圆形
    		
    	size：定义渐变大小 
    		- farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
    		- closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边
    		- closest-corner： 指定径向渐变的半径长度为从圆心到离圆心最近的角
    		- farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边
    		
    	position：定义渐变的位置
    		- center（默认）：设置中间为径向渐变圆心的纵坐标值
    		- top：设置顶部为径向渐变圆心的纵坐标值
    		- bottom：设置底部为径向渐变圆心的纵坐标值
  
    	angle：定义渐变的角度方向（从 0deg 到 360deg，默认为 180deg）
    	
    	side-or-corner：指定线性渐变的起始位置。第一个为指定水平位置(left 或 right)，第二个为指定垂直位置（top 或bottom）
  
    	color-stop：指定渐变的起止颜色，由颜色值、停止位置（可选，使用百分比指定）组成。
  

background-image:url('paper.gif');

值	描述
none	无图像背景会显示。这是默认
linear-gradient()	创建一个线性渐变的 “图像”(从上到下) 例如：background-image: linear-gradient(direction, color-stop1, color-stop2, …);
radial-gradient()	用径向渐变创建 “图像” (center to edges) 例如：background-image: radial-gradient(shape size at position, start-color, …, last-color);
repeating-linear-gradient()	创建重复的线性渐变 “图像” 例如：background: repeating-linear-gradient(angle / to side-or-corner, color-stop1, color-stop2, …);
repeating-radial-gradient()	创建重复的径向渐变 “图像” 例如：background-image: repeating-radial-gradient(shape size at position, start-color, …, last-color);

如需转载，请标注