总结css常用页面属性

    外边距
    margin: 上 右 下 左;

    内边距
    padding: 上 右 下 左;

    文字左右间距
    letter-spacing: 1px;

    文字上下行高
    line-height: normal;
    
    文本对齐方式 center居中对齐 end靠右对齐
    text-align: center end;

    上划线overline 删除线line-through 下划线underline
    text-decoration: overline line-through underline;
    
    文本溢出截取掉clip 文本溢出省略号ellipsis
    text-overflow: clip ellipsis;

    文本阴影
    text-shadow: x y red;

    文本段落缩进
    text-indent: 2rem;

    文本镜像翻转
    unicode-range: rtl;

    字体样式 为宋体黑体之类的
    font-family: '';

    字体加粗100-900
    font-weight: normal;

    字体样式 italic斜体 oblique斜体
    font-style: normal italic oblique;

    字体大小
    font-size: px;

    浮动脱离文档流但层级比定位低 left左浮动 right右浮动
    float: left right;

    清除浮动 both全部清除 left左 right右 none默认值,不清楚浮动,注意,用完浮动记得及时清理掉,不然如果一个容器里面所有元素全部浮动,会导致容器的整个高度丢失(高度塌陷)
    clear: both left right none;

    定位 relative相对定位(绝对定位的参照物) absolute绝对定位(脱流) fixed(固定定位,相当于浏览器窗口定位)注意:一遍不建议使用定位,脱离文档流,节点不可控
    position: relative absolute fixed;

    定位后元素的层级,越高越在上显示
    z-index: 1-999;

    盒子显示
    display: block;

    盒子隐藏,消失,节点不存在
    display: none;

    盒子以表格进行布局常用与配合伪类::before防止外边距击穿
    display: table;

    将盒子以-webkit-box布局  从这到display:inline;为设置页面扩展性可用
    display: -webkit-box;

    超出部分省略号显示
    text-overflow: ellipsis;

    文本最大显示行数
    -webkit-line-clamp: 显示行数;

    从上到下垂直排列
    -webkit-box-orient: vertical;

    文本强制一行显示
    white-space: nowrap;

    将盒子设置为行内元素
    display: inline;

    将盒子变为行内块元素可数字大小独占一行
    display: inline-block;

    scroll超出部分左右滚动条  auto超出部分上下滚动条 hidden超出部分隐藏
    overflow: hidden scroll auto;
    /* 设置为弹性盒子布局 */
    display: flex;

    容器主轴排列样式   space-between两端对齐等份排列 space-around项目水平间间距为两端两倍 space-evenly项目水平间间距与两端间距相等 flex-end center居中排列
    justify-content: space-between space-around space-evenly flex-end center;

    容器属性交叉轴排列 center上下居中 flex-end靠下排列
    align-items: center flex-end;

    弹性盒子容器属性 column旋转轴线,可简单认为就是上下排列,注意,不标准解释,只为方便理解
    flex-direction: column;

    弹性盒子容器属性 nowrap默认,不允许换行显示项目宽度大于容器会等比压缩 wrap允许换行显示
    flex-wrap: nowrap wrap;

    弹性盒子项目属性项目所占容器空余部分的等分量
    flex-grow: 1 2 3;
    
    弹性盒子项目属性是否允许被拉伸 0为不允许 1为允许
    flex-shrink: 0/1;

    弹性盒子项目属性,类似于宽,但比宽权重高
    flex-basis: 0vh;

    弹性盒子项目属性数字越大越靠前排列
    order: 1 2 3 4;

    文本位置设置  center居中  flex-end靠右 ie10以上支持
    align-self: center flex-end;

    节点透明度0为透明1为不透明取值范围0-1  inherit从父级继承
    opacity: 0-1 inherit;

    背景颜色
    background-color: indianred;

    背景图片url() 线性渐变linear-gradient(to bottom left,red,yellow...) 径向渐变圈形radial-gradient(circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。,red 30%, yellow 30%,green 40%)
    background-image: url() linear-gradient(to bottom left,red,yellow) radial-gradient(circle/ellipse,red 30%, yellow 30%,green 40%);

    背景图移动设置
    background-position: x y;

    背景图大小设置
    background-size: px;

    padding-box背景不占边框  背景不占内边距或只占内容大小content-box
    background-clip: padding-box content-box;

    背景图重复设置样式 repeat-x水平重复 repeat-y垂直重复 no-repeat不重复
    background-repeat: repeat-x repeat-y no-repeat;

    变换样式 rotate(deg)旋转 translate(x,y)位移 scale(x,y)缩放 skew(x,y)扭曲
    transform: rotate(deg) translate(x,y) scale(x,y) skew(x,y);

    改变变化点 top left 为左上方也可以百分比具体控制
    transform-origin: 0% 0%/top left;

    2d效果flat 3d效果preserve-3d
    transform-style: flat preserve-3d;

    景深
    perspective: 1000px;

    触发式动画耗时时间 (触发式动画:一般通过伪类:hover形式触发  主动式动画:页面加载完毕即触发)
    transition-duration: 3s;

    触发式动画延时触发
    transition-delay: 1s;

    触发式动画样式属性 all全部
    transition-property: all 自定义;

    触发式动画函数
    transition-timing-function: linear;

    触发式动画附和写法
    transition: property duration function;

    动画名字 与下方主动式动画呼应
    animation-name: ljx;
    
    动画第一帧到最后一帧时常
    animation-duration: 3s;

    动画播放函数 linear匀速
    animation-timing-function: linear;

    动画延时多久播放
    animation-delay: 1s;

    动画播放次数  infinite无限播放
    animation-iteration-count: infinite;

    动画播放模式  正向播放动画normal/reverse逆向播放动画
    animation-direction: normal/reverse;

    盒子模型 border-box怪异盒子模型边框内边距不影响盒子本身大小  content-box标准盒子模型
    box-sizing: border-box content-box;

    盒子阴影
    box-shadow: x y 扩散 缩小 rgb;

  }
  主动式动画
  @keyframes ljx{
      0%{}
      100%{}
    }

    媒体查询/响应式 最大宽设置需要按照降序排列最小宽应该按照升序排列,原理为后写覆盖掉先写
  @media screen and (max-width/min-width){
  }