首页 > 代码库 > CSS使用笔记

CSS使用笔记

2024-08-12 12:01:55   233人阅读

Position：static，relative，absolute，fixed。

Static：静态定位。如果你没有设置position属性，那么缺省就是static。top，left，bottom，right等属性，在static的情况下是无效的，要使用这些属性，必须把position设置为其他三个值之一。

Relative：相对定位。元素将按照静态定位时的位置进行调整，在静态定位中分配给元素的空间仍然会分配给它，它两边的元素不会向它靠近来填充那个空间，但它们也不会从元素的新位置被挤走。

Absolute：绝对定位。元素将按照包含它的元素的位置进行调整，比如它嵌套在另一个绝对定位的元素中，那么就相对于那个元素定位。

Fixed：固定定位。元素将被设置在浏览器上一个固定位置上，不会随其他元素滚动。形象点说，上下拉动滚动条的时候，fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。

 

Overflow:

属性规定当内容溢出元素框时发生的事情。

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。 

值描述
visible默认值。内容不会被修剪，会呈现在元素框之外。
hidden内容会被修剪，并且其余内容是不可见的。
scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit规定应该从父元素继承 overflow 属性的值。

Float:   

　　fload属性有四个可用的值：Left 和Right 分别浮动元素到各自的方向，None (默认的) 使元素不浮动，Inherit 将会从父级元素获取float值。

 

Transition:　　

　　transition 属性是一个简写属性，用于设置四个过渡属性：

  • transition-property :属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。
值描述
none没有属性会获得过渡效果。
all所有属性都将获得过渡效果。
property定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
  • transition-duration:属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。
  • transition-timing-function：属性规定过渡效果的速度曲线。
值描述
linear规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
  • transition-delay：属性规定过渡效果何时开始。值以秒或毫秒计。

Transform:

　　transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

值描述测试
none定义不进行转换。测试
matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵。测试
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换，使用 16 个值的 4x4 矩阵。 
translate(x,y)定义 2D 转换。测试
translate3d(x,y,z)定义 3D 转换。 
translateX(x)定义转换，只是用 X 轴的值。测试
translateY(y)定义转换，只是用 Y 轴的值。测试
translateZ(z)定义 3D 转换，只是用 Z 轴的值。 
scale(x,y)定义 2D 缩放转换。测试
scale3d(x,y,z)定义 3D 缩放转换。 
scaleX(x)通过设置 X 轴的值来定义缩放转换。测试
scaleY(y)通过设置 Y 轴的值来定义缩放转换。测试
scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。 
rotate(angle)定义 2D 旋转，在参数中规定角度。测试
rotate3d(x,y,z,angle)定义 3D 旋转。 
rotateX(angle)定义沿着 X 轴的 3D 旋转。测试
rotateY(angle)定义沿着 Y 轴的 3D 旋转。测试
rotateZ(angle)定义沿着 Z 轴的 3D 旋转。测试
skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。测试
skewX(angle)定义沿着 X 轴的 2D 倾斜转换。测试
skewY(angle)定义沿着 Y 轴的 2D 倾斜转换。测试
perspective(n)为 3D 转换元素定义透视视图。

CSS使用笔记


联系
我们