CSS

选择器

:nth-child（）

p:nth-child(3) ：表示第3个p元素标签，而不是p的孩子元素的第三个

基础属性

transform（形状上的改变）

CSS transform 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。

注意： 只能转换由盒模型定位的元素。根据经验，如果元素具有display: block，则由盒模型定位元素。

属性值：

transform：matrix(1，2，3，4，5，6)
transform：translate（10px，%）
transform：scale（2，0.5）
transform: rotate(0.5turn)
transform: skew(30deg, 20deg)
transform: scale(0.5) translate(-100%, -100%)

transition（过渡效果）

过渡效果

transition：过渡简写属性。一个属性发生变化时的切换方式，用于为样式设置过渡效果（结合hover使用）

如 transition：height 3s； 如果高度height发生变化时，height 要花费3s时间变化，而不是一下子变化
transition：all 3s；hover里的所有变化都要花费3s去变化
该属性是设置在需要发生变化的那个元素的选择器中，不是在hover中
大部分属性都支持过渡效果（数值型的）

transition-property：要执行过渡的属性。多个属性间用逗号隔开，所有属性都需要过渡，则使用all。

transition-duration：执行过渡效果的持续时间

时间单位：s 和 ms

transition-timing-function：过渡的时序函数。实际上是一个贝塞尔曲线。

指定过渡动画的执行方式
可选值：
- ease：默认值。慢速开始，先加速再减速
- linear：迅速运动
- ease-in：加速运动
- ease-out：减速运动
- ease-in-out：先加速，再减速
- 通过cubic-bezier（0，0，0，0）来指定贝塞尔曲线
- 通过steps（步数，shart/end）分步执行过渡效果，中间会有停顿。end表示transition-duration时间后变化，start表示transition-duration时间前变化

transition-delay：过渡效果的延迟，等待一段时间后再执行过渡

布局属性

justify-content

用于描述弹性盒子容器的对齐方式，如何分配顺着弹性容器主轴 (或者网格行轴) 的元素之间及其周围的空间。

/* Positional alignment */
justify-content: center;     /* 居中排列 */
justify-content: start;      /* Pack items from the start */
justify-content: end;        /* Pack items from the end */
justify-content: flex-start; /* 从行首起始位置开始排列 */
justify-content: flex-end;   /* 从行尾位置开始排列 */
justify-content: left;       /* Pack items from the left */
justify-content: right;      /* Pack items from the right */

/* Baseline alignment */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;

/* Distributed alignment */
justify-content: space-between;  /* 均匀排列每个元素
                                   首个元素放置于起点，末尾元素放置于终点 */
justify-content: space-around;  /* 均匀排列每个元素
                                   每个元素周围分配相同的空间 */
justify-content: space-evenly;  /* 均匀排列每个元素
                                   每个元素之间的间隔相等 */
justify-content: stretch;       /* 均匀排列每个元素
                                   'auto'-sized 的元素会被拉伸以适应容器的大小 */

/* Overflow alignment */
justify-content: safe center;
justify-content: unsafe center;

/* Global values */
justify-content: inherit;
justify-content: initial;
justify-content: unset;

注意： 此属性不能用于沿垂直轴描述项目或容器。为了垂直对齐项目，我们可以使用align-items 属性

input框如何去掉边框

使用border：none和outline：none

outline属性：

绘制元素周围的一条线，不占用空间，不影响元素的尺寸和位置。随元素的focue（获得焦点）而自动出现，随blur（失去焦点）而自动消失

        input {
            border: none;
            /* outline属性：外部边框，只有在获得焦点以后才出现的 */
            outline: none;
        }

CSS属性

CSS

选择器