resize

The resize CSS property sets whether an element is resizable, and if so, in which direction(s).

resize: both; 水平垂直都可以调整
resize: horizontal;水平调整
resize: vertical;垂直调整
resize: none;禁止调整

vertical-align

元素在一起就按照各自的vertical-align属性对齐
y一定一定要记住两个内联元素如果其中一个内部有文字的话是根据文字的位置对齐的

image.png

两个元素都设置了 vertical-align: middle;

image.png

第一个元素都设置了 vertical-align: middle;第二个未设置

image.png

第三个都没有设置vertical-align 样式，即默认样式

world-break:break-all（全部打断） break-word(按单词打断)

意思文字可以换行，常用于英文单词过长进行换行

background忘却的属性 是真特么好用

  background-position:center center;
让背景图片居中
  background-size:cover;
让背景图片自适应，这个是真几把好用，一直困扰了好久

max-width

max-width: 400px;
最大宽度400px，低于400px自适应

当实现一个元素块时尽量不要固定死宽高

image.png

image.png

要让上图变成下图有两种办法
以前都是很傻逼的用注释的那种方法，真的很蠢，如果元素内文字增加就傻逼了，而且人家padding一行搞定的事，你要用四行，是不是很傻逼

以后遇到这种要设置垂直居中的问题，统一用padding，谁用谁知道，真的好用

 padding: 4px 17px
  /* width:74px;
  height:30px;
  line-height: 30px;
  text-align: center; */

css画三角形

image.png

需要那种角度的三角形就把对应边框的颜色设为transparent

.triangle{
  width:0;
  border-left:100px solid #000;
  border-top:100px solid green;
  border-bottom:100px solid yellow;
  border-right:100px solid red;
}

动画效果一直不停转动

首先先要定义动画@keyframes动画是一个状态
from 到 to
 

    @keyframes rotation{
      from{
        transform: rotate(0deg)
        起始位置是旋转0度的位置
      }
      to{
        transform: rotate(360deg)
        结束位置旋转360度的位置
      }
    }

然后再对应元素里使用animation动画
#yin-yang {
  width:96px;
  height:48px;
  border-width: 2px 2px 50px 2px;
  border-style:solid;
  border-radius:100%; 
  border-color:red;
  background: #eee;
  position: relative;
  animation: rotation 2s linear infinite;
rotation调用之前定义的动画 在2s内执行完毕 按照线性运动的方式 无限运动
}

所以说这边要来看看transform 和 animation了

transform 变形

transform

CSS transform 属性允许你修改CSS视觉格式模型的坐标空间。使用它，元素可以被转换（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）。

transform>translate

主要老记混的是translate 转换 在XYZ轴上进行偏移

animation 动画

CSS animation属性是如下属性的一个简写属性形式: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction 和 animation-fill-mode.

分别是动画名称，动画周期， 动画执行的方式（主要ease或者liner），动画延迟 ，动画循环次数，动画是否反向播放，动画执行之前和之后如何给动画的目标应用样式（要么不变none要么保持最后一帧的样式forwards）。
执行动画前必须先要利用transform定义动画
@keyframes slidein {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}