慕课首页

1. word-break属性：规定自动换行的处理方法。

   提示：通过使用 word-break 属性，可以让浏览器实现在任意位置的换行。

   语法

   word-break: normal|break-all|keep-all;
   

   值	描述
   normal	使用浏览器默认的换行规则。
   break-all	允许在单词内换行。
   keep-all	只能在半角空格或连字符处换行。

2. transtion　过渡动画

   语法：(所有时长单位都是秒)

   • 变化属性（transtion-proerty(属性名)）
   • 持续时长（transtion-duration(持续时长)）必填项，默认为０；
   • 变化曲线（transtion-timing-function）;
   • 延迟时长（transtion-delay）

   当失去触发时机的时候，还会动画返回原来的状态

   • transition-timing-function：变化速率

     1.ease(默认值):先快再快再慢

     2.ease-in:淡入(动画刚开始的时候变化慢)

     3,ease-out:淡出(动画快结束的时候变化慢)

     4.ease-in-out:淡入淡出

     5.linear:匀速变化

     6.cubic-bezier:贝塞尔曲线,所有的变化都可以用贝塞 尔曲线来代替 cubic-bezier(x1,y1,x2,y2),x1,y1,x2,y2值的范围都是0~1

   • 过渡动画没有自己的触发时机,只有以下几种,可以触发过渡动画:

   ​ 1.:hover(最常用)

   ​ 2.:focus

   ​ 3.:checked(多选输入框被勾选的状态)

   ​ 4.媒体查询(@media screen and(条件){样式})

   ​ 5.js

   • 举例：

     语法：transition : property duration timing-function delay;

     transition:该过渡属性名称 完成动画时间 速度效果曲线 何时开始 ;

     transition-delay :

     transition:1s height, 1s width; //都设置跟没有效果一样，单独设置有不一样的效果

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

   值	描述
   visible	默认值。内容不会被修剪，会呈现在元素框之外。
   hidden	内容会被修剪，并且其余内容是不可见的。
   scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
   auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
   inherit	规定应该从父元素继承 overflow 属性的值。

   如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。