overflow:

  • hidden;超出区域的部分剪切掉
  • auto:有超出的部分在超出的那个方向产生滚动条
  • scroll：不管有没有溢出都会产生一个滚动条
    处理某个方向的溢出：
  • overflow-x水平
  • overflow-y垂直

text-overflow

用来处理文本的溢出，两个取值：

  • clip:超出部分剪切
  • ellipsis表示超出的部分以省略号显示

要想使用单行文本的溢出，必须拥有以下几个属性：

  1.   white-space:nowrap;让文本不换行显示
  2.   overflow:hidden;溢出隐藏
  3.   text-overflow:ellipsis/clip;超出的文本以省略号显示

多行文本的溢出：

  1.   overflow:hidden;溢出隐藏
  2.   text-overflow:ellipsis;超出的文本以省略号显示
  3.   display: -webkit-box;定义弹性盒子
  4.   -webkit-box-orient:vertical;定义弹性盒子里面子元素的排列方式
  5.   -webkit-line-clamp: 3;定义第几行

css3换行

  1. word-wrap:break-word定义长单词是否允许换行,在边界及‘-’’/‘ 处都换行
  2. word-break:定义长单词如何换行
  • word-break: keep-all; / 只在’-‘ 处换行 /
  • word-break: break-all; /在边界处换行/

css3多列

  • column-count：列数(瀑布流)
  • column-gap：每列之间的距离
  • column-rule：每列之间添加一个边框，语法和border一样

2d变形与动画

transform：变形，定义2d属性值

translate移动

  • 两个取值：translate(x,y)
  • 相对于原本所在的位置进行移动，跟position：relative相似
  • 正值代表右下方向，负值代表左上方向
  • 取值为百分比的时候，水平/垂直移动的距离为宽度/高度的百分比
  • 只想改变某一方向的移动距离，可以使用translateX(),translateY()

块元素水平垂直居中的方式

  1. margin:0 auto;使用margin计算所得
  1. width：100px;
  2. height:200px;
  3. position: absolute;
  4. top: 50%;
  5. left: 50%;
  6. margin-left: -宽度的一半;
  7. margin-top: -高度的一半;
    1. width：100px;
    2. height:200px;
    3. position: absolute;
    4. left: 0;p
    5. top: 0;
    6. bottom: 0;
    7. right: 0;
    8. margin:auto;
  1. width：100px;
  2. height:200px;
  3. position: absolute;
  4. top: 50%;
  5. left: 50%;
  6. transform:translate(-50%,-50%)

rotate()定义旋转属性

  • 取值：角度
  • 单位：deg
  • 方向：正值为顺时针，负值为逆时针
  • 旋转中心：默认元素正中心
  • 注意：旋转时元素内容会跟着旋转

transform-origin:设置变换中心

变换中心取值：

  • 固定单位：表示元素中的某一个位置，从左上角开始（两个值）
  • 百分比：对元素宽高的百分比（两个值）
  • 关键字

scale(x,y)表示元素的缩放

  • x，y分别代表宽高的缩放倍数，可以取小数点
  • 假如只有一个值，宽高同时进行缩放
  • 当scale里面为负值时负号把元素进行x轴y轴的翻转，后面的值跟正值时表示的效果一样
  • 缩放中心：元素正中心
  • 要想只是改变某个方向的缩放，可以使用scaleX(n)和scaleY(n)