HTML/CSS

理论

如何实现响应式布局
- 使用媒体查询，适应不同模式，比如打印模式跟网页模式，适应不同设备，比如PC端跟移动端
- 使用响应式单位，例如%, vw, vh, em, rem
- 使用响应式属性，例如max-width, max-height
什么是媒体查询
- 媒体查询就是对不同的媒体使用不同的样式规则，使得一套代码可以在多端呈现良好的界面效果
媒体查询有哪些使用场景
- 响应式布局设计
- 对不同模式呈现不同样式
如何书写媒体查询

// 在网页模式且宽度小于760px时生效的样式
@media screen and (max-width: 760px) {}

如何保证h5和pc在显示上的一致性
- 通过媒体查询调整在h5跟pc的布局，通常pc宽度比较大，会在横向上呈现更多内容，而h5，则更多将内容纵向排列
- 通过响应式的单位，使得网页元素大小适应于宽度的变化
px,rem,em,vw,vh,rpx这些单位分别是什么意思,使用场景是什么
- px, 表示像素，在分辨率不同的设备上，看起来大小会不一致 (分辨率高的设备，会在同样面积上拥有更多的像素)
- em, 以父元素的font-size为参考，1em等于父元素的font-size, 但是网页元素层层嵌套，较难计算，通常不使用
- rem，相当于root em, 以根元素，即html为计算参考，1rem等同于根元素的font-size，为了方便计算，通常在根元素设置 font-size: 10px
- vw，wh，即 view width, view height，规定视口宽度为100vw，视口高度100vh
- rpx, 小程序实现自适应的方案，他规定所有屏幕宽度都为750rpx
如何实现rem布局
- 在html上设置font-size的大小，之后所有的rem大小都参考其值，1rem = 根元素font-size
如何实现弹性布局
- 容器属性
  - display: flex; 将标签声明为弹性盒子
  - flex-direction: row|row-reverse|column|column-reverse; 声明主轴的方向
  - justify-content: flex-start|flex-end|center|space-between|space-around; 声明主轴方向存在富裕空间时，项目如何摆放
  - align-items: flex-start|flex-end|center|baseline|stretch; 声明侧轴方向存在富裕空间时，项目如何摆放
  - flex-wrap: nowrap|wrap|wrap-reverse; 声明项目如何换行，换行的方向
  - align-content: ;多行/列时侧轴富裕空间的管理
  - flex-flow: flex-direction和flex-wrap的简写属性
- 项目属性
  - order: 项目摆放时的顺序级别，越小排名越靠前
  - align-self: 项目自己在侧轴上的富裕空间管理
  - flex-basis: px|%|auto; 声明项目在主轴上的基准值
  - flex-grow: 弹性因子; 声明弹性空间管理时项目放大的权重
    - 最终长度计算为：基准值 + 富裕空间 / 所有项目的flex-grow之和 * 本项目flex-grow权重
  - flex-shrink: 收缩因子; 声明弹性空间管理时项目收缩比例
    - 计算收缩因子与基准值乘积的总和
    - 计算收缩因数：收缩因数 = (项目的收缩因子*项目基准值)/第一步计算总和
    - 移除空间的计算：移除空间 = 项目收缩因数 * 负溢出的空间
伪类与伪元素的区别
- 伪类表示标签的一些状态，比如获取焦点，被悬停等
- 伪元素表示在标签内添加另一个元素
- 伪类是状态，伪元素是实体
css选择器有哪些
- id选择器
- 类选择器
- 标签选择器
- 属性选择器
- 后代选择器
- 伪类选择器
- 伪元素选择器
- nth选择器
简述一下CSS盒模型，可以手动去改变吗
- CSS盒模型，把网页中的元素，看成一个个的盒子，每个盒子，包含margin、border、padding、content,
- 可以通过设置box-sizing来改变
box-sizing的属性有哪些，分别是什么作用
- border-box: 元素的width、height，包括了 border、padding、content，较为直观
- content-box: 元素的width、height，只有content

coding

实现水平垂直居中的方案

<div class="parent">
    <div class="child"></div>
</div>

  // 使用 flex
  <style>
      .parent {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }
  </style>
  // 使用绝对定位元素相对于相对定位祖先元素定位
  <style>
      .parent {
        position: relative;
      }
      .child {
          position: absolute;
          left: 50%; // 以父元素为参照
          top: 50%;  // 以父元素为参照
          transform: translate(-50%, -50%);	// 以子元素，即自己的宽高为参照
      }
  </style>
  // 同上，使用定位方式，并且利用自动边距，使得元素居中
  <style>
      .parent {
        position: relative;
      }
      .child {
          position: absolute;
          top: 0px;
          bottom: 0px;
          left: 0px;
          right: 0px;
          margin: auto;
      }
  </style>
  // 对于子元素宽高确定的情况，直接计算出居中时的偏移即可，灵活性稍差
  <style>
      .parent {
        position: relative;
      }
      .child {
          position: absolute;
          top: 50%;
          left: 50%;
          margin-top: -50px;	// 子元素高度的一半
          margin-left: -50px;	// 子元素宽度的一半
      }
  </style>

0130面试题——响应式布局、盒模型、居中方案

HTML/CSS

理论

coding