css3

overflow属性

  • hidden;超出区域的部分剪切掉
  • auto:有超出的部分在超出的那个方向产生滚动条
  • scroll：不管有没有溢出都会产生一个滚动条

处理某个方向的溢出：

  • overflow-x水平的溢出
  • overflow-y垂直方向的溢出
  1. text-overflow用来处理文本的溢出:
    取值：clip:超出部分剪切
    ellipsis表示超出的部分以省略号显示
  2. 要想使用单行文本的溢出，必须拥有以下几个属性：
  • white-space:nowrap;让文本不换行显示
  • overflow:hidden;溢出隐藏
  • text-overflow:ellipsis;超出的文本以省略号显示
  1. 多行文本的溢出：
  • overflow:hidden;溢出隐藏
  • text-overflow:ellipsis;超出的文本以省略号显示
  • display: -webkit-box;定义弹性盒子
  • -webkit-box-orient:vertical;定义弹性盒子里面子元素的排列方式（必须加私有前缀）
  • -webkit-line-clamp: 行数;定义第几行（必须加私有前缀）

长单词换行

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

分列布局

  1. 三个属性：
  • column-count：表示分栏的列数取值为数字
  • column-gap：每列之间的距离
  • column-rule：每列之间添加一个边框，语法和border一样

瀑布流布局

  1. column-count：列数；

2D属性

transform：变形

  1. transform：变形，定义2d属性值
    属性值：translate移动
    两个取值：translate(x,y)
  • x代表水平移动距离（固定值px或者百分比）
  • y代表垂直移动的距离（固定值px或者百分比）
  • 相对于原本所在的位置进行移动
  • 正值代表右下方向，负值代表左上方向
  • 取值为百分比的时候，第一个值代表水平方向移动的距离为宽度的百分比，第二个值代表垂直方向移动的距离为高度的百分比
  • 只想改变某一方向的移动距离，可以使用translateX(),translateY()

rotate()旋转

  1. transform：rotate()取值:角度； 单位：deg；
    方向：正值为顺时针，负值为逆时针
    旋转中心：默认元素的正中心
    注意：旋转时元素内容会跟着旋转
  2. tranform-origin： ;设置旋转中心
    取值：
    固定单位：表示元素中的某一个位置，从左上角开始。
    百分比：对元素宽高的百分比
    关键字：
    left top=0 0
    top=50% 0
    right top=100% 0
    right=100% 50%
    right bottom=100% 100%
    bottom=50% 100%
    left bottom=0 100%
    left=0 50%
    center=50% 50%

scale(x,y)元素的缩放

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

元素垂直居中方法：

  1. 绝对定位
    父元素相对定位position: relative
    子元素绝对定位position：absolute
    top：0；
    left：0；
    right：0；
    bottom：0；
    margin：auto;
  • 水平居中margin：0 auto；
  • 垂直居中margin-top：(父元素高-子元素高)/2
  1. 给父元素一个相对定位position: relative;
    给子元素一个绝对定位position: absolute;
    left：50%
    top：50%
    margin-top：-本身高/2
    margin-left：-本身宽/2
  2. 2d移动
    position：absolute
    top：50%；
    left:50%；
    taansform：translateY（-50% -50%）