css常用简写总结

时间：2021-01-22 14:09:29

css的简写使代码精简，而且书写方便，常用的属性包括以下：

  • border
  • margin
  • padding
  • flex
  • flex-flow
  • border-radius
  • background
  • list-style
  • font
  • trasition
  • animation

border

示例：

border-width:1px;
border-style:solid;
border-color:#f00;

简写为：

border:1px solid #f00;

说明：border还可以单独设置top,right,bottom,left每条边的属性

margin

示例：

margin-top:1px;
margin-right:2px;
margin-bottom:3px;
margin-left:4px;

简写：

margin:1px 2px 3px 4px;

说明：设置外边距使按照上、右、下、左的顺序依次设置

padding

用法与margin一样，参照margin

flex

语法：none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]
flex-grow：拉伸因子
flex-shrink：收缩因子
flex-basis：指定flex item在主轴方向上的初始大小

示例：

flex-grow:1;
flex-shrink:0;
flex-basic:auto;

简写：

flex:1 0 auto;

说明：还有下面这种简写

flex:none等价于flex:0 0 auto
flex:auto等价于flex:1 1 auto
flex:1 等价于 flex:1 1 auto

flex-flow

语法：<’flex-direction’> || <’flex-wrap’>

简写：

flex-flow:row nowrap;
flex-flow:column nowrap;

border-radius

简写：

border-radius:5px;

background

语法： <’bg-image’> || <’position’> [ / <’bg-size’> ]? || <’repeat-style’> || <’attachment’> || <’bg-clip’> ||<’bg-origin’>||<’background-color’>

说明：
1. background-size需写在background-position后面且用“/”分开
2. background-clip默认为padding-box
3. background-origin默认为padding-box
4. css sprite就是利用background-position改变背景图片的位置

简写：background:url(./image/1.jpg) no-repeat center/cover

list-style

语法：<’list-style-type’> || <’list-style-position’> || <’list-style-image’>

示例：

list-style-type:disc;
list-style-image:url(1.jpg)
list-syle-position:outside

简写：list-style：didc outside url(1.jpg)

常用 list-style：none去掉 li 默认的原点

font

语法：[ <‘font-style’> || <’font-variant’> || <‘font-weight’> <‘font-size’> [ / <‘line-height’> ]? <‘font-family’> ]

说明：
1. font-size和font-family同时设置
2. line-height设置时写在font-size后，且要加‘/’分隔
3. 属性值的顺序并非完全*：如需设置 font-style, font-variant 和 font-weight 中任意一个或几个的值，它们必须要放在 font-size 值的前面
4. font-family 是必不可少的，且必须放在最后
5. 字体可设置多个，字体族名可以包含空格，但包含空格时应该用引号

简写：font：14px/28px Helvetica

transition

语法：<’transition-property’><’transition-duration’><’transition-timing-functio’><’ transition-delay’>

初始值：
transition-duration:0;
transition-timing-function:ease;
transition-delay:0;

animation

语法： <’single-animation-name’> || <’time’> || <’timing-function’> || <’time’> || <’single-animation-iteration-count’> || <’single-animation-direction’> || <’single-animation-fill-mode’> || <’single-animation-play-state’>
默认值：
animation-name: none
animation-duration: 0s
animation-timing-function: ease
animation-delay: 0s
animation-iteration-count: 1
animation-direction: normal
animation-fill-mode: none
animation-play-state: running

说明：

  1. animation-iteration-count：定义动画在结束前运行的次数 可以是1次 无限循环
    值:<’animation-iteration-count’>=infinite | <’number’>
  2. animation-direction：指示动画是否反向播放，它通常在简写属性animation中设定
    值：<’animation-direction’> = normal | reverse | alternate | alternate-reverse
  3. animation-fill-mode 这个 CSS 属性用来指定在动画执行之前和之后如何给动画的目标应用样式，
    值：<’animation-fill-mode’> = none | forwards | backwards | both
标签：

相关文章