css应用
狐七 3/22/2022 css
# 1. 如何让一个div水平垂直居中
查看答案
# 居中元素定宽高（3种）
- absolute+负margin
.parent {
position: relative;
}
.son {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
- absolute+margin auto
.parent {
position: relative;
}
.son {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
- absolute+calc
.parent {
position: relative;
}
.son {
width: 100px;
height: 100px;
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 居中元素不定宽高（6种）
- absolute+transform
.parent {
position: relative;
}
.son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
- line-height
.parent {
line-height: 300px; /* 父元素固定高度 */
text-align: center;
font-size: 0px;
}
.son {
font-size: 16px;
display: inline-block;
vertical-align: middle;
/* 不能继承父元素，需要重置 */
line-height: inital;
text-align: left;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
- table
/* 父元素是td元素 */
.parent {
text-align: center;
}
.son {
display: inline-block;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
- css-table
.parent {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.son {
display: inline-block;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
- flex
.parent {
display: flex;
justify-content: center;
align-items: center;
}
1
2
3
4
5
2
3
4
5
- grid
.parent {
display: grid;
}
.son {
align-self: center;
justify-self: center;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 如何让一个元素垂直居中
查看答案
- 设置子元素和父元素的行高一样
- 子元素设置为行内块，再加 vertical-align：middle
- 已知父元素高度，子元素相对定位，通过 transform：translateY（-50%）
- 不知道父元素高度，子绝父相，子元素 top：50%，transform： translateY（-50%）
- 创建一个隐藏节点，让隐藏节点的 height 为剩余高度的一半
- 给父元素 display：table，子元素 display：table-cell，vertical-align： middle
- 给父元素添加伪元素
- 弹性盒模型：父元素 display：flex，子元素 align-self：center
# 清除浮动的方法有哪些？
查看答案
当所有的子元素浮动的时候，且父元素没有设置高度，就会导致下面的元素重叠在浮动元素下面
清除浮动方式
| 方法 | 具体实现 | 优点 | 缺点 |
|---|---|---|---|
| 给父元素单独定义高度 | 给父元素单独定义高度 | 快速简单，代码少 | 无法进行响应式布局 |
| 父级定义 overflow：hidden；zoom：1（针对 ie6 的 兼容） | 简单快速、代码少，兼容性较高 | 超出部分被隐藏，布局时要注意 | |
| 在浮动元素后面加一个空标签 | clear：both；height： 0；overflow：hidden | 简单快速、代码少，兼容性较高 | 增加空标签，不利于页面优化 |
| 父级定义 overflow：auto | 简单，代码少，兼容性好 | 内部宽高超过父级 div 时，会出现滚动条 | |
| 万能清除法 | 给塌陷的元素添加伪对象 .father：after{ Content：“随便写”； Clear：both； display：block； Height：0； Overflow：hidden； Visibility：hidden } | 写法固定，兼容性高 | 代码多 |
# 2. 如何解决移动端 Retina 屏 1px 像素问题
查看答案
- 伪元素 + transform scaleY(.5)
- border-image
- background-image
- box-shadow
# 3. 如何修改才能让图片宽度为300px？
<img src="1.jpg" style="width:480px!important;”>
查看答案
- max-width: 300px
- transform: scale(0.625,0.625)
# 4. 实现模糊搜索结果的关键词高亮显示
查看答案
<body>
<input class="inp" type="text">
<section>
<ul class="container"></ul>
</section>
</body>1
2
3
4
5
2
3
4
5
# 5. 如何设计实现无缝轮播？
查看答案
无缝轮播的核心是制造一个连续的效果。最简单的方法就是复制一个轮播的元素，当复制元素将要滚到目标位置后，把原来的元素进行归位的操作，以达到无缝的轮播效果。
参考代码
轮播的核心代码：
// scroll the notice
useEffect(() => {
const requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame
const cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame
const scrollNode = noticeContentEl.current
const distance = scrollNode.clientWidth / 2
scrollNode.style.left = scrollNode.style.left || 0
window.__offset = window.__offset || 0
let requestId = null
const scrollLeft = () => {
const speed = 0.5
window.__offset = window.__offset + speed
scrollNode.style.left = -window.__offset + 'px'
// 关键行：当距离小于偏移量时，重置偏移量
if (distance <= window.__offset) window.__offset = 0
requestId = requestAnimationFrame(scrollLeft)
}
requestId = requestAnimationFrame(scrollLeft)
if (pause) cancelAnimationFrame(requestId)
return () => cancelAnimationFrame(requestId)
}, [notice, pause])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 如何让 chrome 浏览器显示小于 12px 的文字
参考代码
本来添加谷歌私有属性 -webkit-text-size-adjust：none，现在 -webkit-transform：scale（）
# 如何实现三栏布局方式两边固定中间自适应？
参考代码
- margin 负值法：左右两栏均左浮动，左右两栏采用负的 margin 值。 中间栏被宽度为 100%的浮动元素包起来
- 自身浮动法：左栏左浮动，右栏右浮动，中间栏放最后
- 绝对定位法：左右两栏采用绝对定位，分别固定于页面的左右两侧， 中间的主体栏用左右 margin 值撑开距离。
- flex 左右固定宽 中间 flex：1
- 网格布局
- table 布局
# 画一条0.5px的线
参考代码
- 采用 meta viewport 的方式
<meta name="viewport" content="initial-scale=1. 0, maximum-scale=1.0, user-scalable=no" />
- 采用 border-image 的方式
- 采用 transform: scale() 的方式
# JS动画和css3动画的差异性
参考代码
渲染线程分为 main thread 和 compositor thread。
如果css动画只改变transform和opacity，这时整个CSS动画得以在compositor thread完成。
而JS动画则会在main thread执行， 然后出发compositor thread进行下一步操作。
特别注意的是如果改变 transform 和 opacity 是不会 layout 或者 paint 的。
区别：
- 功能涵盖面，JS比CSS大
- 实现/重构难度不一，CSS3比JS更加简单
- 性能跳优方向固定对帧速表现不好的低版本浏览器，css3可以做到自然降级
- css动画有天然事件支持css3有兼容性问题
# 双边距重叠问题（外边距折叠）
参考代码
多个相邻（兄弟或者父子关系）普通流的块元素垂直方向 margin 会重叠，折叠的结果为：
- 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
- 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
- 两个外边距一正一负时，折叠结果是两者的相加的和。