「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」
盒模型
- 标准盒子模型：宽度=内容的宽度（content）+ border + padding
- IE盒模型：宽度=内容的宽度（content + border + padding）
通过box-sizing设置盒模型box-sizing：content-box(默认)/border-box
BFC(块级格式化上下文)
BFC(Block Formatting Context)是一个独立的渲染区域，它规定了CSS内部块级元素如何布局，区域内的元素与外部元素之间互不相关
如何开启BFC
- float值不为none
- position值不为static或relative
- display值为inline-block、table-cell、table-caption、flex、inline-flex
- overflow值不为visible
BFC可以解决哪些问题
避免垂直方向上margin合并/溢出问题
解决父元素高度坍塌
-
父元素设置
overflow：hidden优点：代码少 简单缺点：超出内容会被隐藏 -
增加子元素
<div style="clear:both"></div>缺点：添加多余的空标签 -
父元素设置float
缺点：可能产生新的浮动问题 -
最优方案添加伪元素::after {content:'';display:block;clear:both}
link与@import区别
- link功能较多，@import只能用于加载css
- 页面加载时link会被同步加载，@import会在页面加载完成后加载
- link引用的样式权重比@import高
- link支持js动态加载，@import不行
选择器权重
!important > 内联 > id >class/伪类 > tag/伪元素 > *
flex:1
flex:1是三个属性的简写
- flex-grow：分配剩余空间的相对比例
- flex-shark:元素的收缩规则，仅在默认宽度之和大于容器的时候才会发生收缩
- flex-basis：元素在主轴方向上的初始大小
/* 一个值, 无单位数字: flex-grow */
flex: 1;
/* 一个值, width/height: flex-basis */
flex: 10px;
/* 两个值: flex-grow | flex-basis */
flex: 1 10px;
/* 两个值: flex-grow | flex-shrink */
flex: 2 1;
/* 三个值: flex-grow | flex-shrink | flex-basis */
flex: 2 1 10px;
伪类与伪元素有什么区别
- 伪类使用单冒号，而伪元素使用双冒号。如
:hover是伪类，::before是伪元素 - 伪元素会在文档流生成一个新的元素，可以使用
content属性设置内容
多行文本溢出...
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
回流与重绘
回流:元素的内容、结构、位置或尺寸发生了变化，需要重新渲染页面，每个页面至少需要一次回流,就是在页面第一次加载时
重绘:元素发生的改变只影响了节点的一些样式（背景色，边框颜色，文字颜色等），只需要应用新样式绘制这个元素就可以了
引发回流的操作
- 添加或删除dom元素
- 元素边距、大小、内容发生改变
- 页面初次渲染
- 浏览器窗口尺寸改变
