一.BFC

二.清除浮动

三.哪些移动端布局

答：流式布局-百分比、弹性盒子-flex、网格布局-grid、rem/em、vm/vh
rem em
em相对长度单位，其参照当前元素字号大小，如果当前元素未设置字号则会继承其祖先元素字号大小例如.box {font-size：16px;}则1em = 16px .box {font-size：32px; }则1em = 32px，0.5em = 16px

rem相对长度单位，其参照根元素（html）字号大小例如html {font-size：16px;}则1rem = 16px html {font-size：32px;}则1rem = 32px，0.5rem = 16px

vw 相对于视口的宽度。视口被均分为100单位的vw(即浏览器可视区) 100vw = 可视区宽度

vh 相对于视口的高度。视口被均分为100单位的vh(即浏览器可视区) 100vh = 可视区高度

四.flex 布局

flex:1，这里的1表示宽度比例，具体数值取决于其它盒子的flex值，由于这里其它盒子宽度固定，所以中间栏会自动填充 flex是flex-grow flex-shrink flex-basis
order :定义项目的排列顺序。数值越小，排列越靠前，
allign-self:allign-self属性允许单个项目有与其他项目不一样的对齐方
式，可覆盖align-items属性。默认值为auto,表示继承父元
素的align-items属性，如果没有父元素，则等同于stretch。

关于使用flex居中的方法
关于flex布局详情可以查阅MDN文档,我这里只列举常见问题

五.居中问题(重点)

居中问题真的是老生常谈的话题,基本上每次面试都会被问到,毕竟在样式的时候居中真的无处不在,关于居中的文章网上比比皆是,好好记住4-5种,以后面试跟工作没有任何问题啦
关于居中的好文的传送门
常见的居中分很多中,比如水平居中,垂直居中,水平垂直居中,定宽高和不定宽高,我们分定宽高和不定宽高来讨论水平垂直居中的几种方式

1.定宽高

定位+margin:auto+left+right+ top+bottom

<!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>Document</title>
    <style>
        .container{
    
    
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            position: relative;
        }
        p{
    
    
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto ;
        }
    </style>
</head>
<body>
    <div class="container">
        <p></p>
    </div>
</body>
</html>

定位+margin :-50%

<style>
       .container{
    
    
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            position: relative;
        }
        p{
    
    
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            top:0;
            bottom: 0;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px; 
        }
    </style>
</head>
<body>
    <div class="container">
        <p></p>
    </div>
</body>

定位+transform

 <style>
        .container{
    
    
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            position: relative;
        }
        p{
    
    
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            top:0;
            bottom: 0;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%); 
        }
    </style>

flex布局

  .container {
    
    
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        p {
    
    
            width: 100px;
            height: 100px;
            background: red;

        }

grid布局 margin: auto;

 .container {
    
    
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            display: grid;
        }

        p {
    
    
            width: 100px;
            height: 100px;
            background: red;
            margin: auto;
        }

2. 不定宽高

绝对定位 + transform

<!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>Document</title>
    <style>
        .container{
    
    
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            position: relative;
        }
        p{
    
    
           
            background: red;
            position: absolute;
            top:0;
            bottom: 0;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%); 
        }
    </style>
</head>
<body>
    <div class="container">
        <p>好好学习吧</p>
    </div>
</body>
</html>

table-cell

.container{
    
    
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        p{
    
    
           
            background: red;
            display: inline-block;
            
        }

flex布局

.container{
    
    
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        p{
    
    
           
            background: red;
        }

flex + margin:auto

 .container{
    
    
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            display: flex;
            
        }
        p{
    
    
            margin: auto;
            background: red;
        }

grid + flex布局

.container{
    
    
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            display: grid;
            
        }
        p{
    
    
            
            background: red;
            align-self: center;
            justify-self: center;
        }

gird + margin布局

.container{
    
    
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            display: grid;
            
        }
        p{
    
    
            
            background: red;
            margin: auto;
        }

把水平居中或者垂直居中分开讨论

一、内联元素居中布局

水平居中

行内元素可设置：text-align: center;
flex布局设置父元素：display: flex; justify-content: center;

垂直居中

单行文本父元素确认高度：height === line-height
多行文本父元素确认高度：disaply: table-cell; vertical-align: middle;

二、块级元素居中布局

水平居中

定宽: margin: 0 auto;
不定宽：参考上诉例子中不定宽高例子。

垂直居中

position: absolute设置left、top、margin-left、margin-to(定高)；
position: fixed设置margin: auto(定高)；
display: table-cell；
transform: translate(x, y)；
flex(不定高，不定宽)；
grid(不定高，不定宽)，兼容性相对比较差；

绝对定位和负magin值

六.盒子模型

IE6混杂模式盒子模型在怪异模式下以及在ie6及以下浏览器box -sizing : border-box

width = content-width + padding-width + border-width
height = content-height + padding-height + border-height

标准盒模型 box -sizing : :content -box

width = content-width
height = content-height

七.H5问题

1. 你怎么理解的H5的语义化

语义化，指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化），便于开发者阅读，维护和写出更优雅的代码的同时，让浏览器的爬虫和辅助技术更好的解析。我们选择正确的标签,来描述正确的内容
对于标签经历过一下几个阶段

荒野阶段,后端来写布局.使用的是table布局,造成解构混乱,代码可读性差,后期维护特别麻烦
美工阶段来做布局的时候,使用div+css来做,统一写成div这样页面缺少语义化,减少了代码的可读性
目前,前端开发,使用语义化标签来布局有以下好处
对人：
便于团队的开发和维护。
在没有加载 CSS 的情况下也能呈现较好的内容结构与代码结构，易于阅读。
用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
对机器：
有利于 SEO ，搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重,可以提高搜索引擎的有效爬取，提高网站流量。
方便其他设备的解析（如屏幕阅读器、盲人阅读器等），利于无障碍阅读，提高可访问性。

2. 用过哪些H5标签

内容:

header 页眉通常包括网站标志、主导航、全站链接以及搜索框。
footer 页脚，只有当父级是body时，才是整个页面的页脚。
article 包含像报纸一样的内容= =||是这么理解的，表示文档、页面、应用或一个独立的容器
aside 指定附注栏，包括引述、侧栏、指向文章的一组链接、广告、友情链接、相关产品列表等。
mian 页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
nav 标记导航，仅对文档中重要的链接群使用。
title 定义文档的标题，显示在浏览器的标题栏或标签页上。它只可以包含文本，若是包含有标签，则包含的任何标签都不会被解释。
功能标签:
1.canvas: 列举使用方法

<canvas id="canvas" width="300" height="300"> 
  抱歉，您的浏览器不支持canvas元素
  （这些内容将会在不支持<canvas>元素的浏览器或是禁用了JavaScript的浏览器内渲染并展现）
</canvas>

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 
ctx.fillStyle = 'green'; 
ctx.fillRect(10, 10, 100, 100);

void ctx.fillRect(x, y, width, height);

x
矩形起始点的 x 轴坐标。
y
矩形起始点的 y 轴坐标。
width
矩形的宽度。
height
矩形的高度

video 常用属性
poster:当视频还没有完全下载，或者用户还没有点击播放前的默认显示的封面。默认显示当前视频文件
的第一副画面–>
注意事项: 当设置宽高的时候，-般情况下只会设置宽度或者高度，让其自动的等比缩放。如果同
时设置宽度和高度，那么视频并不会真正的调整到设置的宽高，除非设置的值刚好是等比例的

重点说明source的使用: 因为不同浏览器支持的视频文件格式不一样，所以我们在进行视频添加的
时候，需要考虑到浏览器是否支持。我们可以准备多个格式的视频文件，让浏览器自动的选择

<video controls>
  <source src="myVideo.mp4" type="video/mp4">
  <source src="myVideo.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is
     a <a href="myVideo.mp4">link to the video</a> instead.</p>
</video>

audio 常用属性
src:播放的首频又件的路栓
controls:音频播放器的控制器面板
autoplay:自动播放
loop:循环

meta viewport 是做什么用的,怎么写？

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

viewport是浏览器展示网页的可视区域。有三种视口:
这个标签内的内容表示啥意思呢? name为viewport表示供移动设备使用. content定义了viewport的属性.
width表示移动设设备下显示的宽度为设备宽度(device-width)
height表示移动设设备下显示的宽度为设备宽度.
user-scalable表示用户缩放能力, no表示不允许.
initial-scale表示设备与视口的缩放比率
maximum和minimum分别表示缩放的最大最小值, 要注意的是, maximum必须必minimum大.
上面的meta标签就是告诉浏览器, 不要在移动端显示的时候缩放.

2020前端面试-HTML5+CSS3 重要知识点详解