目录
- 选择器
- 隐藏元素的方法
- rem、em、vw、vh
- 移动端适配的⽅案
- flex 布局
- position 定位
- 垂直水平居中的方法
- 滚动条
- 重绘、重排
选择器
有哪些
| 选择器类型 | 介绍 | 举例 |
|---|---|---|
| 简单选择器 | 根据标签、id、类来选取元素 | #id 、.class、 tag、 * 、 div,p |
| 组合器选择器 | 根据它们之间的特定关系来选取元素 | father son 、father>son 、bro~bro |
| 伪类选择器 | 根据特定状态选取元素 | :hover、 :active、 :focus 、:visited :last-child |
| 伪元素选择器 | 选取元素的一部分并设置其样式，不存在于DOM树中 | ::before 、 ::after、 ::first-letter |
| 属性选择器 | 根据属性或属性值来选取元素 | img[alt]、 a[title="W3School"] |
优先级
!important > 行内样式 > ID选择器#id > 类选择器.class > 标签tag > 通配符 * > 继承 > 浏览器默认属性
隐藏元素的方法
| 方法 | DOM 结构 | 重绘&重排 | 响应事件 |
|---|---|---|---|
display:none | ❌ | ✅ ✅ | ❌ |
visibility:hidden | ✅ | ✅ ❌ | ❌ |
opacity:0 | ✅ | ❌ | ✅ |
尺寸设为 0transform: scale(0,0) | ？ | ✅ | ❌ |
移出视窗position:absolute;top:-9999px;left:-9999px | ✅ | ❌ | - |
裁剪clip-path:polygon(0px 0px 0px 0px 0px 0px 0px 0px) | ✅ | ❌ | ✅ |
父元素尺寸设为0，并且overflow:hidden | ✅ | ❌ | ✅ |
rem、em、vw、vh
| 单位 | |
|---|---|
em | 1em = 自身元素字体大小（font-size 是继承属性） |
rem | 1rem = 根元素(html)字体大小 |
vh | 1vh = 视口高度的1% |
vw | 1vw = 视口宽度的1% |
移动端适配的⽅案
为什么要适配：
移动端设备的尺寸很多，而 UI 设计稿一般只会基于一个尺寸（一般是 375px 或 750px ）进行设计。
1.rem + 动态修改html的font-size
根据不同的屏幕尺寸，来动态设置根元素 html 的 font-size 的大小，以此来达到适配不同屏幕尺寸的目的。
// 封装一个根据屏幕尺寸自动改变 html 的 font-size 大小的函数
var init = function () {
// 获取当前设备屏幕宽度
var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
// 计算新的字体大小，设计图尺寸是375px，1rem（newFontsize）等于设计图中的100px;
var newFontsize = 100 * width / 375;
// 修改 html 的 font-size
document.documentElement.style.fontSize = newFontsize + "px";
};
export default init;
2.vw + 动态修改html的font-size
flex 布局
容器元素
.wrapper{
display: flex;
/* 主轴方向 */
flex-direction:row | row-reverse | column | column-reverse;;
/* 换行 */
flex-wrap:nowrap | wrap | wrap-reverse;
/* 主轴方向和换行的简写 */
flex-flow:'flex-direction' 'flex-wrap';
/* 主轴上的对齐方式 */
justify-content:flex-start | flex-end | center | space-between | space-around;
/* 辅轴上的对齐方式 */
align-items:flex-start | flex-end | center | baseline | stretch;
/* 多根主轴轴线的对齐方式 */
align-content:flex-start | flex-end | center | space-between | space-around | stretch;
}
项目元素
flex:
initial默认（0 1 auto只缩小不放大），none（0 0 auto 不弹），auto（1 1 auto 弹），1（1 1 0% 弹）
.item{
/* 有多余空间时是否变大，默认不变大 0 */
flex-grow: <number>;
/* 空间不足时是否缩小，默认缩小 1 */
flex-shrink: <number>;
/* 指定元素在主轴方向上的基础长度 */
flex-basis: <length> | auto; /* default auto */
/* 项目元素弹性的简写*/
flex: none | auto | initial | 'flex-grow' 'flex-shrink' 'flex-basis';
order: <integer>;
/* 允许单个项目有与其他项目不一样的对齐方式，可覆盖`align-items`属性 */
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
position 定位
| 属性值 | 特点 |
|---|---|
static（默认值） | 不开启 |
relative | 相对于元素原来的位置 |
absolute | 相对于最近的开启了定位的祖先元素，元素变成块元素 |
fixed | 相对于浏览器的视口 |
sticky | 相对于元素原来的位置，且到相对浏览器的视口的位置时固定不动 |
元素垂直水平居中的方法
1. 绝对定位position: absolute + margin:auto
.father {
position: relative;
}
.son {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
2. 绝对定位position: absolute + transform:translate(-50%,-50%)
.father {
position: relative;
}
.son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3. flex/grid布局
.father {
display: flex | grid;
align-items: center;
justify-content: center;
}
.son {
}
4.table布局
.father {
display: table-cell;
vertical-align:middle;
text-align:center;
}
.son {
display:inline-block;
}
文本/行内元素垂直水平居中的方法
也可以转成块元素再用上面的方法
.father {
height: 100px;
text-align:center;
}
.son {
line-height:100px;
}
滚动条
.father {
height:100px;
overflow-y: scroll;
}
.son {
height:200px;
}
重绘、重排
防抖
为什么会抖动
- 因为没有指定元素具体⾼度和宽度,⽐如数据还没有加载进来时元素⾼度是 100px(假设这⾥是 100px)
- 数据加载进来后,因为有了数据,然后元素被撑⼤,所有出现了抖动
