前端基础面试笔记

html css

如何理解语义化

• 对人可读易读友好
• 搜索引擎友好 分析标签 如 h1 主次关系等 (seo)

块状元素内联元素

• 独占一行区别 block table
• inline inline-block
• fontsize:0能取消inline-block之间的默认间距

盒模型宽度

• offsetwith 无外边距
• box-sizing:border-box with整体包括border padding

margin纵向重叠问题

• 相邻元素的margin-top与margin-bottom 会重叠 以大的为准
• 空内容P也会重叠

margin 负值问题

• 向相反方向移动

bfc

• block format context 块级格式化上下文
• 独立渲染区域内部元素的渲染不会影响到边界以外的元素
• 触发元素bfc：float不是none position是absolute或fixed overflow不是visible
  display是flex 或者 inline·-block
• 使用bfc可以解决父元素塌陷问题 如 overflow·：hidden 就可以把容器撑大

float布局

• 圣杯和双飞翼目的和技术总结：

1. 三栏布局，中间一栏最先加载和渲染（内容最重要）
2. 两侧内容固定中间自适应
3. 用于pc端
4. 都使用float布局，两侧使用margin负值，以便和中间内容横向重叠
5. 防止中间内容被两侧覆盖，一个用padding，一个用margin
6. 双飞翼更简单更好理解

• 圣杯布局：
  全部float:eft 中间用padding撑到中间，
  左边margin-left：-100% 然后position-relative移动到最左边
  右边用margin-right负值移动过去
• 双飞翼布局：
  中间宽度100%通过margin为两边留白
  左边marginleft -100%
  右边marginleft 负值移动过去
• 手写clearfix：

 .clearfix:after{
 	content: ' '
 	display:table
 	clear:both
 }
 .clearfix{
   *zoom:1;   /* 兼容ie低版本*/
}

flex布局

• 常用语法：

1. flex-direction：主轴方向
2. justify-content 主轴对齐方式
3. align-item 交叉轴对齐方式
4. flex-wrap 换行
5. align-self 子元素交叉轴对齐方式

css定位

absolute: 依据最近一层的定位元素 定位元素是指 absolute relative fixed或者 body
relative:依据自身
居中对齐方式：
水平：inline text-align center / block margin auto/absolute: let:50%+marginleft负值
垂直：inline: line-height 的值等于height值/
ab:top 50 margin负值
ab: tranform（-50%,-50%）
ab:top left right bottom 都为0 +margin：auto 后两种不需要知道子元素尺寸！

line-height 如何继承

• 如果是具体数值则继承该数值
• 如果写比例则继承该比例 2/1.5
• 写百分比则继承计算出来的值！

css 响应式

• rem
  相对于根元素的长度单位
• 响应式常见方案
  @media设置不同屏幕的font-size
  rem基于根元素长度计算
  vw/vh
• rem的弊端：
  阶梯型不连续的
• 网页视口尺寸：
  window.screen.height:屏幕高度
  window.innerheight:网页视口高度
  document.body.clientheight:body高度
  vh：视口高度的1/100
  vw:视口宽度的1/100
  vmax,vmin 两者最值