CSS（补充）

CSS 隐藏元素

1. 使用透明度 (opacity)

.box {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  opacity: 0; /* 完全透明 */
}

特点：

• 元素不可见但仍占据空间

• 可以响应鼠标事件（如点击）

• 适合实现淡入淡出动画效果

2. 使用display属性

.box {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  display: none; /* 完全移除元素 */
}

特点：

• 元素不占据任何空间

• 无法响应任何事件

• 会导致页面重排(reflow)

• 显示时使用 display: block 或其他适当值

3. 使用scale缩放

.box {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  transform: scale(0); /* 缩小到0 */
}

特点：

• 视觉上不可见但仍占据原始空间

• 高性能动画属性

• 可通过 transform-origin 控制缩放中心点

• 显示时使用 transform: scale(1)

4. 使用visibility属性

.box {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  visibility: hidden; /* 隐藏元素 */
}

特点：

• 元素不可见但仍占据空间

• 无法响应鼠标事件

• 不会导致重排，只触发重绘(repaint)

• 显示时使用 visibility: visible

5. 使用宽高和overflow

.box {
  width: 0;
  height: 0;
  background-color: aquamarine;
  overflow: hidden; /* 隐藏溢出内容 */
}

特点：

• 元素尺寸为0但仍存在于文档流

• 通常需要配合 visibility: hidden 使用

• 子元素会被完全裁剪

• 恢复时需要设置原始宽高

6. 使用position定位

.box {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  position: absolute; /* 绝对定位 */
  top: -100px; /* 移出视口 */
  left: -100px;
}

特点：

• 元素不占据文档流空间

• 仍存在于DOM中

• 可以响应JavaScript事件

• 对屏幕阅读器可见

7.使用transform位移隐藏

.box {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  transform: translateX(-9999px); /* 水平移出视口 */
}

特点：

• 元素视觉上不可见但仍存在于DOM中

• 仍占据原始文档流位置（可能影响布局）

• 不会触发重排(Reflow)，性能较好

• 可以结合transition实现滑动隐藏动画

• 对屏幕阅读器可见（适合可访问性需求）

8.使用旋转隐藏（transform: rotate）

.box {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  transform: rotate(90deg); /* 旋转90度隐藏 */
  backface-visibility: hidden; /* 旋转超过90度需隐藏背面 */
  opacity: 0; /* 通常需要配合透明度 */
  position: absolute; /* 避免影响布局 */
}

特点：

• 通过旋转使元素"侧转"达到隐藏效果

• 需要配合opacity: 0或position: absolute完全隐藏

• 可以创建独特的旋转出现/消失动画

• 元素仍存在于DOM中

• 性能较好（使用GPU加速）

隐藏方法对比表

CSS 布局模式

一、Table 布局（传统表格布局）

经典案例

蓝色理想等早期网站采用此布局方式

实现方法

1. 按照设计图尺寸设置表格宽高及单元格尺寸

2. 设置表格边框和间距为0：

   <table border="0" cellpadding="0" cellspacing="0">

3. 复杂布局可嵌套表格

4. 使用align和valign控制对齐方式

弊端分析

1. 代码冗余：比HTML标记占用更多字节

2. 渲染阻塞：延迟页面生成速度

3. 图片处理：需要切割逻辑性图片

4. 文字拷贝：某些浏览器中会出现问题

5. 布局限制：影响内部元素布局属性

6. 维护困难：难以通过CSS修改样式

7. 语义错误：描述表现而非内容

二、DIV+CSS 静态布局

特点

• 元素尺寸固定使用px单位

• 布局不随屏幕尺寸变化

优点

• 简单易学，适合初学者

• 无兼容性问题

• 适合固定尺寸的官网/门户网站

缺点

• 无法适应不同屏幕尺寸

• 移动端体验差

示例代码

.container {
  width: 1200px;
  margin: 0 auto;
}
.box {
  width: 300px;
  float: left;
}

三、响应式布局（媒体查询）

代表案例

映纷创意、少数派、果核剥壳

核心概念

• 根据设备环境自动调整布局

• 2010年由Ethan Marcotte提出

• 通过弹性网格、弹性图片和媒体查询实现

关键技术

1. 设置meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2. 兼容IE8

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

3. 媒体查询语法

@media screen and (max-width: 960px) {
  body { background: #000; }
}

媒体查询实践

基础用法

css

/* 小于960px */
@media screen and (max-width: 960px) {
  body { background: red; }
}

/* 大于960px */
@media screen and (min-width: 960px) {
  body { background: orange; }
}

/* 960px-1200px之间 */
@media screen and (min-width: 960px) and (max-width: 1200px) {
  body { background: yellow; }
}

断点设置顺序

/* 正确顺序 - min-width从小到大 */
@media (min-width: 768px) { /* >=768 */ }
@media (min-width: 992px) { /* >=992 */ }
@media (min-width: 1200px) { /* >=1200 */ }

/* 正确顺序 - max-width从大到小 */
@media (max-width: 1199px) { /* <=1199 */ }
@media (max-width: 991px) { /* <=991 */ }
@media (max-width: 767px) { /* <=768 */ }

典型分辨率适配方案

1280+分辨率(>1200px)

@media (min-width: 1200px) {
  #page { width: 1100px; }
  #content { width: 730px; }
}

720分辨率(480-767px)

@media (min-width: 480px) and (max-width: 767px) {
  #page { width: 450px; }
  #secondary { display: none; }
}

横竖屏适配

/* 竖屏 */
@media (orientation: portrait) and (max-width: 720px) {
  /* 样式 */
}

/* 横屏 */
@media (orientation: landscape) {
  /* 样式 */
}

四、现代布局技术补充

1. Flexbox 布局

.container {
  display: flex;
  justify-content: space-between;
}

2. Grid 布局

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

3. 视口单位布局

.box {
  width: 50vw;  /* 视口宽度的50% */
  height: 50vh; /* 视口高度的50% */
}

五、布局选择建议

1. 传统企业官网：静态布局

2. 内容型响应式网站：媒体查询+弹性布局

3. 管理系统：固定布局+局部响应

4. 移动端优先项目：响应式+视口单位

5. 复杂交互应用：Flexbox/Grid布局