1. BFC

2. 클리어 플로트

3. 어떤 모바일 단말기 레이아웃

답 : 흐름 레이아웃 비율, 유연한 box-flex, 그리드 레이아웃 그리드, rem / em, vm / vh
rem em
em 상대 길이 단위, 현재 요소의 글꼴 크기를 참조하고 글꼴 크기가 설정되지 않은 경우 현재 요소의 경우 상위 요소의 글꼴 크기 (예 : box {font-size : 16px;} then 1em = 16px .box {font-size : 32px;} then 1em = 32px, 0.5em = 16px

루트 요소 (html)의 글꼴 크기를 나타내는 rem의 상대 길이 단위입니다. 예 : html {font-size : 16px;} then 1rem = 16px html {font-size : 32px;} then 1rem = 32px , 0.5rem = 16px

vw는 뷰포트의 너비에 상대적입니다. 뷰포트는 100 개의 vw 단위 (즉, 브라우저보기 가능 영역)로 균등하게 나뉩니다. 100vw =보기 가능 영역의 너비

vh는 뷰포트의 높이에 상대적입니다. 뷰포트는 100 개의 vh 단위 (즉, 브라우저보기 가능 영역)로 균등하게 나뉩니다. 100vh =보기 가능 영역의 높이

Four.flex 레이아웃

flex : 1, 여기서 1은 너비 비율을 나타냅니다. 특정 값은 다른 상자의 플렉스 값에 따라 달라집니다. 여기에있는 다른 상자의 너비는 고정되어 있으므로 가운데 열이 자동으로 flex-grow flex-shrink로 채워집니다. 가변 기준
주문 : 항목 주문을 정의합니다. 값이 작을수록 배열이 높아
집니다 . allign-self : allign-self 속성을 사용하면 단일 항목이 다른 항목
과 다른 정렬을 가질 수 있으며 align-items 속성을 재정의 할 수 있습니다. 기본값은 auto로
상위 요소의 align-items 속성이 상속됨을 의미 하며, 상위 요소가없는 경우 stretch와 동일합니다.

플렉스를 센터로 사용하는 방법에 대해서는
플렉스 레이아웃에 대한 자세한 내용은 MDN 문서를 참조 할 수 있으며 여기서는 일반적인 문제 만 나열하겠습니다.

V. 센터링 문제 (강조)

센터링 문제는 정말 일반적인 주제입니다. 기본적으로 모든 인터뷰가 질문됩니다. 결국 스타일과 관련하여 센터링은 정말 어디에나 있습니다. 센터링에 대한 기사는 인터넷 어디에나 있습니다. 4 ~ 5 가지 종류를 기억하세요. 작업에 문제가 없습니다. 가로 센터링, 세로 센터링, 가로 및 세로 센터링, 고정 너비 및 높이, 가변 너비 및 높이와 같이 중앙
에 좋은 텍스트의 포털에 대한
많은 공통 센터링 포인트 가 있습니다 . . 고정 된 너비와 높이에 대해 논의 해 보겠습니다. 가로 및 세로로 가운데에 여러 가지 방법이 있습니다.

1. 고정 너비 및 높이

定位 + 여백 : 자동 + 왼쪽 + 오른쪽 + 상단 + 하단

<!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>

포지셔닝 + 마진 : -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>

포지셔닝 + 변환

 <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>

플렉스 레이아웃

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

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

        }

그리드 레이아웃 여백 : 자동;

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

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

2. 가변 폭과 높이

절대 위치 + 변형

<!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>

테이블 셀

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

플렉스 레이아웃

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

플렉스 + 여백 : 자동

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

그리드 + 플렉스 레이아웃

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

거드 + 여백 레이아웃

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

수평 센터링 또는 수직 센터링에 대해 별도로 논의하십시오.

1. 인라인 요소의 중앙 레이아웃

수평 중앙

인라인 요소를 설정할 수 있습니다 : text-align : center;
부모 요소를 설정하는 플렉스 레이아웃 : display : flex; justify-content : center;

수직 중앙

한 줄 텍스트
의 부모 요소 높이 확인 : height === 줄 높이 여러 줄 텍스트의 부모 요소 높이 확인 : disaply : table-cell; vertical-align : middle;

두 블록 수준 요소 중심 레이아웃

수평 중앙

고정 너비 : 여백 : 0 자동;
가변 너비 : 위의 예에서 가변 너비 및 높이 예제를 참조하십시오.

수직 중앙

위치 : 절대 왼쪽, 상단, 여백-왼쪽, 여백-대 (고정 높이);
위치 : 고정 세트 여백 : 자동 (고정 높이);
디스플레이 : 테이블 셀;
변형 : 번역 (x, y);
플렉스 (정의되지 않음) 높이, 가변 너비,
그리드 (가변 높이, 가변 너비), 호환성이 상대적으로 열악합니다.

절대 위치 및 음의 매진 값

6. 박스 모델

이상한 모드와 IE6 이하 브라우저의 IE6 무차별 모드 상자 모델box -sizing : border-box

너비 = 콘텐츠 너비 + 패딩 너비 + 테두리 너비
높이 = 콘텐츠 높이 + 패딩 높이 + 테두리 높이

표준 박스 모델 box -sizing : :content -box

너비 = 콘텐츠 너비
높이 = 콘텐츠 높이

Seven.H5 문제

1. H5의 의미를 어떻게 이해합니까?

의미 체계화는 텍스트 콘텐츠 (콘텐츠 의미 체계)의 구조화 및 의미 체계 태그 (코드 의미 체계)의 선택을 의미하며, 이는 개발자가보다 우아한 코드를 읽고, 유지하고, 작성하는 데 편리하며, 브라우저 크롤러 및 기술 분석 개선을 지원합니다. 올바른 내용을 설명하기 위해 올바른 레이블을 선택합니다.
레이블은 다음 단계를 거쳤습니다.

황야 단계에서는 백엔드가 레이아웃을 작성합니다. 테이블 레이아웃이 사용되어 해체에 혼란이 생기고 코드 가독성이 떨어지며 특히 나중 단계에서 유지 관리가 번거 롭습니다.
아트 단계에서 레이아웃을 수행 할 때 div + css를 사용하여이를 수행하고 div로 작성하여 페이지의 의미가 부족하고 코드의 가독성을 줄입니다.
현재 시맨틱 태그를 사용하여 레이아웃하는 프런트 엔드 개발은
사람들에게 다음과 같은 이점 이 있습니다.
팀 개발 및 유지 관리에 편리합니다.
또한 읽기 쉬운 CSS를로드하지 않고도 더 나은 콘텐츠 구조와 코드 구조를 제공 할 수 있습니다.
사용자 경험 : 예를 들어 title 및 alt는 명사를 설명하거나 그림 정보를 설명하는 데 사용되며 레이블 레이블이 사용됩니다.
기계의 경우
SEO에 도움이되며 검색 엔진 크롤러는 레이블에 의존하여 각 키워드의 컨텍스트와 가중치를 결정합니다. , 검색 엔진의 성능을 향상시킬 수 있습니다. 크롤링을 효과적으로 수행하고 웹 사이트 트래픽을 늘릴 수 있습니다.
다른 장치 (스크린 리더, 블라인드 리더 등)의 분석에 편리하고 장벽없는 읽기를 용이하게하며 접근성을 향상시킵니다.

2. 사용 된 H5 태그

함유량:

머리글 머리글에는 일반적으로 웹 사이트 로고, 기본 탐색, 사이트 전체 링크 및 검색 상자가 포함됩니다.
바닥 글 바닥 글은 부모가 본문 인 경우에만 전체 페이지의 바닥 글입니다.
기사에는 신문과 같은 내용이 포함되어 있습니다. == || 이렇게 이해하면 문서, 페이지, 응용 프로그램 또는 별도의 컨테이너를 의미합니다.
aside는 따옴표, 사이드 바, 기사 링크 세트, 광고, 친숙한 링크, 관련 제품 목록 등을 포함하는 메모 열을 지정합니다.
미안 페이지의 주요 내용은 한 페이지 만 사용할 수 있습니다. 웹 애플리케이션 인 경우 주요 기능을 둘러 쌉니다.
탐색 표시 탐색은 문서의 중요한 링크 그룹에만 사용됩니다.
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, 너비, 높이);

x
사각형 시작점 의 x 좌표입니다.
y
사각형 시작점 의 y 좌표입니다.
width
사각형 의 너비입니다 .
heightThe의 높이
구형

video일반적으로 사용되는 속성
포스터 : 동영상이 완전히 다운로드되지 않았거나 사용자가 재생하기 전에 기본적으로 표시되는 표지를 클릭하지 않은 경우. 현재 비디오 파일
의 첫 번째 사진이 기본적으로 표시됩니다 .->
참고 : 너비와 높이를 설정할 때 일반적으로 너비 또는 높이 만 설정되어 자동으로 비례하여 크기가 조정됩니다.
너비와 높이를 동시에 설정하면 설정된 값이 정확히 같은 비율이 아니면 동영상이 설정된 너비와 높이로 조정되지 않습니다.

요점은 소스 사용을 설명하는 것입니다. 다른 브라우저에서 지원하기 때문입니다. 비디오 파일 형식이 다르므로 비디오를 추가 할 때
브라우저가 지원하는지 여부를 고려해야합니다. 다양한 형식의 비디오 파일을 준비하고 브라우저가 자동으로

<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 : 재생의 첫 번째 채널 및로드 볼트
컨트롤 : 오디오 플레이어의 컨트롤러 패널
자동 재생 : 자동 재생
루프 : 루프

메타 뷰포트는 무엇에 사용되며 작성 방법은 무엇입니까?

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

뷰포트는 브라우저가 웹 페이지를 표시하는 시각적 영역입니다. 뷰포트에는 세 가지 종류가
있습니다.이 태그의 콘텐츠는 무엇을 의미합니까? 이름은 뷰포트로 모바일 장치에서 사용함을 의미합니다. 콘텐츠는 뷰포트의 속성을 정의합니다.
너비는 모바일 장치 아래의 디스플레이 너비를 의미합니다 . 은 장치 너비 (장치 너비)이고
높이는 모바일 장치 아래의 디스플레이 너비가 장치의 너비를 의미합니다.
user-scalable은 사용자의 확대 / 축소 기능을 나타내며 아니요는 허용되지 않음을
나타냅니다. 기기와 뷰포트 간의 확대 / 축소 비율입니다.
최대 및 최소는 각각 확대 / 축소 의 최대 값과 최소값을 나타냅니다., 최대 값은 최소값이어야합니다.
위의 메타 태그는 브라우저가 확대 / 축소하지 않도록 지시합니다. 모바일 단말기에 표시됩니다.

HTML5 + CSS3의 중요한 지식 포인트에 대한 2020 프런트 엔드 인터뷰 상세 설명