CSS常用属性总结一

     ******* 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区域开始显示背景图像。 

-----------------------------------------------------------

以上就是CSS常用属性总结一的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！