css常用属性

css常用属性

1.定位
static：常规默认值
relative：相对定位，参照自身文档流中的位置进行偏移。
absolute：绝对定位，参照离自身最近的定位祖先元素进行定位，脱离了文档流。
fixed：参照视图窗口定位
2.布局
display改变元素的显示方式，具体值为：

• none隐藏对象
  inline内联元素
  block块元素
  inline-block内联块元素
  run-in根据上下文决定是内联还是块级元素
  flex弹性伸缩盒
  inline-flex内联块级弹性伸缩盒

float浮动，具体值为：

• left左浮动
  right右浮动

clear清除浮动，具体值为：

• left清除左浮动
• right清除右浮动
• both清除所有的浮动

visiblity是否显示，具体值为：

• visible 设置对象可视
• hidden 设置对象隐藏

overflow内容溢出，具体值为：

• hidden 隐藏溢出的内容
• scroll 隐藏溢出的内容，溢出的内容以滚动条的方式呈现
• auto 当内容没有溢出的时候不出现滚动条，当内容溢出的时候出现滚动条

3.尺寸
width：宽度
min-width：最小宽度
max-width：最大宽度
height：高度
min-height最小高度
max-height最大高度

4.外边距
margin：可写4、3、2、1这几个值，4个值代表距上，右，下，左；3个值代表距上，左右，下；2个值代表上下，左右；1个值代表上右下左都是一样的大小。
margin-top：距离上边距离
margin-right：距离右边距离
margin-bottom：距离底部距离
margin-left：距离左边距离

5.内边距
padding：与margin一样就不说了
padding-top：距离上边距离
padding-right：距离右边距离
padding-bottom：距离底部距离
padding-left：距离左边距离

6.边框
border：可以将一些值放在一起
例：border: 1px solid red;
border-width：边框宽度
border-style：设置边框样式
border-radius：边框圆角化
box-shadow：设置阴影
border-image：边框图片

7.背景
bakground：背景
background-color：背景颜色
bakground-image：背景图片
background-repeat：是否平铺
bakground-attachment：背景是否跟随内容一起滚动
background-position：设置背景图像在布局中的位置
bakground-size：背景图片的大小

8.颜色透明度
color
opacity

9.字体
font
font-weight：文字粗细
font-size：文字大小
font-family：文字字体

10.文本
text-transform：设置文本的大小写
white-space：设置空格的处理方式
word-wrap/overflow-wrap：设置超过指定容器的边界的时候是否换行
text-align：文字对齐方式
text-align-last：强制打断的行或者最后一行的对齐方式
word-spacing：单词之间的间距
letter-spacing：字符之间的间距
vertical-align：设置内联元素的垂直对齐方式
line-height：设置行高

11.文本装饰
text-decoration：文本装饰
text-decoration-line：设置文本装饰线的位置
text-decoration：设置文本装饰线的颜色
text-decoration：设置文本装饰线的样式
text-decoration-skip
text-underline-position
text-shadow：文字阴影

12.列表
list-style：列表样式
list-style-type：列表项目的标记
list-style-position：标记的位置
list-style-image：标记的图像

13.用户界面
text-overflow
zoom：设置缩放比例
box-sizing：设置盒模型的组成方式

14.转换
transform：
translate：平移效果
scale：放大或者缩小
rotate：旋转
skew：倾斜
transform-origin：以某个原点进行转化
perspective：设置观察者的位置
perspective-origin：改变观察者的基准点
transform-style：设置转化的3D效果

15.过渡
transition：
transition-property：过渡属性
transition-duration：过渡时间
transition-timing-function：过渡的效果
transition-delay：延迟过渡

16.动画
Animation：@keyframes创建动画
animation-name：调用动画名称
animation-duration：动画的时间
animation-timing-function：动画的效果
animation-delay：动画的延迟
animation-iteration-count：动画的次数
animation-direction：动画缓动的方向
animation-play-state：停止动画
animation-fill-mode：动画时间之外的状态

17.媒体查询
@media 设备名 only (选取条件) not （选取条件）and （设备选取条件），设备二{sRules}