CSS常用属性总结一

导语 ******* CSS 常用属性 *********z-index:auto (默认值)检索或设置对象的层叠顺序。并级的对象,此属性参数值越大,则被层叠在最上面。如两个对象的此属性具有
                                              ******* CSS 常用属性  *********
 
z-index: 
 
 auto (默认值) 
 
检索或设置对象的层叠顺序。 
并级的对象,此属性参数值越大,则被层叠在最上面。 
如两个对象的此属性具有同样的值,那么将依据它们在HTML文档中流的顺序层叠,写在后面的将会覆盖前面的。 
必须定义position属性值为 relative | absolute | fixed | center | page,此取值方可生效。 
对应的脚本特性为zIndex。 
 
--------------------------------------------------------------------------------------------------
 
clip:检索或设置对象的可视区域。区域外的部分是透明的。 
 
必须将position的值设为absolute,此属性方可使用。 
 
auto: 对象无剪切 
rect(|auto |auto |auto |auto): 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用auto替换,即此边不剪切。 
上-左 方位的裁剪:从0开始剪裁直到设定值,即 上-左 方位的auto值等同于0; 
右-下 方位的裁剪:从设定值开始剪裁直到最右边和最下边,即 右-下 方位的auto值为盒子的实际宽度和高度; 
示例:clip:rect(auto 50px 20px auto)
 
说明:上边不剪切,右边从第50个像素开始剪切直至最右边,下边从第20个像素开始剪切直至最底部,左边不剪切
 
inset(|auto |auto |auto |auto): 该剪裁方式与 rect() 类似,不同的是 inset() 的剪裁,每个方位都是参照该方位的边界来进行裁剪的。 
上-右-下-左 方位的裁剪:从0开始剪裁直到设定值,即 上-右-下-左 方位的auto值都等同于0;(CSS3) 
 
-----------------------------------------------------------------------------------------------------------
 
position:  检索对象的定位方式。 
 
static: 对象遵循常规流。top,right,bottom,left等属性不会被应用。 
relative: 对象遵循常规流,并且依据自身在正常流中的位置通过top,right,bottom,left属性进行偏移时不影响常规流中的任何元素。层叠通过z-index属性定义。 
absolute: 对象脱离常规流,使用top,right,bottom,left等属性进行绝对定位,盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠,其层叠通过z-index属性定义。 
fixed: 对象脱离常规流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。IE6及以下不支持此参数值 
center: 对象脱离常规流,使用top,right,bottom,left等属性指定盒子的位置或尺寸大小。盒子在其包含容器垂直水平居中。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠,其层叠通过z-index属性定义。(CSS3) 
page: 盒子的位置计算参照absolute。(CSS3) 
 
------------------------------------------------------------------------------------------------------------------
 
margin   
 
 h2{margin:10px 0;}
 
检索或设置对象四边的外延边距。 
如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。 
如果只提供一个,将用于全部的四边。 
如果提供两个,第一个用于上、下,第二个用于左、右。 
如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。 
内联对象可以使用该属性设置左、右两边的外补丁;若要设置上、下两边的外补丁,必须先使该对象表现为块级或内联块级。 
外延边距始终透明。 
某些相邻的margin会发生合并,我们称之为margin折叠
 
---------------------------------------------------------------------------------------------------------
 
aspect-ratio
 
  : 指定比率 
 
定义输出设备中的页面可见区域宽度与高度的比率。 
本特性接受min和max前缀,因此可以派生出min-aspect-ratio和max-aspect-ratio两个媒体特性。 
 
@media screen and (aspect-ratio:1680/957){ … }
@import url(example.css) screen and (max-aspect-ratio:20/11);
 
---------------------------------------------------------------------
 
background:  
 
[ background-color ]: 指定对象的背景颜色。 
[ background-image ]: 指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图像” 
[ background-repeat ]: 指定对象的背景图像如何铺排填充。 
[ background-attachment ]: 指定对象的背景图像是随对象内容滚动还是固定的。 
[ background-position ]: 指定对象的背景图像位置。 
[ background-origin ]: 指定对象的背景图像显示的原点。 
[ background-clip ]: 指定对象的背景图像向外裁剪的区域。 
[ background-size ]: 指定对象的背景图像的尺寸大小。 
 
--------------------------------------------------------------------
 
background-attachment   设置或检索背景图像是随对象内容滚动还是固定的。必须先指定background-image属性。
 
fixed: 背景图像相对于窗体固定。 
scroll: 背景图像相对于元素固定,也就是说当元素内容滚动时背景图像不会跟着滚动,因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。 
local: 背景图像相对于元素内容固定,也就是说当元素随元素滚动时背景图像也会跟着滚动,因为背景图像总是要跟着内容。(CSS3) 
 
-----------------------------------------------------------------------------------------------------------------------------
 
background-clip    指定对象的背景图像向外裁剪的区域。 
 
padding-box: 从padding区域(不含padding)开始向外裁剪背景。 
border-box: 从border区域(不含border)开始向外裁剪背景。 
content-box: 从content区域开始向外裁剪背景。 
text: 从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此即可实现使用背景作为填充色之类的遮罩效果。
 
---------------------------------------------------------------------------------------------------------------
 
background-repeat: 设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性。 
 
允许提供2个参数,如果提供全部2个参数,第1个用于横向,第二个用于纵向。 
如果只提供1个参数,则用于横向和纵向。特殊值repeat-x和repeat-y除外,因为repeat-x相当于repeat no-repeat,repeat-y相当于no-repeat repeat,即其实repeat-x和repeat-y等价于提供了2个参数值 
对应的脚本特性为backgroundRepeat。 
 
repeat-x: 背景图像在横向上平铺 
repeat-y: 背景图像在纵向上平铺 
repeat: 背景图像在横向和纵向平铺 
no-repeat: 背景图像不平铺 
round: 背景图像自动缩放直到适应且填充满整个容器。(CSS3) 
space: 背景图像以相同的间距平铺且填充满整个容器或某个方向。(CSS3
 
-------------------------------------------------------------------------
 
background-position:  设置或检索对象的背景图像位置。必须先指定background-image属性。 
 
如果提供四个,每个偏移前都必须跟着一个关键字(即left | center | right | top | bottom),偏移量相对关键字位置进行偏移。 
 
示例:假设要定义背景图像在容器中右下方,并且距离右边和底部各有20px 
 
缩写方式: background:url(test1.jpg) no-repeat right 20px bottom 20px;
 
: 用百分比指定背景图像填充的位置。可以为负值。 
: 用长度值指定背景图像填充的位置。可以为负值。 
center: 背景图像横向和纵向居中。 
left: 背景图像在横向上填充从左边开始。 
right: 背景图像在横向上填充从右边开始。 
top: 背景图像在纵向上填充从顶部开始。 
bottom: 背景图像在纵向上填充从底部开始。 
 
------------------------------------------------------------
 
background-origin: 设置或检索对象的背景图像计算background-position时的参考原点(位置)。 
 
padding-box: 从padding区域(含padding)开始显示背景图像。 
border-box: 从border区域(含border)开始显示背景图像。 
content-box: 从content区域开始显示背景图像。 
 
-----------------------------------------------------------
http://www.aseoe.com/ true CSS常用属性总结一 http://www.aseoe.com/show-10-72-1.html report 4810.5 ******* CSS 常用属性 *********z-index:auto (默认值)检索或设置对象的层叠顺序。并级的对象,此属性参数值越大,则被层叠在最上面。如两个对象的此属性具有
TAG:CSS 属性
本站欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明: 文章转载自:爱思资源网 http://www.aseoe.com/show-10-72-1.html

[前端插件推荐] Plugin

1 2 3 4
  • jQuery实现逐字逐句显示插件l-by-l.min.js
  • jQuery带方向感知的鼠标滑过图片边框特效插件
  • jQuery HotKeys监听键盘按下事件keydown插件
  • 响应式无限轮播jQuery旋转木马插件
响应式无限轮播jQuery旋转木马插件
web前端开发
爱思资源网 Copyright 2012-2014 Www.Aseoe.Com All rights reserved.(晋ICP备13001436号-1)