The z-index property specifies the stack order of an element. An element wit h greater stack order is always in front of an element with a lower stack order. It can be used to bring any element to front or to sent it to back base on value s comp-are to other elements. z-index 属性指定元素的堆栈顺序。堆栈顺序较高的元素始终位于堆栈顺序较低的元素前面。它可用于将任何元素置于最前面，或根据其他元素的值 s comp-are 将其置于后面。
Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements). 注意：z-index 仅适用于定位元素（position： absolute、position： relative、position： fixed 或 position： sticky）和 flex 项（作为 display：flex 元素的直接子元素的元素）。
Note: If two positioned elements overlap without a z-index specified, the element positioned last in the HTML code will be shown on top. 注： 如果两个定位的元素重叠而未指定 z-index，则 HTML 代码中位于最后的元素将显示在顶部。
2. Inline/Block Elements 2. 内联/块元素
Block elements are used to structure the main content of a webpage. They typically start on a new line and take up the full width of their container examples <div>, <p>, <h1> to <h6>, and <ul>, etc. Inline elements are used within block-level elements to style or format specific parts of the content. They don’t start on a new line and only ta ke up as much width as necessary for example include <span>, <a>, <strong>, and <em>. 块元素用于构建网页的主要内容。它们通常从新行开始，并占据其容器示例的整个宽度 <div>， <p>， <h1> to <h6> 和 <ul>， 等。内联元素在块级元素中用于设置内容特定部分的样式或格式。它们不会从新行开始，只根据需要增加尽可能多的宽度，例如 include <span>、 <a>、 <strong> 和 <em>。
3. Position: Fixed 3. 位置：固定
Use fixed positioning to cause an element to be removed from normal flow and to remain stationary, or “fixed in place,” when the web page is scrolled in the browser viewport. 使用固定定位可使元素从正常流中删除并保持静止，或在浏览器视区中滚动网页时保持“固定到位”。
The element is removed from the normal document flow, and no space is created for the element in the page layout. The element is positioned relative to its initial containing block, which is the viewport in the case of visual media. Its final position is determined by the values of top, right, bottom, and left. 该元素将从正常文档流中删除，并且不会在页面布局中为该元素创建任何空间。元素相对于其初始包含块进行定位，该块是视觉媒体中的视区。其最终位置由 top、right、bottom 和 left 的值确定。
4. Float: Left; 4. 浮点数：左;
The Float CSS float property is commonly utilized for arranging elements on a webpage. For instance, it can be used to position an image to one side while allowing text to flow around it seamlessly. Float CSS float 属性通常用于在网页上排列元素。例如，它可用于将图像定位到一侧，同时允许文本在其周围无缝流动。
none: the element does not float. This is the initial value. none：元素不浮动。这是初始值。
left: floats the element to the left of its container. left：将元素浮动到其容器的左侧。
right: floats the element to the right of its container. right：将元素浮动到其容器的右侧。
inline-start: the logical equivalent of left based on the writing-mode. inline-start：基于 writing-mode 的 left 的逻辑等价物。
inline-end: the logical equivalent of right based on the writing-mode. inline-end：基于 writing-mode 的 right 的逻辑等效项。
5. Display: None; 5. 显示：无;
The display property is used to specify how an element is shown on a web page. Ever y HTML element has a default display value, depending on what type of element it is. The default display value for most elements is block or inlin display 属性用于指定元素在 Web 页面上的显示方式。每个 HTML 元素都有一个默认的显示值，具体取决于它是什么类型的元素。大多数元素的默认显示值为 block 或 inlin
The display property is used to change the default display behavior of HTML elements. Display:none, means the element will not be visible. display 属性用于更改 HTML 元素的默认显示行为。Display：none 表示该元素将不可见。
6. EM VS REM 6. 电磁 VS REM
REM is based on the root element (HTML). Every child element that uses REM will t hen use the HTML root size as its calculation point, regardless of whether or not a pa rent element has any different sizes specified. REM 基于根元素 （HTML）。使用 REM 的每个子元素都将使用 HTML 根大小作为其计算点，而不管 pa rent 元素是否指定了任何不同的大小。
em: EM on the other hand, is based on the font size of the parent element. If a paren t element has a different size than the root element, the EM calculation will be based off of the parent element, and not the root element. This means that nested elements that use EM for sizing can sometimes end up being a size that you didn’t anticipate. em：另一方面，EM 基于父元素的字体大小。如果 paren t 元素的大小与根元素的大小不同，则 EM 计算将基于父元素，而不是根元素。这意味着使用 EM 进行大小的嵌套元素有时最终可能会成为您没有预料到的大小。
You can give any element “rounded corners” by applying a border-radius through CS SS. You’ll only notice if there is a color change involved. For instance, if the element hh as a background-color or border that is different than the border will be visible, if ele ment color and color are same border will not be visible. 您可以通过 CS 应用 border-radius 来为任何元素提供 “圆角 SS ” 。您只会注意到是否涉及颜色变化。例如，如果作为与边框不同的背景色或边框的元素 hh 将可见，如果元素颜色和颜色相同，则边框将不可见。
/* 1 Values */
border-radius: 10px; /* All sides same. i.e. 10px */
/* 2 Values*/
border-radius: 5 15px; /* top and left 5px, bottom and right 15px.*/
border-radius: 8p xx10 p xx12 p xx14 p xx8 p \times 10 p \times 12 p \times 14 p \times; border-radius： 8p xx10 p xx12 p xx14 p xx8 p \times 10 p \times 12 p \times 14 p \times ;
/* top-left top-right bottom-right. bottom-left */ /* 左上角 右上角 右下角。左下角 */
8. Width: fit-content; 8. 宽度：fit-content;
The fit-content keyword is equivalent to fit-content(stretch). In practice, this means that the box will use the available space, but never more than max-content. fit-content 关键字等效于 fit-content（stretch）。实际上，这意味着 Box 将使用可用空间，但绝不会超过 max-content。
The fit-content size is calculated using the following equation, where <available-space> is the size of its parent or grid track in grid layout: fit-content 大小使用以下公式计算，其中 <available-space> 是网格布局中其父轨道或网格轨道的大小：
When used as laid out box size for width, height, min-width, min-height, max-width and max-height the maximum and minimum sizes refer to the content size. 当用作 width、height、min-width、min-height、max-width 和 max-height 的布局框大小时，最大和最小大小是指内容大小。
9. Radial-Gradient 9. 径向梯度
The radial-gradient() CSS function creates an image consisting of a progressive transition between two or more colors that radiate from an origin. Its shape may be a circle or an ellipse. The function’s result is an object of the <gradient> data type, which is a special kind of <image>. radial-gradient（） CSS 函数创建一个图像，该图像由从原点辐射的两种或多种颜色之间的渐进过渡组成。它的形状可以是圆形或椭圆形。该函数的结果是<gradient>数据类型的对象，这是一种特殊的 <image>.
/* A gradient with a single color of red */
radial-gradient(red)
/* A gradient at the center of its container,
starting red, changing to blue, and finishing green */
radial-gradient(circle at center, red 0, blue, green 100%)
/* hsl color space with longer hue interpolation */
radial-gradient(circle at center in hsl longer hue, red 0, blue, green 100%)
A radial gradient is specified by indicating the center of the gradient (where the 0% ellipse will be) and the size and shape of the ending shape (the 100%100 \% ellipse). 通过指示渐变的中心（0% 椭圆所在的位置）和结束形状（ 100%100 \% 椭圆）的大小和形状来指定径向渐变。