最近的前端面试多多少少都会遇到css的提问，感觉还是要把重点内容记记背背。这里基于b站和我自己面试的情况整理。
20250418更新：
- BFC
Block Formatting Context，一个块级的盒子，可以创建多个。里面有很多个块，他们的布局、浮动元素和其他元素的相互作用受BFC规则的影响。
内部每个块从上到下一个一个放，垂直方向由margin，上下margin可能重叠，BFC不会与float box重叠。
对于浮动元素，如果不用BFC，肯可能有高度丢失的问题
形成BFC的条件：
float不为none
overflow为auto、scroll、hidden
display为
- 容器的 flex
让块级元素可以整齐排列，而不是一行一行
display: flex
主轴方向：
flex-direction:row（默认） / row-reverse / column（垂直） / column-reverse
主轴排列方式：
justify-content: flex-start（顺着主轴）/ flex-end（逆着主轴）/ center（居中） / space-between（左右靠边，均分） / space-around（均分） / baseline
交叉轴的排列方式：
align-items:stretch（沿着交叉轴拉伸） / flex-start（垂直轴起始） / flex-end（垂直轴结束） / center
多行垂直轴排列方:
align-contents:stretch / flex-start / flex-end / center / space-between / space-around
间距：
gap: 10px
换行：
flex-wrap: nowrap（默认不换行） / wrap（换行） / wrap-reverse（从上到下换行）
- 盒子模型
content（元素实际内容）-padding-border-margin
content: width / height
padding: padding-top / bottom / left / right
对于块级元素，默认占满一行 ；对于行内元素，如span，不能直接通过width和height设置，设置display: inline-block就可以控制宽高了
默认 width 和 height 是只包括 content 的，再有 margin 就大了，即盒子的默认模式为content-box，即box-sizing: border-box ，否则可以设置box-sizing: border-box
border: solid（实线）、点线（dotted）、double（双实线）、dashed（虚线）
- CSS定位
position: static（默认，设置top、right无效） / relative（通过自己定位，在文档流（就是还会在文档里留位置）） / sticky（不设置top等和static没区别，设置后，先static再fixed） / fixed（浏览器窗口左上角，脱离文档流，不影响其他元素定位） / absolute（绝对定位，脱离文档流，相对于最靠近它的非static的父容器，如果没有）
- 样式使用方法
优先级：内联>内部>外部
内联样式：直接写在html元素的标签中 style="color=red"
内部样式：在style块里写
外部样式：在head里写<link rel="stylesheet" herf="./css/style.css">
- 选择器：
id>class>标签名
- 元素选择器：h2 直接写
- 类选择器：class .class
- id选择器：id #id
- 通用选择器： * 选择所有元素
- 子元素选择器： .father > #id/.class
- 后代选择器： .father p{}
- 相邻兄弟选择器：h3 + p{} (相当于是对h3和p相邻的情况下，对p做样式)
- 伪类选择器：
- 属性
style="font: bolder 50px" 复合属性，可以写在一起
font-size: 字体大小
font-family:字体
font-weight:字体粗细
line-height: 行高
- 浮动会导致父元素坍塌
解决方法：（1）在父元素写 overflow:hidden；（2）
旧内容：
-
选择器
p{
}// 对于id id = "demo"
#demo {
}// 对于类 class = "center"
.center {
}// 对于 class = "center" 的
p.center {
}// 允许class = "center large"
可以分别设置样式，然后两个都使用等等// 对于所有元素
- {
}
// 对于多个选择器
h1, h2, p {
} - {
-
外部CSS
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
rel="stylesheet" 是告诉浏览器这是一个CSS文件，type="text/css"告诉浏览器文件类型是CSS，herf="mystyle.css"指定样式文件的路径
- 一些内容
opacity透明度，0-1.0，越低越透明
或者直接这样写 background: rgba(0, 128, 0, 0.3)
- 背景设置
body {
background-image: url("paper.gif");
background-repeat: no-repeat;
background-attachment: fixed; // 固定
}
body {background-image: url("bgdesert.jpg");
background-repeat: repeat-x;
background-position: right top;
background-attachment: scroll; // 滚动
}
- v-bind和v-model
v-model 是双向绑定语法，html和js变量中的值会同步发生变化，js和ui是同步的
v-bind 会被缩写成： 表示绑定的是表达式的值
v-model.number=" "：把输入或选中的值自动转为数字（能转则转，适当扔，转不了拉倒）
v-model.trim：自动去除字符串两边的空格
v-model.lazy：不在 input 时更新，而是在 blur 时更新（失焦后更新）
- axios
是一个用于发送http请求的库，可以从前端向服务器端发送或获取数据
