css常用属性

css常用属性

文本类属性

• font-size 设置字体大小
• font-family 设置字体
• font-weight:bold 设置字体宽度（加粗）
• font-style 设置设置字体样式
• color 设置字体颜色
• text-align:center/right/left 设置文本水平对其方式 居中对齐/右对齐/左对齐
• line-height 设置行高
• text-indent 设置文本首行缩进
• text-decoration:underline/line-through/overline 设置文本修饰 下划线/中划线/上划线
  -margin: 0 auto 块标签居中

盒子模型的一些属性

• width/height 设置盒子的宽/高
• border:1px solid black 设置盒子的边框:边框宽度 线型 颜色
• border-radius:25px 设置边框圆角
• padding:10px 设置盒子的内边距(上下左右四个方向)
• margin:10px 设置盒子的外边距(上下左右四个方向)
• padding：即内边距，围绕着内容（比如段落）的空间。
• border：即边框，紧接着内边距的线。
• margin：即外边距，围绕元素外部的空间。

定位属性

• position:relative/absolute/fixed/static 设置定位方式为相对/绝对/固定/静态定位
• left/right/top/bottom 设置盒子的位置

布局属性

• display:flex 设置布局方式为浮动布局
• flex-direction:column/column-reverse/row/row-reverse 设置浮动布局的方向从上到下/从下到上/从左到右/从右到左
• flex-wrap:wrap/nowrap 设置浮动布局是否折行（默认不折行）
• justify-content:space-around/space-between 设置弹性布局方式（每个元素之间等间距，两边无间距/每个元素之间等间距，两边

等间距）

• float:left/right 设置浮动布局 左浮动/右浮动

其他常用属性

• background-color 设置背景颜色
• background-image:url() 设置背景图片
• background-position 设置背景位置
• background-size 设置背景尺寸
  -background-position: center,center;将图片的中心设置到容器的中心
• background-repeat: no-repeat 设置背景图片不平铺（重复）
• overflow:hidden 设置文本溢出部分隐藏
• white-space:wrap/nowrap 设置文本是否折行（默认折行）
• text-overflow:ellipsis 设置文本隐藏部分为省略号

动画常用属性

• 平移函数：translateX、translateY、translateZ、translate、translate3d
• 平移函数：translateX、translateY、translateZ、translate、translate3d
• 缩放函数：scaleX、scaleY、scaleZ、scale、scale3d( number, number, number )
• 旋转函数：rotateX、rotateY、rotateZ、rotate、rotate3d( number, number, number, angle)
• 倾斜函数：skewX、skewY、skew
• 视域：perspective( length )3
• 重要属性：transform-origin、transform-style、backface-visibility
• animation-name：指定动画的名称
• animation-duration：定义动画的时长（ms | s）
• animation-iteration-count：声明动画的迭代次数（number | infinite）
• animation-direction：设置动画播放的方向（normal | reverse | alternate | alternate-reverse）
• animation-delay：延迟播放动画
• animation-timing-function：改变动画的内部时序
• animation-play-state：设置动画的播放状态（running | paused）
• animation-fill-mode：动画的填充模式，也就是动画结束之后的状态（normal | forwards | backwards | both），最终的显示效果与 animation-direction 属性有关