常用属性
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: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:80px 60px;
值 | 描述 |
---|
length | 设置背景图像的高度和宽度。只设置一个值,则第二个值会被设置为 “auto” |
percentage | 将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为"auto(自动)" |
cover | 保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小(背景图像的某些部分也许无法显示在背景定位区域中) |
contain | 保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小(可能占不满父盒子宽度或者高度) |
background-repeat:repeat;
值 | 描述 |
---|
repeat | 背景图像将向垂直和水平方向重复,默认 |
repeat-x | 只有水平位置会重复背景图像 |
repeat-y | 只有垂直位置会重复背景图像 |
no-repeat | background-image不会重复 |
inherit | 从父元素继承 |
background-origin:content-box;
值 | 描述 |
---|
padding-box | 背景图像填充框的相对位置 |
border-box | 背景图像边界框的相对位置 |
content-box | 背景图像的相对位置的内容框 |
background-clip:content-box;
值 | 描述 |
---|
padding-box | 背景绘制在边框方框内 |
border-box | 背景绘制在衬距方框内 |
content-box | 背景绘制在内容方框内 |
background-attachment:fixed;
值 | 描述 |
---|
scroll | 背景图片随着页面的滚动而滚动,这是默认的 |
fixed | 背景图片不会随着页面的滚动而滚动 |
local | 背景图片会随着元素内容的滚动而滚动 |
initial | 设置该属性的默认值 |
inherit | 从父元素继承 |
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); |
如需转载,请标注