前端随手记
![](https://img.alon.wang/lsky/1/2024/05/20/664af2d7c7bc7.png)
前端随手记
AlonJS
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或者百分比等
评论
匿名评论隐私政策
✅ 你无需删除空行,直接评论以获取最佳展示效果