前端随手记

JS

CSS

display

定义元素的显示方式

属性	显示方式
inline	元素被显示为内联元素，与相邻元素在同一行内显示。宽度和高度属性不起作用，margin和padding属性只能设置左右方向的值。常见的内联元素有span、a、img等
block	元素被显示为块级元素，独占一行。宽度和高度属性可以设置，margin和padding属性可以设置四个方向的值。常见的块级元素有div、p、h1等
inline-block	元素被显示为内联块级元素，与相邻元素在同一行内显示。宽度和高度属性可以设置，margin和padding属性可以设置四个方向的值。常见的内联块级元素有button、input等。
none	元素不显示，即隐藏元素。元素在页面上不占据任何空间，也不响应交互事件。
flex	使用弹性布局方式显示元素，可以进行灵活的布局。它使得元素能够根据可用空间自动调整大小和位置。通常与flex-direction、flex-wrap等属性一起使用。
grid	使用网格布局方式显示元素，将元素放置在一个二维的网格中。网格布局提供了更精确的布局控制，可以定义行和列的大小、间距等。通常与grid-template-columns、grid-template-rows等属性一起使用。
table	元素被显示为表格，类似于HTML中的table元素。元素会被解析为一个表格对象，内部可以包含表头（thead）、表体（tbody）和表尾（tfoot）等子元素。
inline-table	元素被显示为内联表格，与相邻元素在同一行内显示。类似于table属性，但是以内联元素的方式显示。
list-item	元素被显示为列表项，类似于HTML中的li元素。适用于无序列表（ul）和有序列表（ol）中的子项。
inherit	继承父元素的display属性值。如果没有父元素，则被视为block。

transform

元素的移动，放大。可以搭配transform-origin属性修改原点

属性	显示方式
translate(x,y)	水平移动 + 垂直移动，x(y)正数表示向右(下)移动，x(y)负数表示像左(上)移动 ,单位可以是px，或者百分比等
translate(x,y,z)	水平移动 + 垂直移动 + 放大
translateX(x)	水平移动
translateY(y)	垂直移动
translateZ(z)	放大
rotate(angle)	2d旋转,单位deg(度数)，turn(圈数，1圈=360度)，rad（弧度）
rotateX(angle)	以X轴为中心旋转
rotateY(angle)	以Y轴为中心旋转
rotateZ(angle)	以Z轴为中心旋转
rotate3d(x,y,z,angle)	以Z轴为中心旋转
scale(s)	整体缩放倍数
scale(sx,sy)	水平缩放 + 垂直缩放
scaleX(sx)	水平缩放
scaleY(sy)	垂直缩放

transform-origin

修改transform的移动原点，单位px或者百分比等