05. CSS

实现响应式布局

响应式：页面根据用户设备环境（系统平台、屏幕尺寸、屏幕定向等）自动进行相应的响应和调整实现：

弹性布局（flex、grid）
媒体查询
相对单位（rem、百分比、vw/vh）

隐藏页面元素

display: none
visibility: hidden
opacity: 0
position: absolute 移到显示范围外（不推荐）
宽高改为 0（不推荐）

	`display: none`	`visibility: hidden`	`opacity: 0`
页面中	不存在	存在	存在
绑定事件	不触发	不触发	触发
回流	会	不会	不会
重绘	会	会	如果是 transition 时走独立合成层，不会重绘

视差滚动

多层背景以不同的速度移动，形成立体的运动效果

实现

background-attachment: fixed 让背景固定，不会随着元素的内容移动

padding-top/bottom 和 margin-top/bottom 的百分比相对于什么

相对于父元素的 width

原因：我们认为，正常流中的大多数元素都会足够高以包含其后代元素（包括外边距），如果一个元素的上下外边距是父元素的 height 的百分数，就可能导致一个无限循环，父元素的 height 会增加，以适应后代元素上下外边距的增加，而相应的，上下外边距因为父元素 height 的增加也会增加，无限循环。

一个比较经典的应用场景：移动端图片展示，盒子设高度为 0，宽度为 100%，padding-top 设置为 100%，这样这个盒子的高度始终会和盒子的宽度一样，之后里面的图片尺寸按照 1:1 设计，宽高都设置为 100% 就可以完美显示了。

line-height 的百分比相对于什么

自身的字体大小

两列布局

flex

.container {
  display: flex;
}
 
.left {
  flex: 1; /* 左列自适应剩余空间 */
}
 
.right {
  flex: 0 0 300px; /* 右列固定宽度 */
}

grid

.container {
  display: grid;
  grid-template-columns: 1fr 300px; /* 左列自适应，右列固定300px */
  gap: 20px;
}

浮动

.left {
  float: left;
  width: calc(100% - 320px); /* 总宽度减去右列+间隙 */
}
 
.right {
  float: right;
  width: 300px;
}
 
/* 清除浮动 */
.container::after {
  content: '';
  display: block;
  clear: both;
}

0.5px 的线

transform: scaleY(0.5)

🏡 Hayoee

探索