一.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 重要知識點詳解

一.BFC

二.清除浮動

三.哪些移動端佈局

四.flex 佈局

五.居中問題(重點)

1.定寬高

2. 不定寬高

把水平居中或者垂直居中分開討論

絕對定位和負magin值

六.盒子模型

七.H5問題

1. 你怎麼理解的H5的語義化

2. 用過哪些H5標籤

meta viewport 是做什麼用的,怎麼寫？

一鍵自動化博客發佈工具,用過的人都說好(掘金篇)

「Pygors跨平臺GUI」2：安裝MinGW-w64、MSYS2還是WSL2

[轉帖]

python列出centos7內存使用前50的進程信息

「Pygors跨平臺GUI」1：Pygors跨平臺GUI應用研究

nodejs學習06——小案例

評估統計算法在銀行僞造鈔票檢測中的價值

C# Xmlserializer 程序集內存泄露

Java ThreadPoolShutdown

5月21日相聚上海張江！與文心大模型一起共建大模型產業應用生態圈

多益網絡面經

vue面試知識點彙總

常用數組處理方法與數組去重

session cookies，sessionStorage和localStorage的區別

Flex彈性盒子優雅佈局

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結