CSS样式常用属性整理

转载 2017年01月03日 10:57:55


web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高。
  那么前端除了学习html标签之外还需要掌握什么知识点呢?
  为大家整理了一个和HTML标签密不可分的知识要点--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 对象遵循常规流。toprightbottomleft等属性不会被应用。

  relative 对象遵循常规流,并且依据自身在正常流中的位置通过toprightbottomleft属性进行偏移时不影响常规流中的任何元素。层叠通过z-index属性定义。

  absolute 对象脱离常规流,使用toprightbottomleft等属性进行绝对定位,盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠,其层叠通过z-index属性定义。

  fixed 对象脱离常规流,使用toprightbottomleft等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。IE6及以下不支持此参数值

  center 对象脱离常规流,使用toprightbottomleft等属性指定盒子的位置或尺寸大小。盒子在其包含容器垂直水平居中。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠,其层叠通过z-index属性定义。(CSS3)

  page 盒子的位置计算参照absolute(CSS3)

  margin

  h2{margin:10px 0;}

  检索或设置对象四边的外延边距。

  如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。

  如果只提供一个,将用于全部的四边。

  如果提供两个,第一个用于上、下,第二个用于左、右。

  如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。

  内联对象可以使用该属性设置左、右两边的外补丁;若要设置上、下两边的外补丁,必须先使该对象表现为块级或内联块级。

  外延边距始终透明。

  某些相邻的margin会发生合并,我们称之为margin折叠

  aspect-ratio

  : 指定比率

  定义输出设备中的页面可见区域宽度与高度的比率。

  本特性接受minmax前缀,因此可以派生出min-aspect-ratiomax-aspect-ratio两个媒体特性。

  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-xrepeat-y除外,因为repeat-x相当于repeat no-repeatrepeat-y相当于no-repeat repeat,即其实repeat-xrepeat-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-repeatright 20px bottom 20px;

  : 用百分比指定背景图像填充的位置。可以为负值。

  : 用长度值指定背景图像填充的位置。可以为负值。

  center 背景图像横向和纵向居中。

  left 背景图像在横向上填充从左边开始。

  right 背景图像在横向上填充从右边开始。

  top 背景图像在纵向上填充从顶部开始。

  bottom 背景图像在纵向上填充从底部开始。

  background-origin 设置或检索对象的背景图像计算background-position时的参考原点(位置)

  padding-box padding区域(padding)开始显示背景图像。

  border-box border区域(border)开始显示背景图像。

  content-box content区域开始显示背景图像。


WEB前端学习交流群20 103791667

相关文章推荐

CSS样式有哪些常用的属性?

一般的一个DIV的CSS设置属性有:margin,padding,width,height,font-size,text-align,background,float,border 附:《 cs...

常用CSS样式属性

字体属性:(font)大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD 样式 font-style: obliqu...

css样式常用整理

最近在写公司网站,把常用的给整理了下。 1.字体样式: font-family:"字体样式"; font-size:"字体大小"; color:字体颜色; font-weight:b...

css样式属性

  • 2013-04-23 17:25
  • 130KB
  • 下载

css样式表基本属性1

html中关于css的简介及相应的方法

css样式表手册属性列表

  • 2009-05-01 13:47
  • 553KB
  • 下载

CSS样式属性

CSS样式属性 1、字体属性(type) font-family(使用什么字体) font-style(字体的样式,是否斜体):normal/italic/oblique font-v...

第5天(就业班) BOM、window对象、事件、location对象、screen对象、Dom编程根据属性找节点、通过关系找节点、添加附件、联动框、操作元素的css样式、正则表达式

1.BOM编程 BOM全称 Browser Object Model,浏览器对象模型。 JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)