1、css3盒子模型
box - sizing: content - box；
是 CSS 中用于定义盒模型宽度和高度计算方式的一个属性值。在这种盒模型下，元素的宽度和高度（width和height属性）仅包括内容区域（content）的大小，不包括内边距（padding）、边框（border）和外边距（margin）。
box - sizing: border - box；
是 CSS 中用于改变盒模型计算方式的属性值。在这种模式下，元素的宽度和高度（width和height属性）包括内容区域（content）、内边距（padding）和边框（border），但不包括外边距（margin）。
<style>div {height: 200px;width: 200px;border: 20px solid red;padding: 15px;box-sizing: content-box;}p {height: 200px;width: 200px;border: 20px solid red;padding: 35px;box-sizing: border-box;}</style>
<body><div>懒羊羊</div><p>喜羊羊</p></body>
2、css3过渡
定义：CSS3 过渡（Transitions）提供了一种在 CSS 属性值发生变化时，平滑地过渡效果的方式。它允许元素的一个或多个 CSS 属性在一定的时间内，从初始值渐变到最终值，从而创建出动画效果，而不需要使用 JavaScript 或复杂的 Flash 动画。
过渡的基本语法包括四个主要部分：要过渡的属性、过渡的持续时间、过渡的时间函数和过渡延迟。
property：指定要应用过渡效果的 CSS 属性，可以是单个属性（如width、height、color等），也可以是多个属性（用逗号分隔，如width, height），还可以使用all关键字来表示应用过渡效果到所有可过渡的属性。duration：过渡的持续时间，以秒（s）或毫秒（ms）为单位。例如，0.5s表示过渡将持续 0.5 秒。timing - function：过渡的时间函数，用于控制过渡的速度曲线。常见的有ease（默认值，慢 - 快 - 慢）、linear（匀速）、ease - in（慢 - 快）、ease - out（快 - 慢）、ease - in - out（慢 - 快 - 慢，比ease更对称）等，还可以使用cubic - bezier()函数自定义时间曲线。delay：过渡延迟，即属性开始过渡之前等待的时间，同样以秒（s）或毫秒（ms）为单位。例如，0.2s表示过渡将在 0.2 秒后开始。
<style>.bar {width: 150px;height: 15px;border: 1px solid red;border-radius: 7px;padding: 1px;}.bar_in {width: 50%;height: 100%;border-radius: 7px;background-color: red;transition: all 1s;}.bar:hover .bar_in {width: 100%;}</style>
<body><div class="bar"><div class="bar_in"></div></div></body>
