作者什么时候能有一个毛孩子啊\~\~\~ *** # BFC(1次) **定义：** **MDN**：**区块格式化上下文**（Block Formatting Cofntext，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。通俗来讲：BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。 **解决布局问题：** 浮动、外边距重叠 **构成BFC方法：** * HTML根元素 * float: left | right(除none) * position: absolute | fixed * display: inline-block | flex | inline-flex | grid | inline-grid | table-cell |table-caption | flow-root(专门用来创建BFC属性) * overflow: 除了visible * contain: layout | content | paint(现代浏览器支持) # 清除浮动浮动会造成父元素高度塌陷(没有设置height) 方法：BFC、clear: both、伪元素(不影响布局复杂度) # 像素单位(3次) * px：绝对单位 * em：相对单位，相对**父元素**的字体大小 * rem：相对单位，相对**根元素**(html)的字体大小 * vw/vh：视口宽高的百分比 # CSS选择器以及优先级(2次) | | | | | ------------ | -------------------- | ----- | | 选择器 | 格式 | 优先级权重 | | id | #id | 100 | | 类 | .class | 010 | | 伪类注意区分 | li **:** last-child | 010 | | 属性 | a\[class="refValue"] | 010 | | 元素 | div | 001 | | 伪元素注意区分 | div **::** after | 001 | | 相邻兄弟 | h1+p | 000 | | 子 | ul\>li | 000 | | 后代 | li a | 000 | | \* 通配符 | \* | 000 | 提示：内联样式的优先级是1000(比id还高) ，!important声明的样式的优先级最高,在样式中更改UI库的样式经常用到 **:global,** 设置某个节点下的全局样式; # 伪类和伪元素的区别(3次，字节一面) ## 伪类将特殊效果添加到特定选择器上，在已有元素上添加类别，不产生新元素 a:hover {color: #FF00FF} p:first-child {color: red} p:nth-child(odd) {color: pink} ![](<> "点击并拖拽以移动") ## 伪元素在内容元素的前后插入额外元素/样式，插入的元素实际上并不在文档中生成。它们只在外部显示可见（渲染树存在，DOM树不存在），但不会在文档的源代码中找到它们，因此，称为“伪”元素。 p::before {content:"第一章：";} p::after {content:"Hot!";} p::first-line {background:red;} p::first-letter {font-size:30px;} ![](<> "点击并拖拽以移动") # 行内元素、块级元素、行内块元素区别， | | | | | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | | 元素 | 排列方式 | 样式效果 | | 行内 inline | 同行排列内容超出自动换行(盒子占两行)![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/0e16a250e99340ce8cc44fb1de5c673b~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg57uZ5oiR6ICB5a6e5LiA54K5:q75.awebp?rk3s=f64ab15b&x-expires=1774423903&x-signature=7cAyYtQo%2F1e%2FdPm2pm42QRQQGBU%3D)![](<> "点击并拖拽以移动")编辑 | 设置宽高无效，垂直margin、padding、border不占空间 | | 块级 block | 独占一行，前后自动换行 | 设置宽高有效，margin、padding、border均生效并影响布局 | | 行内块 inline-block | 同行排列内容超出整个盒子换到下一行(注意区分inline)![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/ef232bf1df0e4fbea60d4637f58d040d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg57uZ5oiR6ICB5a6e5LiA54K5:q75.awebp?rk3s=f64ab15b&x-expires=1774423903&x-signature=7xwsRJcMJmAB2cXP6hw7C1917us%3D)![](<> "点击并拖拽以移动")编辑 | 同block | # 置换元素 **置换元素（Replaced Element）** ：是指其内容由外部资源决定，而非由 HTML 直接描述的元素。常见置换元素：、