HTML面试题手写代码_html面试题手写CSS布局考点【示例】-html教程-PHP中文网

推荐用 position: absolute + transform 实现居中布局：父容器 relative 定高，子元素 absolute + top/left: 50% + translate(-50%, -50%)，兼容 ie9+ 且不依赖尺寸。

html面试题手写代码_html面试题手写css布局考点【示例】

手写一个居中布局，兼容 IE9+

Flex 布局最直接，但面试常考「不用 flex」的写法——因为要考察对定位、BFC、行高、transform 等底层机制的理解。

推荐用 position: absolute + transform 组合，兼顾语义清晰和兼容性：

.container {
  position: relative;
  height: 400px; /* 必须有高度，否则子元素无法垂直居中 */
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

不依赖内容宽度/高度，适用于图片、文字、未知尺寸块级元素
IE9+ 支持 transform，但注意 IE9 需加 -ms-transform 前缀（若明确要求支持 IE9）
避免用 margin: -100px 这类固定值方案——它只对已知尺寸有效，一换图就错
别用 display: table-cell + vertical-align: middle：父容器需设 display: table，且会破坏文档流，响应式下易出问题

手写三栏等宽自适应布局（左右固定，中间自适应）

这是 CSS 布局高频考点，核心是避免浮动塌陷、保证中间栏不被挤掉，同时不依赖 JS 或 flex。

经典圣杯布局（Holy Grail）或双飞翼（Double Flying Wing）都可，但更推荐双飞翼——结构更干净，margin 控制比 position 更可控：

<div class="wrapper">
  <div class="main"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>

.wrapper {
  padding: 0 200px; /* 为左右栏留白 */
}
.main {
  float: left;
  width: 100%;
}
.left {
  float: left;
  width: 200px;
  margin-left: -100%;
  position: relative;
  left: -200px;
}
.right {
  float: left;
  width: 200px;
  margin-left: -200px;
  position: relative;
  right: -200px;
}

HTML 中 .main 必须在前，才能让 width: 100% 正确占满剩余空间
margin-left: -100% 是关键：把左栏拉回主内容左侧；position: relative 仅用于微调，不参与布局计算
如果面试允许 flex，直接写 display: flex + flex: 0 0 200px 即可，但务必说明「这是现代解法，传统项目仍需掌握双飞翼」

手写响应式图片列表，一行显示 3 个，小屏变 2 个再变 1 个

别用固定像素宽度，重点考察 calc() 和媒体查询的配合能力，以及如何避免 margin 折行错位。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

用 display: flex 最稳妥，但若限定「纯 CSS Grid 或 float」，推荐 Grid：

.grid-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 768px) {
  .grid-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .grid-list {
    grid-template-columns: 1fr;
  }
}

必须用 gap 而非 margin：避免最后一行子项因右 margin 导致换行异常
不要写 grid-template-columns: 33.33% 33.33% 33.33%：百分比在某些浏览器下累计误差会导致第三列换行
若要求兼容 IE10/11，改用 display: table 模拟栅格（不推荐），或降级为 inline-block + calc(33.33% - 10px)，但需重置 font-size: 0 消除间隙

手写一个带三角形箭头的 tooltip，纯 CSS 实现

面试常考伪元素与 border 技巧，关键不是画出来，而是「怎么让它对齐、怎么随内容自适应、怎么避免锯齿」。

用 ::after 生成三角，靠透明 border 拼出形状，再用 transform: translate 微调位置：

.tooltip {
  position: relative;
}
.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: #333;
  transform: translateX(-50%);
}

border 四边设为 transparent，只设一边颜色，就能形成三角；尺寸由 border 宽度决定
必须用 transform: translateX(-50%) 居中，而不是 left: 50% + margin-left: -6px：后者在字体缩放或 zoom 下会偏移
IE8 不支持 ::after，如需兼容，得用额外标签 + clip-path 或 SVG，但现代面试基本不考
箭头颜色随 tooltip 背景动态变化？CSS 变量可解：border-top-color: var(--tooltip-bg, #333)