一文解决前端面试①----HTML与CSS(最详细总结两剑客☝)

354 阅读16分钟

写在前面

  大家好,我是Kerwin丶R,一路走来,受到了许许多多人的帮助,也拜读了各方大神的文章,现在把自己的笔记慢慢全部总结整理开源,希望能够帮助到更多的人,能够和您一起进步。如果文章有问题,希望能够及时提出,以免误导更多的人。
  我喜欢精炼的答案,不喜欢长篇大论的回答,我会尽力把我的答案变得详细且易懂。如果想要提升自己,还需要根据相应的点去了解更多的原理。

食用对象:初级前端 & 在校生
美味指数:😋😋😋😋😋

如果您是大佬,先给您问个好,建议您Alt+F4,这篇文章不适合您啦😛

HTML


1.什么是DOCTYPE?⭐⭐⭐

  DOCTYPE是document type的简写,它是一种标记语言的文档类型声明, 即告诉浏览器当前 HTML 是用什么版本编写的,应该用何种规范来解析页面。 在W3C标准出来之后,浏览器对页面的渲染有了统一的标准,这种渲染方式叫做标准模式。 <!DOCTYPE>不存在或者形式不正确会导致HTML或XHTML文档以混杂模式呈现, 就是把如何渲染html页面的权利交给了浏览器,有多少种浏览器就有多少种展示方式。


2.html语义化标签:⭐⭐⭐⭐

 含义:让标签有自己的含义
 1.让人更容易读懂(增加代码可读性),便于团队开发和维护
 2.方便其它设备以语义的方式来渲染网页,让搜索引擎更容易读懂(SEO)


3.src与href的区别⭐⭐⭐

 src:指向外部资源位置,指向的内容将会嵌入到文档中当前标签所在位置,替换当前内容, 同时会暂停其他资源的下载和处理,直至将该资源加载,编译,执行完毕,常用的有script、img。
 href(Hypertext Reference的缩写,我一般读作HyRefer): 表示超文本引用,用来建立当前元素和文档之间的链接,同时会并行下载资源并且不会停止对当前文档的处理,常用的有:link、a。


4.meta标签⭐⭐⭐

 <meta>标签提供关于 HTML 文档的元数据。它不会显示在页面上,但是对于机器是可读的。 可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务,主要属性有http-equiv和name


5.块级元素和内联元素⭐⭐⭐⭐

  • 块级元素(独占一行):div, h1, h2, table, form, ul, ol, p
  • 内联元素(不独占一行):span, img, input, button, a, i, label
  • 区别:
    块级元素总是占据一行,高度,宽度等都能设置
    内联元素和其他元素在同一行的,并不自己占据一行,高度,宽度不能控制,只能容纳文本或者其他内联元素,margin只有left和right起作用

6.SVG和Canvas的区别⭐⭐⭐

 SVG:SVG 是一种使用 XML 描述 2D 图形的语言,绘制出来的每一个图形元素都是独立的DOM节点,可方便后期绑定事件或修改,不适合游戏应用。
 Canvas:Canvas 通过 JavaScript 来绘制 2D 图形,可以看做是一个画布,其绘制出来的图形为标量图,依赖分辨率,适合做游戏。


7.h5新增标签⭐⭐⭐⭐

  • header标签包含引导和导航等,通常包含h1~h6、搜索框、logo等。
  • footer标签一般配合address标签(显示地址),包含作者信息、相关链接等。
  • nav标签一般包含多个a标签,构建导航组件。
  • aside标签主要装载广告、侧边栏。
  • article标签包含文章,一般内嵌header、footer、h1、p标签。
  • section标签可以用在以上任一一个标签中划分组件。
  • hgroup顾名思义是h1~h6的集合。

CSS


1.CSS盒模型⭐⭐⭐⭐⭐

组成:content(内容), padding(内边距), border(边框), margin(外边距)

1:content-box(W3C标准)(默认) width: 表示content:的宽度,不包含padding 和 border
2:border-box(IE标准) width: 表示content + padding + border 的总和
box-sizing可以控制盒模型,默认为content-box

image.png

image.png

2.margin重叠与margin负值问题⭐⭐⭐⭐

margin重叠:
 1.相邻元素的margin-top和margin-bottom会发生重叠
  2.相邻元素的margin-right和margin-left不会发生重叠
margin负值:
  1.margin-top和margin-left负值,自身元素向上,向左移动
  2.margin-right负值,右侧元素左移,自身不受影响
  3.margin-bottom负值,下方元素上移,自身不受影响


3.BFC⭐⭐⭐⭐⭐

含义:块级格式化上下文,一块独立渲染区域,内部元素的渲染不会影响边界以外的元素
1.常见的触发BFC的条件

  • html根元素
  • float不是none的元素
  • position是absolute或fixed的元素
  • overflow不是visible的块元素
  • display是flex inline-block,table-cell的元素 2.BFC的作用
  • 避免外边距重叠
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: #07d268;
            margin-bottom: 50px;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: #833cc9;
            margin-top: 20px;
        }

        .wrap {
            overflow: hidden;
        }  
    </style>
    <div class="box1"></div>
    <div class="wrap"><div class="box2"></div></div>
  • 清除浮动(给父级元素加上overflow: auto)
  • 阻止元素被浮动元素覆盖(给被覆盖的元素加上overflow: auto)

4.三栏布局⭐⭐⭐⭐

圣杯布局和双飞翼布局
目的:

  • 三栏布局,中间一栏最先加载和渲染(内容最重要)
  • 两侧内容固定,中间内容随着宽度自适应
  • 一般用于PC网页
    技术总结:
  • 使用float布局
  • 两侧使用margin负值,以便和中间内容横向重叠
  • 防止中间内容被两侧覆盖,一个用padding一个用margin 区别:
  • 双飞翼布局采用margin留出空位,而圣杯布局采用padding
  • 双飞翼布局采用margin-left负值后不用再根据自身定位,而圣杯布局需要 双飞翼布局代码:
    <style>
        body {
            min-width: 550px
        }

        .column {
            float: left;
        }

        #center {
            width: 100%;
            height:200px;
            background-color: #cccccc;
        }

        #main {
            margin: 0 190px 0 190px;
        }

        #left {
            background-color: #ffff00;
            width: 190px;
            height:200px;
            margin-left: -100%;
        }
        #right {
            background-color: red;
            width: 190px;
            height:200px;
            margin-left: -190px;
        }
    </style>

    <div id="center" class="column">
        <div id="main">
            this is center
        </div>
    </div>
    <div id="left" class="column">this is left</div>
    <div id="right" class="column">this is right</div>

圣杯布局代码:

    <style>
        body {
            min-width: 550px
        }

        #header {
            text-align: center;
        }

        #container {
            padding-left: 200px;
            padding-right: 150px;
        }

        #container .column {
            float: left
        }

        #center {
            background-color: #ccc;
            width: 100%
        }

        #left {
            position: relative;
            background-color: yellow;
            width: 200px;
            margin-left: -100%;
            right: 200px
        }

        #right {
            background-color: red;
            width: 150px;
            margin-right: -150px;
        }

        #footer {
            clear: both;
            text-align: center;
            background-color: #f1f1f1
        }
    </style>

    <div id="container">
        <div id="center" class="column">this is center</div>
        <div id="left" class="column">this is left</div>
        <div id="right" class="column">this is right</div>
    </div>

5. 两栏布局⭐⭐⭐⭐

知道了三栏布局,想来两栏布局对你一定不在话下,下面介绍三种两栏布局的方式,一定要掌握。

  • 绝对定位方式
    <style>
        .wrap {
            position: relative;
            width: 100%;
            height: 200px;
        }
        .box1 {
            position: absolute;
            width: 150px;
            height: 200px;
            background-color: #d43131;
        }
        .box2 {
            position: absolute;
            left: 150px;
            right: 0;
            height: 200px;
            background-color: #07d268;
        }
    </style>
    <div class="wrap">
        <div class="box1">1</div>
        <div class="box2">2</div>
    </div>
  • 浮动方式
    <style>
        .box1 {
            float: left;
            width: 150px;
            height: 200px;
            background-color: #d43131;
        }
        .box2 {
            margin-left: 150px;
            height: 200px;
            background-color: #07d268;
        }
    </style>
    <div class="wrap">
        <div class="box1">1</div>
        <div class="box2">2</div>
    </div>
  • flex方式
    <style>
        .wrap {
            display: flex;
            height: 200px;
        }
        .box1 {
            width: 150px;
            height: 200px;
            background-color: #d43131;
        }
        .box2 {
            flex: 1;
            height: 200px;
            background-color: #07d268;
        }
    </style>
    <div class="wrap">
        <div class="box1">1</div>
        <div class="box2">2</div>
    </div>

image.png


5.关于浮动⭐⭐⭐⭐⭐

浮动的特点:
  浮动会使元素脱离标准流,不占据页面空间,会覆盖标准流的元素,但不会覆盖标准流元素的文字
  元素会排列在父层元素的左边或左边,或排列在已经浮动的元素的左边或者右边 清除浮动的方法:

  • 触发BFC
    给父级元素加上overflow: auto
  • 利用伪元素(clearfix)
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}
  • 多设置一个兄弟元素,加上clear:both,其他方法都大同小异。

6.定位⭐⭐⭐⭐⭐

  • static:默认定位
  • relative:依据自身定位
  • absolute:依据最近一层的定位元素定位
  • fixed:固定定位,元素的位置相对于浏览器窗口是固定位置
  • inherit:继承父元素的定位
  • sticky:粘性定位
    依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。
    它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。

7.水平垂直居中⭐⭐⭐⭐⭐

重点,建议尝试多种方法

  • 利用absolute绝对定位,top和left: margin-left和margin-top都取负值,为元素自身宽高的一半
  • 利用absolute绝对定位,top和left: 50%,transform: translate(-50%, -50%)
  • 利用absolute绝对定位:top, left, bottom, right都设置为0 ,margin: auto
  • 利用flex
.father {
    display: flex;
    justify-content: center;
    align-items: center;
}
  • 利用grid,网格布局

PS:行内元素还可以:
 水平居中:text-align: center
 垂直居中:line-height的值等于height


8.line-height的继承⭐⭐⭐

  • 父亲的line-height为具体的值,如30px,子孙则继承该值,
  • 如果为比例,如2/1.5,则继承该比例,计算还是根据自己的font-size计算
  • 如果为百分比,如200%,则继承根据父亲的font-size乘以比例计算出来的值。(考点)

9.长度单位⭐⭐⭐⭐

  • px:相对长度单位。像素px是相对于显示器屏幕分辨率而言的
  • em:相对长度单位,相对于父元素,不常用
  • rem:相对长度单位,相对于根元素,常用于响应式布局

10.响应式布局⭐⭐⭐⭐

含义:响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局

实现方式:

1.媒体查询
2.百分比布局
  通过百分比单位,可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化,从而实现响应式的效果
3.rem布局
  REM是CSS3新增的单位,移动端的支持度很高,rem单位都是相对于根元素html的font-size来决定大小的
4.视口单位
 css3中新的单位vw/vh
 vw 相对于视窗的宽度,1vw 等于视口宽度的1%,即视窗宽度是100vw
 vh相对于视窗的高度,1vh 等于视口高度的1%,即视窗高度是100vh
 vmin vw和vh中的较小值
 vmax vw和vh中的较大值
 可以搭配rem使用

响应式设计与自适应设计的区别:

  • 响应式开发一套界面,通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容;
  • 自适应需要开发多套界面,通过检测视口分辨率,来判断当前访问的设备是pc端、平板、手机,从而请求服务层,返回不同的页面。

11. CSS选择器:⭐⭐⭐⭐

  • 类选择器:.X
  • id选择器:#X
  • 标签选择器:div
  • 通用选择器:*
  • 后代选择器:X Y
  • 子元素选择器:X>Y
  • 属性选择器:[attr],选择所有包含attr属性的
  • 相邻兄弟选择器:A+B,B是A的下一个兄弟节点,B紧跟A,匹配B
  • 通用兄弟选择器 A~B B是A之后的兄弟节点,匹配B,B可以使很多个
  • 伪类选择器:例子:   :link 未访问的链接
      :visited 已访问的链接
      :hover 鼠标移动到链接上
      :active 选定的链接
      :first-child等等
  • 伪元素选择器   ::before
      ::after

伪类和伪元素的区别:

  • 伪类:   为了能够表达无法通过简单的选择器表达的信息,或者说用来添加一些选择器的特殊效果,一般为单个冒号加一个伪类名称
  • 伪元素:   伪元素用于创建一些不在文档树中的元素,并为其添加样式,虽然用户可以看到这些文本,但是这些文本实际上不再文档树中

选择器权重:

  • 内联样式,如: style="...",权值为1000。
  • ID选择器,如:#content,权值为100。
  • 类,伪类、属性选择器,如.content,权值为10。
  • 类型选择器、伪元素选择器,如div p,权值为1。
  • 通配符、子选择器、相邻选择器等。如* > +,权值为0000。
  • 如果有!important优先级将会被提升到最高

12.@import和link的区别 ⭐⭐⭐

  • link是html提供的标签,@import是css的语法规则,只能加载在style标签内和css文件中
  • link不存在兼容问题,@import对低版本可能存在兼容问题
  • 加载页面时,link标签引入的 CSS 被同时加载;@import引入的 CSS 将在页面加载完毕后被加载

13.display: none和visibility: hidden和opacity: 0的区别⭐⭐⭐⭐

  • 空间占据问题 display: none 隐藏后的元素不占据任何空间
    visibility: hidden 和opacity: 0隐藏的元素空间依旧存在。
  • 回流重绘问题 display: none 隐藏产生回流和重绘(reflow 和 repaint)
    visibility: hidden和opacity: 0只产生重绘
  • 继承性 display:none一旦设置自己和后代将会消失
    visibility具有继承性,如果将子元素的visibility设置回visible,name子元素将会显示出来
    opacity: 0 也会被子元素继承,但是不能通过设置子元素opacity: 0使其重新显示
  • 事件绑定 display: none和visibility: hidden时绑定的事件不能触发
    opacity: 0时绑定的事件能够触发。
  • 过渡动画 transition对于display和visibility是无效的
    transition对于opacity是有效的

14.flex ⭐⭐⭐⭐⭐

作为平时最常用的布局方式,这是必须详细掌握的,推荐阮一峰--flex ,以下是上面文章的部分总结:

flex是弹性盒子,任何一个容器都可以指定为 Flex 布局。
给容器设置display: flex后,它的所有子元素自动成为容器成员
容器默认存在两根轴:水平的主轴和垂直的交叉轴
容器有6个属性:

  • flex-direction
    决定主轴的方向
    flex-direction: row | row-reverse | column | column-reverse
  • flex-wrap
    如果一条轴线排不下,如何换行。
    flex-wrap: nowrap | wrap | wrap-reverse
  • flex-flow
    是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
  • justify-content
    定义了项目在主轴上的对齐方式。
    justify-content: flex-start | flex-end | center | space-between | space-around
  • align-items
    定义项目在交叉轴上如何对齐
    align-items: flex-start | flex-end | center | baseline | stretch(默认值)
  • align-content
    定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
    align-content: flex-start | flex-end | center | space-between | space-around | stretch; 子元素的6个属性
  • order
    定义项目的排列顺序。数值越小,排列越靠前,默认为0
  • flex-grow
    定义项目的放大比例,默认为0
  • flex-shrink
    定义了项目的缩小比例,默认为1
  • flex-basis
    定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小
  • flex
    是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选
  • align-self
    允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto
    align-self: auto | flex-start | flex-end | center | baseline | stretch;

15.画三角形或梯形⭐⭐⭐⭐

  • CSS方法:
<style>
    .box {
        width: 0;
        height: 0;
        border-right: 100px solid transparent;
        border-left: 100px solid transparent;
        border-top: 100px solid #d43131;
        border-bottom: 100px solid transparent;
    }
</style>
    <div class="box"></div>

image.png
如果需要画梯形就改变width的值即可

  • Canvas方法:
<style>
    #box2 {
        width: 300px;
        height: 300px;
    }
</style>
    <canvas id="box2"></canvas>
    const canvas = document.querySelector('#box2')
    const ctx = canvas.getContext('2d')
    ctx.beginPath()
    ctx.moveTo(0, 0);
    ctx.lineTo(100, 0);
    ctx.lineTo(0, 50);
    ctx.closePath(); 
    ctx.fillStyle="#8989e7";
    ctx.fill();

image.png


16. z-index⭐⭐⭐

  关于z-index,起初我只知道设置position后z-index大的就会在上面,但是实际做项目却出现了许许多多的问题
  推荐一篇讲z-index很全面的文章彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index

  • 首先需要比较两个元素是否在同一个层叠上下文里,如果是再根据以下层叠顺序图比较,如果不是,就需要比较他们层叠上下文的层叠顺序  PS:层叠顺序表

17. CSS3新特性⭐⭐⭐⭐

  • 边框圆角 border-radius
  • 阴影box-shadow
  • 选择器:
    属性选择器 [attr]:选择包含attr属性的标签 [attr^=value]:选择attr属性值以value开头的标签
    伪类选择器 first-child, nth-child(n)
  • 颜色渐变 linear-gradient
  • 2D变换
      translate():对元素进行进行移动
      scale():对元素进行缩放
      rotate():围绕中心旋转,正值顺时针,负值逆时针
  • 动画 transition animation
  • flex布局

18. DOM树和CSSOM的构建过程⭐⭐

DOM树和CSSOM的构建过程其实差不多

  1. 首先解析文件(HTML文件,CSS文件)
  2. 将字节转换成字符
  3. 确定tokens(标签)
  4. 将tokens转换成节点
  5. 最后根据节点构建DOM树 || CSSOM PS:构建DOM树的图和CSSOM的图,一看就明白

image.png

image.png


19. 回流和重绘⭐⭐⭐⭐⭐

  • 回流(重排或布局)

当渲染树中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建,这就称为回流

  • 重绘 当渲染树中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。则就叫称为重绘

  • 回流和重绘发生的时机: 首先,回流一定会发生重绘,重绘不一定会回流,在页面第一次加载时一定会回流和重绘

  • 会发生回流的例子: 页面首次渲染的时候
    添加或删除可见的DOM元素
    元素的位置发生变化
    元素的尺寸发生变化
    内容发生变化,比如文本变化(文字大小、行高发生变化)
    浏览器的窗口尺寸变化(因为回流是根据视口的大小来计算元素的位置和大小的)

  • 列举几个会发生重绘的元素属性: color
    background-color
    box-shadow
    border-radius
    visibility

  • 如何减少回流和重绘

  1. DOM操作时很贵的,要尽可能少得操作DOM,通过合并多次DOM样式的修改,来减少回流和重绘的发生次数
  2. 如果需要对一个DOM进行大量操作,可以先用display:none进行隐藏,操作后再显示,这样就只引发两次回流和重绘
  3. 对于复杂动画效果,使用绝对定位让其脱离文档流
  4. 使用css3硬件加速,可以让transform、opacity、filters这些动画不会引起回流重绘
  5. 浏览器队列机制:回流和重绘的开销很多,所以浏览器维护一个队列,当有回流和重绘时会放入这个队列,当达到了一定数量或者达到了一定的时间间隔才会触发,这样就会让多次变成一次,但是有一些元素会强制触发队列,需要注意   offsetTop、offsetLeft、offsetWidth、offsetHeight
      scrollTop、scrollLeft、scrollWidth、scrollHeight
      clientTop、clientLeft、clientWidth、clientHeight
      getComputedStyle()
      getBoundingClientRect

20. animation动画属性⭐⭐

  • name:keyframe名称。
  • duration:完成动画所花费的时间,以秒或毫秒计。
  • timing-function:动画的速度曲线。
  • delay:在动画开始之前的延迟。
  • iteration-count:动画应该播放的次数。
  • direction:是否应该轮流反向播放动画。

参考文章:
你真的了解回流和重绘吗
彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index
阮一峰--flex

写在最后

  非常感谢您到阅读到最后,如果您觉得对您有帮助的话,希望能够点个赞,加个关注,后续会把前端各部分知识总结发文,有任何问题都可以联系我,希望能够一起进步。
  最后祝您前程似锦,我们各自攀登,高处相见🌈!