CSS
CSS盒模型：
content, padding, border, margin
box-sizing: content-box(default), border-box
浮动：让多个块级盒子一行没有缝隙排列展示，用于横向排列盒子。
定位：让盒子在某个盒子内定位/在屏幕上定位，并且可以压住其他盒子。
Relative：相对原来的位置。不脱标。
Absolute：相对有定位的祖先元素位置。脱标。
Fixed：以浏览器的可视窗口定位。脱标。
Display属性：设置元素的显示方式。
Block：独占一行Inline：无法设置长宽
Inline-block：行为类似inline但是可以设置长宽
None：元素不在页面上显示，用于隐藏元素
Flex
Grid：
inline-block 是将元素同时显示为内联元素和块级元素的一种特殊情况，使元素既能在同一行内排列，又能设置宽度、高度和外边距等。
Display：none将元素从页面完全移除，不再占据空间。
Visibility：hidden隐藏元素，但是保留其位置和布局。
CSS权重：
!important 最高
Flex弹性布局:
任何容器都可以指定为flex布局。通过给父盒子添加Flex属性，来控制子盒子位置和排列方式。Flex Container（容器），它的所有子元素自动成为Flex Item（项目）。
Flex-direction：主轴方向
Justify-content：item在主轴上的对齐方式
space-around、space-between：平分剩余空间。
Flex-wrap：排不下的时候改变子元素宽度/换行。
Align-items：item在侧轴上的对齐方式（子项为单行时使用）
Align-content：item在侧轴上的对齐方式（子项为多行时使用）（仅换行时才能生效）
子项属性：
flex: <'flex-grow'> <'flex-shrink'> <'flex-basis'>
'flex-grow'：当剩余空间多余时，子元素的扩张规则，默认值为：0，即有剩余空间也不扩张（如果想做自适应撑开的布局，基本要设置这个属性值）
'flex-shrink'：当剩余空间不足时，子元素的收缩规则，默认值为：1，即大家（子元素们 ）都等比例缩放（如果想做定宽的，那么设置为0是个很好的选择）
Flex：定义子项目分配剩余空间，用flex来表示占多少份数。
Align-self：控制子项自己在侧轴上的对齐方式。可覆盖align-items。
Order：
定义子元素的排列顺序，数值越小越靠前，可以是负数，默认值为0
开发
如果元素A和元素B的flex-grow值都是1，它们将以相同的比例分配剩余空间。具体来说，剩余空间将被平均分配给这两个元素。
例如，如果容器的总宽度是600px，减去元素A和元素B的原始宽度（100px和200px），剩余空间是300px。由于它们的flex-grow值相同，这300px将被平均分配，每个元素将获得150px的额外宽度。
div{
flex:1;
width:0;
}
设置了width并且这个width的大小小于平均分配的剩余空间大小时,取平均分配的剩余空间;
div{
flex:1;
}
没有设置width,内部元素的内容大小超过平均分配的剩余空间时,元素的宽度等于内容大小
居中
- Margin：水平居中
Margin：0 auto 水平居中，auto会平分剩余空间。
Margin：auto 0不能实现垂直居中，因为上下没有剩余空间。
margin:'0 auto'; 只对块元素起作用，还要设置width属性。
Img是行内元素不是块级元素！！
text-align属性可以用于设置文本在容器内的水平对齐方式。
- 定位
.centered-element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
- Flex
.parent {
display: flex;
justify-content: center;
align-items: center;
}
选择器：
伪类：
.btn:link, //未被点击的链接
.btn:visited //已被点击的链接
优先级！important>内联样式
属性选择：
默认情况下，span 元素是行内元素，它的宽度和高度是由其包含的内容来决定的。如果你希望 span 元素具有特定的宽度和高度，你可以通过 display 属性将其转换为块级元素，然后再设置宽度和高度。
属性：
clip-path:polygon(0 0, 100% 0, 100% 75%, 0 100%);
polygon是多边形，可以使用不同的函数裁剪。
background-image: linear-gradient(to right, #7ed56fac, #55c57aa4), url(../img/hero.jpg);
可以使用多个参数，前面的image在上方。
transform:rotate(30deg) translate(-50%, -50%);
单位：
height: 95vh;
vh的是"Viewport Height"，即视窗高度。是占视窗的百分比。
与%基于不同的基准进行计算，%是相对于父元素的百分比。
Animation
@keyframes moveInleft {
0% {
opacity: 0;
transform: translateX(-100px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
.heading-primary-main{
animation-name: moveInLeft;
animation-duration: 1s;
animation-timing-function: ease-in;
}
.heading-primary-sub{
animation: moveInRight 1s ease-in;
}
函数：
calc():
element {
width: calc(100% - 50px);
}
Less
媒体查询允许你根据设备的屏幕特性（如宽度、分辨率、方向等）来应用不同的样式，从而实现响应式设计
Vue
组件可以怎么控制样式：
- :class = {‘classname’: boolean} 控制class的有无
- :attributeName = ‘VarName’ 可以控制某属性的值
在 CSS 中，选择器 .grandparent .parent .child 可以被理解为“先后顺序重要的且逻辑”。