【学习笔记】css知识查漏补缺

1、resize

CSS 属性 resize 用于设置元素是否可调整尺寸，以及可调整的方向。

注意

a，该属性为非继承属性
b，不适用元素：内联元素、overflow 属性设置为 visible 的块元素

为何overflow：visible不适合？

当overflow: visible时，元素的内容将不受限于该元素的边界，而是会继续延伸到父容器之外。而resize属性是用来控制用户是否可以通过拖动元素的边框来改变元素的大小的。因此，当元素内容溢出到父容器之外时，用户无法通过调整元素的大小来控制其内容的显示，因为内容已经溢出了容器。为了使resize属性能够正常工作，你需要确保元素的内容不会溢出到父容器之外。

扩展

简写属性：是可以让你同时设置好几个 CSS 属性值的 CSS 属性

例如：下面代码中background则为简写属性

p {
  background-color: red;
  background: url(images/bg.gif) no-repeat left top;
}

简写属性中如过没有设置就保持默认值，如上面代码中，background未设置color，默认为translate，会覆盖background-color中的属性值。

简写属性枚举：
background

background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;

border

border-width: 1px;
border-style: solid;
border-color: #000;

font

font-style: italic;
font-weight: bold;
font-size: 0.8em;
line-height: 1.2;
font-family: Arial, sans-serif;

margin，padding

margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;

CSS 提供了一个通用的简写属性 all，它可以应用于文档里所有的属性。它的目的是改变属性的继承模型。

2，inherit

inherit 关键字使得元素获取其父元素的计算值。它可以应用于任何 CSS 属性，包括 CSS 简写 all。
对于继承属性，inherit 关键字只是增强了属性的默认行为，通常只在覆盖原有的值的时候使用。
继承始终来自文档树中的父元素，即使父元素不是包含块。设置该属性会使子元素属性和父元素相同。实际上，就是“开启继承”

blockquote {
  background-color: red;
  border: 2px solid blue;
}

.fix-this {
  all: revert-layer;
background-color: orange;
}

<blockquote>
  <p>This blockquote is styled</p>
</blockquote>

<blockquote class="fix-this">
  <p>This blockquote is not styled</p>
</blockquote>

all为简写属性，重设所有属性值，继承属性（inherit、initial、unset 或 revert）除unset外，其他设置brackground-color都可生效。

@starting-style

设置动效可以通过 transition 和 animation
但transition比animation从实现和语法上都更简单些

transition属性允许您定义在元素状态发生改变时，如何过渡到新状态的效果。
过渡通常是从一个状态到另一个状态的平滑过渡，比如改变颜色、大小、位置等。 可以通过指定过渡的持续时间、缓动函数以及延迟来控制过渡效果。
过渡通常是基于元素的当前状态和最终状态之间的差异来生成动画效果

animation属性允许您创建更复杂的动画效果，可以定义多个关键帧和动画属性。
动画可以在一段时间内多次重复播放，并且可以定义更复杂的动作序列。
您可以使用@keyframes规则定义动画中的关键帧，以控制动画的每个阶段。 动画可以具有更多的灵活性，允许您定义更复杂和多样化的动画效果
是一个用于定义元素初始属性值的CSS规则，用于在元素首次接收样式更新时进行过渡。换句话说，当元素首次显示在之前加载的页面上时，它用于定义元素在首次样式更新时的初始属性值。
这个规则通常用于实现元素的过渡效果，以便在元素首次显示时从一个初始状态过渡到最终状态。通过使用"@starting-style"，您可以为元素设置初始属性值，以便在首次样式更新时进行过渡。

但transition在元素初始状态样式更新的时候默认不会触发，或display属性总none变为其他时，transition设置的动效不生效，这种情况下可以使用@starting-style实现初始样式状态变化时触发transition。查看更多案例

transition-behavior: allow-discrete;

当display从block变为none，需要设置该属性值，否则将无动效。