静态页面实战问题汇总

建议步骤

• 先看内容
• 是否支持响应式（是否在手机上展示）

问题汇总

box-sizeing

• content-box

  content-box为您提供默认的CSS框大小调整行为。如果将元素的宽度设置为100像素，则元素的内容框将为100像素宽，并且任何边框或填充的宽度将添加到最终渲染宽度。

• border-box

  border-box告诉浏览器在您为元素的宽度和高度指定的值中考虑任何边框和填充。如果将元素的宽度设置为100像素，则该100个像素将包含您添加的任何边框或填充，并且内容框将缩小以吸收该额外宽度。这通常使元素的大小更容易。

background

• background: center center
  相对于x和y轴的相对位置

• background-size: cover contain

• contain 尽可能大地缩放图像，而不裁剪或拉伸图像。

• 在不拉伸图像的情况下尽可能大地缩放图像。如果图像的比例与元素不同，则会垂直或水平裁剪，以便不留空的空间。
  auto

• 一个视元素对如何控制网页的尺寸和缩放浏览器的说明。

  该width=device-width部件将页面宽度设置为遵循设备的屏幕宽度（具体取决于设备）。

  该initial-scale=1.0部分设置浏览器首次加载页面时的初始缩放级别。

body,html宽度和高度设置为百分之百有何作用

浏览器负责分配块级元素宽度，那么浏览器也一定可以分配高度(只是没有做)，那么浏览器本身是有宽度和高度的，设置html的height:100%，就可以获取浏览器的定高了，后面的body和div也就有了依赖。

background-size conver和contain的区别

- cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉；

- contain:图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域；

设置min-height 和设置 max-height的作用

• 可以保证背景图片显示的最小宽度和最小高度

transform: translate(-50%,-50%);的用法

• 简单来说，它可以归结为translateX(-50%) translateY(-50%)，这意味着：

  沿着x轴向左移动我宽度的50％，然后向左移动
  沿着y轴向上移动我高度的50％

width:calc(33.3% - 20px);

• 指的是内容的宽度，33.33%指的是父容器的宽度的百分之三十三减去20px;

HTML

• HTML （图带有可选的标题）元素表示自包含的内容，有可能与可选的标题，这是使用的（指定的 ）元素。该图，其标题及其内容作为单个单元引用。

align-items: center;justify-content: center

• justify-contnt:center 使文本进行水平的对齐
• aligin-items: center 使得文本进行垂直的对齐

border-radius实现原理

了解一下border-radius的实现原理

:nth-child(odd) :nth-child(even)

• :nth-child(odd)指的是奇数的兄弟元素 ：nth-child(even) 指的是偶数的兄弟元素

dldt和dd标记的用法

dl、dt、dd这三个html标记是一个组合，它们很很像

• 这个标签组合，但dl、dt、dd通常是用来描述一些术语定义，比如附录里的词汇表，或用来显示key-value这样成对的键和值。
  dl、dt、dd通常被称为定义性列表。