前端面试题（HTML、CSS）

wangsd
210 阅读11分钟

HTML/CSS

字体图标

  • unicode
    • 兼容性最好，支持ie6+，及所有现代浏览器。
    • 支持按字体的方式去动态调整图标大小，颜色等等。
    • 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
  • font-class （unicode使用方式的一种变种）
    • 兼容性良好，支持ie8+，及所有现代浏览器。
    • 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
    • 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
    • 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
  • symbol （svg的集合）
    • 支持多色图标了，不再受单色限制。
    • 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
    • 兼容性较差，支持 ie9+,及现代浏览器。
    • 浏览器渲染svg的性能一般，还不如png。

position 的定位方式

  • absolute：生成绝对定位的元素，相对于值不为 static 的第一个父元素进行定位
  • relative：生成相对定位的元素，相对于其正常位置进行定位
  • fixed：生成绝对定位的元素，相对于浏览器窗口进行定位（固定定位）
  • static：默认值, 无定位, 元素出现在正常的流中（忽略top,bottom,left,right z-index）

flex布局

Flexbox用于不同尺寸屏幕中创建可自动扩展和收缩布局,使用弹性布局可以有效的分配一个容器的空间,设置了flex布局后，子元素的float、clear和vertical-align属性就会失效

  • flex容器属性
    • flex-direction: row | row-reverse | column | column-reverse
    • flex-wrap: nowrap | wrap | wrap-reverse;

      默认情况下，项目都排列在一条轴线上，但有可能一条轴线排不下。

    • flex-flow属性：flex-direction和flex-wrap的简写，默认row nowrap
    • justify-content属性：定义项目在主轴上的对齐方式。
    • align-items属性：定义在交叉轴上的对齐方式
    • align-content属性：定义多根轴线的对齐方式
  • flex-box属性
    • order：定义项目的排列顺序。

      数值越小，排列越靠前，默认为0，可以是负值。

    • flex-grow：定义项目的放大比例

      默认值为0，即如果空间有剩余，也不放大。
      可以是小数，按比例占据剩余空间。

    • flex-shrink：定义项目的缩小比例

      默认值都为1，即如果空间不足将等比例缩小。
      如果有一个项目的值为0，其他项目为1，当空间不足时，该项目不缩小。
      负值对该属性无效，容器不应该设置flex-wrap。

    • flex-basis：定义在分配多余空间之前，项目占据的主轴空间。

      默认值为auto，浏览器根据此属性检查主轴是否有多余空间。

    • flex: flex-grow，flex-shrink和flex-basis的简写
    • align-self：允许单个项目与其他项目有不一样的对齐方式

      默认值为auto，表示继承父元素的align-items属性，并可以覆盖align-items属性。

清除浮动

  • 给父级使用:after伪元素 设置clear: both
  • 末尾处添加空div标签设置clear:both
  • 父元素设置overflow: hidden（必须定义width或zoom:1）
  • 父元素也设置浮动
  • 结尾处加br标签clear:both

水平居中、垂直居中

  • 水平居中
    • inline-block实现水平居中（text-align:center;）
    • margin和width实现水平居中
    • 绝对定位实现水平居中 （宽高确定/不确定） 
        .child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
    • 使用flex实现水平居中
    • 使用栅格布局grid实现水平居中
  • 垂直居中
    • 新增 inline-block 兄弟元素，设置 vertical-align
    • 绝对定位配合 transform 位移 
        .child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
    • 使用flex弹性盒子display:flex
    • 未知高度的块级子元素，采用table-cell配合vertical-align
    • 已知高度的块级子元素，采用绝对定位和负边距
    • 通过css3的translate变形实现

盒子模型

简单的说页面是由若干个盒模型（BOX）堆砌起来的，可以说每个HTML元素就是一个盒模型。
盒模型由外到内包括边距(margin)、边框（border）、填充(padding)、内容(content)

  • W3C标准模型 width = content (box-sizing: content-box)
  • IE模型 width = content + border + padding (box-sizing: border-box)

*可以设置box-sizing 属性进行模型设置

BFC （Block Formatting Content）

BFC：块格式化上下文(Block Formatting Context)。BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品

  • BFC的特性：
    • bfc 是一个独立的容器，容器内子元素不会影响容器外的元素
    • bfc的区域不会与float的元素区域重叠
    • 计算bfc的高度时，浮动元素也参与计算
    • 垂直方向上的距离由margin决定
    • 内部的Box会在垂直方向上一个接一个的放置
  • 以下条件会形成BFC：
    • 浮动元素 float:left | right | inherit（none除外）
    • position:absolute 或 fixed 定位
    • display:inline-block | inline-flex | table-cell
    • overflow:hidden | auto | scroll (visible除外)

边距重叠

相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。 这种合并外边距的方式被称为折叠　　 折叠结果遵循下列计算规则：

  • 两个相邻的外边距都是 正数 时，折叠结果是它们两者之间 较大的值
  • 两个相邻的外边距都是 负数 时，折叠结果是两者 绝对值的较大值
  • 两个外边距 一正一负 时，折叠结果是两者的相加的 和

使用 link 和 @import 有什么区别

  • link 属于HTML标签，除了加载CSS外，还能用于定 RSS等；@import 只能用于加载CSS (加载内容)
  • 页面加载的时，link 会同时被加载，而 @import 引用的 CSS 会等到页面被加载完再加载 (加载方式)
  • @import 只在 IE5 以上才能被识别，而 link 是HTML标签，无兼容问题 (兼容问题)

隐藏元素

  • display: none 元素会变得不可见，并且不会再占用文档的空间
  • visibility: hidden 只是简单的隐藏某个元素，但是元素占用的空间还存在
  • opacity: 0 设置0可以使一个元素完全透明
  • position: absolute 设置一个很大的 left 负值定位，使元素定位在可见区域之外
  • transform: scale(0) 将一个元素设置为缩放无限小，元素不可见 原来位置将被保留

超出文本自动省略

  • 单行

      .ellipsis: {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
  }

  • 多行

    • 利用css
      .ellipsis: {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
    • 利用伪类 :after
      <div id="box">
    <span id="text">文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略</span>
    <span class="ellipsis"></span>
  </div>

      #text {
    display: inline-block;
    height: 40px;
    width: 250px;
    line-height: 20px;
    overflow: hidden;
    font-size: 16px;
  }
  .ellipsis:after{
    display: inline;
    content: "...";
    font-size: 16px;
  }

css 三角形

.triangle {
  width:0;
  height:0;
  border-width:20px;
  border-style:solid;
  border-color:transparent transparent red transparent;
}

%、px、em、rem、vw、vh、vm

  • px就是pixel像素的缩写，相对长度单位。常用于PC端的字体单位
  • em相对于当前父元素的 font-size（并不是固定的）
  • rem相对于HTML根元素的 font-size
  • %百分比，一般来说就是相对于父元素
  • vw是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100
  • vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100
  • vm css3新单位，相对于视口的宽度或高度中较小的那个 1/100

CSS3 高级图形

  • 等腰梯形
  #o::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: #58a;
    /* 重点 */
    transform: perspective(.5em) rotateX(3deg);
    transform-origin: bottom;
  }
  • 直角梯形
  #o::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: #58a;
    /* 重点 */
    /*底部固定旋转后，导致文字偏上*/
    /*通过放大scale()解决此问题*/
    transform: perspective(.5em) rotateX(3deg) scale(1.3);
    transform-origin: left bottom; 左下角直角
    /* transform-origin: right top; 右上角直角 */
  }
  • 切角
    • 单切角
      {
    background: #58a;
    background: linear-gradient(-45deg,transparent 15px,#58a 0);
  }
    • 双切角
      {
    background: #58a;
    /*right设置切角放置在右下角*/
    background: linear-gradient(-45deg,transparent 15px,#58a 0) right,
                linear-gradient(45deg,transparent 15px,#655 0) left;
    background-size: 50% 100%;
    /*平铺了2次*/
    background-repeat: no-repeat;
  }
    • 四切角
      {
    background: #58a;
    background: linear-gradient(-45deg,transparent 15px,#58a 0) bottom right,
    linear-gradient(45deg,transparent 15px,#58a 0) bottom left,
    linear-gradient(135deg,transparent 15px,#58a 0) top left,
    linear-gradient(-135deg,transparent 15px,#58a 0) top right;
    background-size: 50% 50%;
    background-repeat: no-repeat;
  }
    • 圆切角
      {
    background: #58a;
    background: radial-gradient(circle at bottom right ,transparent 15px,#58a 0) bottom right,
    radial-gradient(circle at bottom left ,transparent 15px,#58a 0) bottom left,
    radial-gradient(circle at top left ,transparent 15px,#58a 0) top left,
    radial-gradient(circle at top right ,transparent 15px,#58a 0) top right;
    background-size: 50% 50%;
    background-repeat: no-repeat;
  }

文本不能选择

  {
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
  }

Meta 标签

1、定义文档的编码格式（H5的标准写法） <meta charset="UTF-8"> 2、声明指定的浏览器以及版本 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 当指定的content值为IE=edge,chrome=1时，优先使用 IE 最新版本和 Chrome。 假定客户端安装了Google Chrome Frame，则在IE中使用chrome的渲染引擎来渲染页面，否则，将会使用客户端IE最高的标准模式对页面进行渲染。 3、viewport移动设备屏幕可视区域 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

  • width viewport 宽度(数值/device-width)
  • height viewport 高度(数值/device-height)
  • initial-scale 初始缩放比例
  • maximum-scale 最大缩放比例
  • minimum-scale 最小缩放比例
  • user-scalable 是否允许用户缩放(yes/no) 4、忽略数字自动识别为电话号码 <meta content="telephone=no" name="format-detection" /> 5、忽略识别邮箱 <meta content="email=no" name="format-detection" /> 6、Pragma禁止本地缓存 <meta http-equiv="Pragma" contect="no-cache" /> 7、百度禁止转码 <meta http-equiv="Cache-Control" content="no-siteapp" /> 8、SEO优化部分
  <!-- 页面关键词 keywords -->
  <meta name="keywords" content="your keywords">
  <!-- 页面描述内容 description -->
  <meta name="description" content="your description">
  <!-- 定义网页作者 author -->
  <meta name="author" content="author,email address">
  <!-- 定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。 -->
  <meta name="robots" content="index,follow">

SEO

  1. 合理的title、description、keywords。
    • title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同。
    • description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；
    • keywords列举出重要关键词即可
  2. 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
  3. 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的 　　搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
  4. 重要内容不要用js输出：爬虫不会执行js获取内容
  5. 少用iframe：搜索引擎不会抓取iframe中的内容
  6. 非装饰性图片必须加alt
  7. 提高网站速度：网站速度是搜索引擎排序的一个重要指标

性能优化

content方向

  1. 减少HTTP请求：合并文件、CSS精灵、inline Image
  2. 减少DNS查询：DNS查询完成之前浏览器不能从这个主机下载任何文件。方法：DNS缓存、将资源分布到恰当数量的主机名，平衡并行下载和DNS查询
  3. 避免重定向：多余的中间访问
  4. 使Ajax可缓存
  5. 非必须组件延迟加载
  6. 未来所需组件预加载
  7. 减少DOM元素数量
  8. 将资源放到不同的域下：浏览器同时从一个域下载资源的数目有限，增加域可以提高并行下载量
  9. 减少iframe数量
  10. 减少404页面

Server方面

  1. 使用CDN
  2. 添加Expires或者Cache-Control响应头
  3. 对组件使用Gzip压缩
  4. 配置ETag
  5. Flush Buffer Early
  6. Ajax使用GET进行请求
  7. 避免空src的img标签

Cookie方面

  1. 减小cookie大小
  2. 引入资源的域名不要包含cookie

css方面

  1. 将样式表放到页面顶部
  2. 不使用CSS表达式
  3. 使用link不使用@import
  4. 不使用IE的Filter

Javascript方面

  1. 将脚本放到页面底部
  2. 将javascript和css从外部引入
  3. 压缩javascript和css
  4. 删除不需要的脚本
  5. 减少DOM访问
  6. 合理设计事件监听器 图片方面
  7. 优化图片：根据实际颜色需要选择色深、压缩
  8. 优化css精灵
  9. 不要在HTML中拉伸图片
  10. 保证favicon.ico小并且可缓存

重绘和回流

重绘

改变了背景颜色、边框、字体的颜色，浏览器重新绘制颜色的过程称为重绘

回流

当页面的元素发生变化的时候（宽、高、位置、创建元素），都会导致整个页面重排，浏览器会重新计算结构位置，重新渲染页面，称为DOM回流 回流必定会发生重绘，重绘不一定会引发回流。

avatar
文章
阅读
粉丝