CSS3

Posted 2021-04-09 冷秋夜无痕

: 点击上方“冷秋夜无痕”进入点击关注即可免费订阅！

CSS定位：

定位机制：

普通流：

元素按照其在html中的位置顺序决定排布的过程

浮动：

 

绝对布局：

 

定位属性：

Position:

把元素放在一个静态的，相对的，绝对的，或者是固定的位置中

Position属性：

Static：（静态）

Relative：（相对位置）

Absolute:（绝对布局）

Fixed：（浮动固定）

Top：元素向上的偏移量

Bottom：元素向下的偏移量

Left：元素向左的偏移量

Right：元素向右的偏移量

Overflow:设置元素溢出其区域发生的事情

Clip：设置元素显示的形状

Vertical-align：设置元素垂直对齐方式

Z-index：设置元素的堆叠顺序

 

 

 

CSS浮动：

浮动属性值：

Left：元素向左浮动

Right：元素向右浮动

None：元素不浮动

Inherit:从父级继承浮动属性

Clear：

去掉浮动属性；

Left： 清除左边浮动

Right：清除右边浮动

Both：左右两边同时清除

Inherit：清除父级继承浮动

 

 

 

 

CSS对齐：

Margin：进行水平对齐

Position：左右对齐

Float：左右对齐

 

尺寸操作：

Height：设置元素高度

Line-height：设置行高

Max-height：设置元素最大高度

Max-width：设置元素最大宽度

Min-width：最小宽度

Min-height：最小高度

Width：设置元素宽度

 

 

 

分类属性：

Clear：设置一个元素的侧面是否允许其他的浮动元素

Cursor：规定当指向某元素之上时显示的指针类型

Display：设置是否及如何显示元素

Float：定义元素在哪个方向浮动

Position：把元素放到一个静态的，相对的，绝对的，固定的位置

Visibility：设置元素是否可见或不可见

Auto：代表自适应

Opacity：透明度设置 值：0~1

 

 

2D 3D转换：

2D转换方法：

Translate():移动（两个参数XY值）

Rotate()旋转（一个值旋转角度）

Scale()缩放（两个参数 宽 高）

Skew()倾斜效果（x y两个值）

Matrix()矩阵

 

3D转换方法：

rotateX()

rotateY()

Transform：+属性

 

CSS过度：

Transition：设置四个过度属性。

Transition-property：过度的名称。

Transition-duration：过度效果花费时间

Transition-timing-function：过度效果的时间曲线

Transition-delay：过度效果开始时间，（往后延迟的时间量）

 

CSS3创建动画：

Animation：名称  时间  两个值

@keyframes{

%0();

25%();

50%();

}

 

 

 

多列布局：

Column-count：

Column-gap：

Column-rule：

 

javascript：

脚本引入

<script src=”路径”></script>

 

 

 

 

                                     

                                给我点个赞呗！！！