css常用属性字典

width宽度
height 高度
line-height （行高）

calc 一般用来计算宽度 width: calc(100% - 100px)

overflow overflow 属性规定当内容溢出元素框时发生的事情

  visible：默认值。内容不会被修剪，会呈现在元素框之外。
  hidden：内容会被修剪，并且其余内容是不可见的。常用
  scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
  auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
  inherit：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

display 指定在页面上使用哪种盒模型来渲染指定的元素

none：元素完全从页面中移除。它的所有后代元素同样被移除。文档渲染的过程中就好像在文档树中这个元素不存在一样。
inline：显示为内联元素。
inline-block：显示为块级内联元素。它可以设置元素的宽度和高度，其它的行为和内联元素相同。
block：显示为块级元素。
list-item：该元素生成一个块级容器和单独的内联列表元素。
inline-table, table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption：这些值会将元素显示为表格。inline-table不是一个在HTML中直接映射的元素，它的行为和HTML <table>元素相同，但是它是一个内联元素，而不是一个块级元素。
flex：元素显示为块级元素，它的内容根据Flexbox模式来进行布局。
inline-flex：元素显示为内联元素，它的内容根据Flexbox模式来进行布局。
grid：元素显示为块级元素，它的内容根据Grid模式来进行布局。
inline-grid：元素显示为内联元素，它的内容根据Grid模式来进行布局。

float 浮动

left: 元素向左浮动
right: 元素向右浮动
none:  默认值。元素不浮动，并会显示在其在文本中出现的位置

position 定位

static:  默认值。没有定位
absolute:  绝对定位。相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative:   相对定位。对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
fixed:   相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

使用场景：
1、让父级元素relative,让子级元素absolute
2、在做移动端header和footer时用fixed定位

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

padding 内边距
margin 外边距
border 边框
border-radius 圆角
box-shadow 阴影
box-sizing

border-box:  忽略border和padding，常用
content-box:  在宽度和高度之外绘制元素的内边距和边框

color 文字颜色
background 背景

background: url(image) x y 是否重复（repeat重复   no-repeat不重复）
background-image:  可用来做背景图片或渐变色
background-color：  背景色
background-position： 指定背景图像位置
background-size：   指定背景图片大小     
background-repeat：指定背景图像是否重复
background-origin：指定背景图像的定位区域

opacity 指定元素透明级别。1为不透明，0为透明
z-index 指定元素层级级别。
z-index失效情况

text-align 文本对其情况

center：居中
left：默认值，左对齐
right：右对齐

vertical-align 垂直对其
text-decoration 文本是否有下划线修饰

none：没有
underline：有一条下划线

list-style 列表项目标记 none设置没有

filter 滤镜

filter: blur(5px);                            模糊度
filter: brightness(0.4);                      亮度
filter: contrast(200%);                       对比度
filter: drop-shadow(16px 16px 20px blue);     阴影
filter: grayscale(50%);                       灰度
filter: hue-rotate(90deg);                    色相旋转
filter: invert(75%);                          反色
filter: opacity(25%);                         透明度
filter: saturate(30%);                        饱和度
filter: sepia(60%);                           褐色程度

:before 伪元素，在元素之前
:after 伪元素，在元素之后