【面试梳理1】HTML和CSS_4.28

FE小辣鸡
234 阅读5分钟

注：以下内容为随手记，属于暂未成形的文章，请勿参考

HTML

语义化

  • 代码可读性高，便于维护
  • 有利于无障碍引擎对内容的解析
  • 结构清晰，对搜索引擎优化友好

DOCTYPE的作用

<!DOCTYPE>指定浏览器用什么文档类型去解析

严格模式：用浏览器最高标准去运行

混杂模式：兼容模式去运行

常见meta标签

<!--H5标准声明，使用 HTML5 doctype，不区分大小写-->
<!DOCTYPE html>
<!--标准的 lang 属性写法-->
<head lang="en">
<!--声明文档使用的字符编码-->
<meta charset=’utf-8′>
<!--优先使用指定浏览器使用特定的文档模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1″ />
<!--页面描述-->
<meta name="description" content="不超过150个字符" />
<!-- 页面关键词-->
<meta name="keywords" content="" />
<!--网页作者-->
<meta name="author" content="name, email@gmail.com" />
<!--搜索引擎抓取-->
<meta name="robots" content="index,follow" />
<!--避免IE使用兼容模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--设置页面不缓存-->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

src和href

  • src：标签替换标签（可设置宽高），替换原标签，阻塞DOM解析
  • href：用于引用其他资源或设置锚点，不阻塞DOM解析

link和@import

  • link不仅可以是CSS样式，也可以是JS等，@import只能是CSS
  • link不会被DOM解析阻塞，@import必须等DOM解析完后才会加载

title和alt

都是鼠标移上去显示的文字

  • alt是img特有的，可以在图片无法显示时展示的文字
  • title大部分HTML标签都可以使用的，作为解释说明

HTML5新标签

布局类：<header> <main> <aside> <nav> <section> <article> <footer>

功能类：<canvas> <video> <audio> <svg>

DOM

Node和Element

Node是一个基类，DOM中的Element，Text和Comment都继承于它。

详见：浅析Node与Element的区别

DOM事件

DOM 事件流

📌 1-5是捕获过程，5-6是目标阶段，6-10是冒泡阶段

冒泡指事件从最内层元素开始向上传播，直到window

捕获指事件从最外层元素开始向最内层元素传播

代理/委托指将事件绑定到上一层元素上，到用户操作子元素的时候，通过事件冒泡传递到上一层元素，从而执行响应的操作。

优点：

  • 只绑定一次事件，无频繁访问DOM，性能较高
  • 当有新DOM生成时，无需重复绑定事件，代码清晰简洁
// 兼容浏览器的事件绑定
function bindEvent(obj, type, fn) {
  if (obj.addEventListener) {
    obj.addEventListener(type, eventFn);
  } else {
    obj.attachEvent("on" + type, eventFn);
  }
  function eventFn(e) {
    const e = e || window.event;
    const target = e.target || e.srcElemet;
    fn && fn(target, e);
  }
}

const e = e || window.event;
// 阻止默认事件
e.preventDefault();
// 停止冒泡
e.stopPropagation();

CSS

行内和块级元素

行内元素: <span> <a> <i> <input> <img> <label>

块级元素: <div> <p> <h1>-<h5> <ul> <li> <ol><dl> table

选择器优先级

!important -> 行内样式 -> #id -> .class -> 元素和伪元素 -> * -> 继承 -> 默认

盒模型

box-sizing: content-box;
box-sizing: border-box;

标准盒模型 width和height只包括content，不包括padding、border

IE 盒模型 width和height包括content、padding和border

inline-block间隙

行内块元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理。空白符占一定宽度

解决方法：

  • 结束符和开始符写在同一行
  • 父元素中设置font-size: 0，在子元素上重置正确的font-size
  • 子元素设置浮动float: left

BFC*

独立的容器，容器内的元素布局不会受外部的影响。

条件：

  • 根元
  • float不为none
  • position为absolute或fixed
  • display为inline-block flex tabel-cell table-caption
  • overflow不为visible

场景：

  • 父元素高度坍塌、清除浮动
  • 外边距重叠

清除浮动

// 方法1
.box:after {
  display: block;
  clear: both;
  content: '';
  visibility:hidden;
  height: 0;
}

// 方法2
.box {
  overflow: hidden;
}

伪类和伪元素区别

伪类，处于特定状态下的CSS类

伪元素，创建了一个文档外的元素

一般伪类是单冒号，如:hover，而伪元素是双冒号::before

布局*

flex

参考：

flex: <flex-grow> <flex-shrink> <flex-basis>
flex:1 === 1 1 auto

Grid

参考：

place-items: <align-items> <justify-items>

居中

2021-03-14_151145.png

两列、三列、圣杯

// 两列
.left {
  float: left;
  width: *px;
}
.right {
  margin-left:*px;
}

// 三列、圣杯
.box{
  display: flex;
}
.left {
  width: *px;
}
.middle {
  flex: 1;
}
.right {
  width: *px;
}

布局适配

rem、em、vh/vw*

rem：相对于标签里设置字体的大小，比如：

html {
  font-size: 12px;
}
div {
  width: 10rem; // 10 * 12 = 120px;
}

em：相对于自己或上一层有设置字体标签的大小，比如：

parent {
  font-size: 12px;
}
child {
  width: 10em; // 10 * 12 = 12px;
}

vh/vw：针对于窗口宽高的百分比，10vh相对于视窗高度的10%

1px问题

移动设备的DPI大于1，1px实际上最终会被多个物理像素渲染，导致看起来很粗

注：DPR 设备像素/CSS像素 = 2

解决方法：

1、利用 transfrom 的 scale 缩放来实现

2、利用 background 的 line-gradient 线性渐变来实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>1px</title>
    <style>
      /* --- 缩放实现物理 1px 开始 ---- */
      .scale-line {
        height: 45px;
        width: 100%;
        margin-top: 10px;
        margin-bottom: 50px;
        position: relative;
      }
      .scale-line::after {
        /* 
          在这里自定义 border 的样式
        */
        border-width: 1px;
        border-color: #222;
        border-style: solid;
        border-radius: 10px;
      }

      .border-1px::after {
        content: '';
        box-sizing: border-box;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        pointer-events: none;
      }
      @media only screen and (-webkit-min-device-pixel-ratio: 2) {
        .border-1px::after {
          right: -100%;
          bottom: -100%;
          -webkit-transform: scale(0.5);
          transform: scale(0.5);
          /* 1.5 * 10px */
          border-radius: 15px;
        }
      }
      @media only screen and (-webkit-min-device-pixel-ratio: 3) {
        .border-1px::after {
          right: -200%;
          bottom: -200%;
          -webkit-transform: scale(0.33);
          transform: scale(0.33);
          /* 2 * 10px */
          border-radius: 20px;
        }
      }
      /* --- 缩放实现物理 1px 结束 ---- */

      /* --- 线性渐变实现物理 1px 开始 ---- */
      .gradient-line {
        position: relative;
        margin-top: 20px;
      }
      .line::after {
        height: 1px;
        content: '';
        position: absolute;
        background: #222;
        top: 0;
        left: 0;
        right: 0;
      }
      @media only screen and (-webkit-min-device-pixel-ratio: 2) {
        .line::after {
          background: -webkit-linear-gradient(top, #222, transparent);
          background: linear-gradient(to bottom, #222, transparent);
        }
      }
      @media only screen and (-webkit-min-device-pixel-ratio: 3) {
        .line::after {
          background: -webkit-linear-gradient(
            top,
            #222,
            transparent,
            transparent
          );
          background: linear-gradient(
            to bottom,
            #222,
            transparent,
            transparent
          );
        }
      }
      /* --- 线性渐变实现物理 1px 结束 ---- */
    </style>
  </head>
  <body>
    <div>1、缩放实现物理 1px:</div>
    <div class="scale-line border-1px"></div>

    <div>2、线性渐变实现物理 1px:</div>
    <div class="gradient-line line"></div>
  </body>
</html>

适配 PC、手机和平板的布局方案

  • vh和vw
  • 淘系flexible和rem
  • flex和px

CSS3 新特性*

transition：过渡

transform：旋转、缩放、移动或者倾斜

animation：动画

gradient：渐变

shadow：阴影

border-radius：圆角

transition: property duration timing-function delay;
// css属性名称   过渡时间  过渡时间曲线  过渡延迟时间

transform:rotate(30deg)  旋转
transform:translate(100px,20px)  移动
transform:scale(2,1.5);  缩放
transform:skew(30deg,10deg);  扭曲

animation: move 1s linear forwards;
// 定义动画的时间  duration 
// 动画的名称
// 动画的贝塞尔曲线
// animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。 
// forwards  当动画完成后，保持最后一个属性值

CSS和JS做动画

CSS 做动画：调用GPU能力，帧率高（60）。动态设置困难，适合效果固定的动画。

JS 做动画：JavaScript引擎，使用CPU计算，帧率低（30-50）。动态设置简单，适合效果复杂且动态效果高的动画。

参考

avatar
文章
阅读
粉丝