HTML+CSS 부분 프론트엔드 기본 인터뷰 질문

1. img란 무엇인가요? 인라인 요소를 블록 수준 요소로 변환하는 방법

인라인 요소와 다른 요소는 같은 줄에 있습니다. 여백은 동일합니다. 내부 여백은 변경할 수 없으며 텍스트 이미지의 너비는 변경할 수 없습니다. 텍스트 또는 기타 인라인 요소만 수용할 수 있습니다. img는 블록 수준 요소입니다. 항상 새 줄에서 시작합니다. , 높이, 줄 높이, 외부 여백 및 내부 여백을 제어할 수 있으며 인라인 요소 및 기타 요소를 수용할 수 있습니다.
라인 요소를 블록 수준 요소로 변환: 디스플레이: 블록
2020 CSS 인터뷰 질문 요약(최신)

2. 여러 요소를 동일한 행에 설정하는 방법은 몇 가지입니까?

여러 요소를 동일한 행에 설정: float, inline-block

실수를 지우는 방법 : 방법 1: 새 요소 추가, Clear 적용: 둘 다

방법 2: 부모 p는 Overflow: Hidden을 정의합니다. 방법 3: :after 및 :before를 사용하여 요소 내부에 두 요소 블록을 삽입하여 삭제 효과를 얻습니다. 뜨다. .clear{zoom:1;}

.clear:after{content:””;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}

3. 이상한 상자 모형 상자 -사이징? 유연한 상자 모델 | 상자 레이아웃?


표준 모드의 상자 모델에서: 전체 상자 너비/높이=너비/높이+패딩+테두리+여백

이상한 모드의 상자 모델 아래에서 상자의 전체 너비와 높이 패딩 및 테두리 너비 포함, 총 상자 너비/높이 = 너비/높이 + 여백 = 콘텐츠 영역 너비/높이 + 패딩 + 테두리 + 여백

box-sizing에는 두 가지 값이 있습니다. 하나는 content-box이고 다른 하나는 border-입니다. 상자. box-sizing:content-box로 설정하면 표준 모드 구문 분석 및 계산이 사용됩니다. box-sizing:border-box로 설정하면 이상한 모드 구문 분석 및 계산이 사용됩니다.

4. 몇 가지 CSS 꿀팁을 간략하게 설명해주세요.


(1) 그림 간격

p에 그림을 삽입하면 그림이 p의 하단을 3px만큼 확장합니다. hack1: e388a4556c0f65e1904146cc1a846bee와 a1f02c36ba31691bcfe87b2722de723b를 같은 줄에 씁니다. Hack2: a1f02c36ba31691bcfe87b2722de723b의 이미지 간격에 display: block;

dt li를 추가합니다. 해킹: a1f02c36ba31691bcfe87b2722de723b에 블록을 추가합니다(2) IE6 이하 버전에서는 일부 블록 요소의 기본 높이(18px 미만)가 있습니다. hack1: 요소에 글꼴 크기: 0을 추가합니다. hack2: 명령문: 오버플로: 숨김; 양식 행 높이가 일치하지 않습니다.

hack1: 양식에 명령문을 추가합니다: float: left; border: 0;

마우스 포인터
해킹: 특정 요소의 마우스 포인터
in li가 블록 요소로 변환되면 float를 a로 설정하면 IE에 사다리 모양이 나타납니다.
hack1: a에 디스플레이: 인라인 블록을 추가합니다. hack2: li


에 float 추가 5. href와 src? 제목과 alt


href(하이퍼텍스트 참조)의 차이점은 네트워크 리소스(하이퍼텍스트 참조)의 위치를 ​​지정합니다. 현재 요소 또는 현재 문서와 필수 앵커 또는 현재 속성에 의해 정의된 리소스 링크 및 a와 같은 요소에 사용되는 링크 또는 관계를 정의합니다.
src(소스) 속성은 현재 문서 요소가 정의한 위치에만 현재 리소스를 포함합니다. 페이지의 필수 부분이자 소개입니다. img, script, iframe 및 기타 요소에 사용됩니다.
title: html 태그이자 html 속성입니다. title을 속성으로 사용하는 경우 요소에 대한 추가 설명 정보를 제공하는 데 사용됩니다.
alt: alt 속성은 다음과 같습니다. 대체 텍스트를 지정하는 데 사용되며 img, 영역 및 입력 요소(애플릿 요소 포함)에서만 사용할 수 있으며, 웹 페이지의 이미지가 정상적으로 표시되지 않을 때 사용자에게 이미지 정보를 이해할 수 있도록 텍스트 설명을 제공하는 데 사용됩니다.

6.변신? 생기? 차이점은 무엇입니까? animation-duration

Transform: 너비 및 왼쪽과 마찬가지로 변형, 회전, 크기 조정, 이동 및 원근감과 같은 기능을 구현하기 위해 요소의 다양한 정적 스타일을 정의합니다. 매우 멋진 정적 효과(애니메이션이 아님).
애니메이션: 스타일 속성이 아닌 요소 자체에 작용합니다. 키프레임 애니메이션의 범주에 속하며 애니메이션을 구현하기 위해 일부 순수 표현 자바스크립트 코드를 대체하는 데 사용됩니다.
animation-duration: 애니메이션을 완료하는 데 걸리는 시간을 초 또는 밀리초 단위로 지정합니다.

7.n번째 아이?

예:

111

222
• 2
3li:nth-of-type(2): ul 아래의 두 번째 li 요소를 나타냅니다.
li:nth-child(2): li 요소이자 ul 두 번째 요소임을 나타냅니다. (찾을 수 없음)
일반적으로 문제가 발생할 가능성이 적은 n번째 유형을 사용하는 것이 좋습니다.

8. :before와 ::before의 차이점은 무엇인가요?

CSS3 의사 클래스에는 단일 콜론(:)이 사용되고 CSS3 의사 요소에는 이중 콜론(::)이 사용됩니다. :before와 같이 CSS2 이전에 존재했던 의사 요소의 경우 단일 콜론과 이중 콜론::before는 동일한 효과를 갖습니다.

9. 상하좌우 중앙에 맞추는 방법

답변: 세 가지 방법이 있습니다.

方法1： .p1{ width:400px;  height:400px;  border:#CCC 1px solid;   background:#99f;  position:absolute;  left:50%;   top:50%;   transform: translate(-50%,-50%); }   8eb75804e58375c7a2a4dd2914b2cc8394b3e26ee717c64999d7867364b1b4a3 方法2： .p2{ width:400px;  height:400px;  border:#CCC 1px solid;  background:#99f;  position: absolute;  left:0;  top: 0;  bottom: 0;  right: 0;  margin: auto; }  25fdd61924ec43f68f6d130ac257deb194b3e26ee717c64999d7867364b1b4a3 方法3： .p3{ width:400px;  height:400px;  border:#CCC 1px solid;  background:#9f9;  position: absolute;  left: 50%;  top:50%;  margin-left:-200px;  margin-top: -200px;  }   2b9d554b5f57adf913ed7fb08b7f273594b3e26ee717c64999d7867364b1b4a3

10.css2.0 및 css3.0

답변: css3은 css2의 기능을 강화하고, 새로운 속성과 새 태그를 추가하고, 일부 중복 태그를 삭제하여 레이아웃 수량의 코드를 줄입니다. 이전에 복잡했던 레이아웃을 이제 단 하나의 속성(열 등의 속성)으로 해결할 수 있습니다. 더 많은 효과(둥근 모서리, 애니메이션 등)가 추가되었으며 상자 모델 및 목록 모듈이 개선되었습니다. 하지만 CSS3 호환성이 좋지 않아 일부 고급 버전의 브라우저에서만 이를 지원합니다.

11. 플렉스 박스 모델? flex|box 차이?

(1) 플렉스 박스 레이아웃 모델을 도입하는 목적은 컨테이너의 항목을 보다 효율적으로 정렬하고 할당하는 방법을 제공하는 것입니다.

유연한 상자 레이아웃 모델은 컨테이너에 있는 항목의 크기를 알 수 없거나 동적으로 변경되는 경우에도 정상적으로 작동할 수 있습니다. 이 레이아웃 모델에서 컨테이너는 레이아웃 요구 사항에 따라 사용 가능한 모든 공간을 가장 잘 채울 수 있도록 포함된 항목의 크기와 순서를 조정합니다.

화면 크기나 창 크기로 인해 컨테이너의 크기가 변경되면 컨테이너에 포함된 항목도 동적으로 조정됩니다. 예를 들어, 컨테이너 크기가 커지면 그 안에 포함된 항목이 늘어나서 남은 빈 공간을 채우고, 컨테이너 크기가 작아지면 항목이 컨테이너 범위를 초과하지 않도록 축소됩니다. Flexbox 레이아웃은 방향에 독립적입니다.

기존 레이아웃 방식에서 블록 레이아웃은 블록을 위에서 아래로 수직 방향으로 배열합니다.
인라인 레이아웃은 블록을 수평 방향으로 배열합니다. Flexbox 레이아웃에는 이러한 고유한 방향 제한이 없으며 개발자가 자유롭게 조작할 수 있습니다.

(2) flex와 box: display: box의 차이점은 오래된 표준입니다. 골동품 기계를 고려하려면 상위 요소에 display: box 속성을 추가하세요. 하위 요소에 box-flex 속성을 추가합니다. 상위 요소의 너비에 따라 하위 요소가 일정 비율의 공간을 차지하도록 할 수 있습니다. Flex는 최신 버전이며 Dong Ji의 이전 시스템에서는 지원되지 않습니다.

상위 요소가 display: flex를 설정한 후 하위 요소의 너비는 상위 요소의 너비 변경에 따라 변경되지만 display: 상자는 지원되지 않습니다. . Android UC 브라우저는 display: 상자 구문만 지원하는 반면 iOS UC 브라우저는 두 가지 방법을 모두 지원합니다.

12.viewport 모든 속성?

(1)width: 레이아웃 뷰포트의 너비를 양의 정수 또는 'device-width' 문자열로 설정합니다.
(2)initial-scale: 페이지의 초기 크기 조정 값을 숫자로 설정합니다. 소수를 포함할 수 있습니다.
(3)minimum-scale: 사용자가 허용하는 최소 스케일링 값으로, 숫자이며 소수를 포함할 수 있습니다.
(4)maximum-scale: 사용자가 허용하는 최대 확대/축소 값으로, 숫자이며 소수를 포함할 수 있습니다.
(5)height: 레이아웃 뷰포트의 높이를 설정합니다. 이 속성은 중요하지 않으며 거의 ​​사용되지 않습니다.
(6)user-scalable: 사용자가 확대/축소할 수 있는지 여부, 값은 'no' 또는 ' 예'.
Android는 대상 장치의 밀도 수준을 나타내는 target-densitydpi도 지원합니다. 이 기능은 CSS에서 1px이 나타내는 물리적 픽셀 수를 결정하는 것입니다.
(7) target-densitydpi: 값은 숫자 값이거나 높을 수 있습니다. -dpi, Medium-dpi, low-dpi 및 device-dpi 문자열 중 하나

13. HTML 구조의 의미를 어떻게 이해하나요?

소위 라벨 의미론은 라벨의 의미를 말합니다. 시맨틱스의 주요 목적은 모든 사람이 태그(마크업)와 속성(속성)의 용도와 기능을 직관적으로 이해할 수 있도록 하고, 검색 엔진에 친숙하도록 하는 것입니다. 좋은 구조와 시맨틱스를 사용하면 우리 웹 페이지 콘텐츠가 자연스럽게 쉽게 크롤링될 수 있습니다. 검색 엔진 검색 규칙을 준수하는 이 접근 방식은 웹 사이트 홍보에 많은 노력을 절약할 수 있으며 구조가 명확하고 읽기 쉽기 때문에 유지 관리가 더 쉽습니다. 이는 검색엔진 최적화(SEO)에서도 중요한 단계입니다.

14. 의사 클래스 선택자와 의사 요소? c3에 가상 클래스 선택기가 도입되었나요? c3의 의사 요소는 무엇입니까?

의사 클래스는 콜론 1개로 표시되고, 의사 요소는 콜론 2개로 표시됩니다.

의사 클래스 선택기:
상태가 동적으로 변경되므로 요소가 특정 상태에 도달하면 상태가 변경되면 이 스타일이 손실됩니다.

의사 요소 선택기:
는 실제 요소에 사용되는 선택기가 아니라 CSS에 정의된 의사 요소에 사용되는 선택기입니다.

c3에 도입된 의사 클래스 선택기:
:root( ) 선택기, 루트 선택기, 일치 요소 E가 위치한 문서의 루트 요소입니다. HTML 문서에서 루트 요소는 항상 100db36a723c770d327fc0aef2ce13b1입니다. :root 선택기는 100db36a723c770d327fc0aef2ce13b1 요소와 동일합니다.

:not() 선택기는 제외 선택기라고 하며 이는 jQuery의 :not 선택기와 정확히 동일하며 특정 요소를 제외한 모든 요소를 ​​선택할 수 있습니다.

:empty() 선택기는 비어 있음을 나타냅니다. 내용이 없는 요소를 선택하는 데 사용됩니다. 여기서 내용이 없다는 것은 내용이 전혀 없다는 의미입니다. 심지어 공백도 마찬가지입니다.

: target() 선택기는 페이지의 대상 요소에 대한 스타일을 지정하는 데 사용됩니다(요소의 ID는 페이지에서 하이퍼링크로 사용됩니다). 이 스타일은 사용자가 하이퍼링크를 클릭할 때만 사용됩니다. 페이지로 이동하여 대상 요소 다음에 작동합니다.

: first-child() 선택자는 상위 요소의 첫 번째 하위 요소인 E 요소를 선택하는 것을 의미합니다. 간단한 이해는 요소의 첫 번째 하위 요소를 선택하는 것입니다. 하위 요소가 아니라 하위 요소라는 점을 기억하세요.

:nth-child()는 요소의 특정 하위 요소를 하나 이상 선택합니다.

:nth-last-child()는 특정 요소를 선택하기 위해 상위 요소의 마지막 하위 요소부터 시작합니다.

:nth-of-type(n) 선택기와 :nth-child(n) 선택기 매우 유사합니다. 상위 요소에 지정된 특정 유형의 하위 요소만 계산됩니다.

:only-child는 요소가 상위 요소의 유일한 하위 요소임을 의미합니다.

:first-line은 요소 텍스트의 첫 번째 줄에 스타일을 사용합니다.

:first-letter 요소에 있는 텍스트의 첫 글자나 첫 단어에 스타일을 사용합니다.

:before 요소 앞에 일부 콘텐츠를 삽입합니다.

:after 요소 뒤에 일부 콘텐츠를 삽입합니다.

c3의 의사 요소:
::first-line은 요소의 첫 번째 줄을 선택합니다. 예를 들어 각 단락에서 텍스트의 첫 번째 줄의 스타일을 변경합니다.
::before 및 ::after는 요소 삽입에 주로 사용됩니다. 일반적으로 사용되는 두 가지 "콘텐츠"는 부동 소수점을 지우는 것입니다.
::selection은 웹 페이지를 탐색할 때 텍스트를 선택하는 기본 효과를 변경하는 데 사용됩니다. html5의 새로운 기능과 해당 요소 제거? HTML5 새 태그의 브라우저 호환성 문제를 어떻게 처리합니까? HTML과 HTML5를 구별하는 방법은 무엇입니까?

* HTML5는 이제 더 이상 SGML의 하위 집합이 아니며 주로 이미지, 위치, 저장, 멀티태스킹 등과 같은 기능 추가에 관한 것입니다. * 드래그 앤 드롭 API 더 나은 시맨틱 콘텐츠 태그(머리글, 탐색, 바닥글, 옆, 기사, 섹션) 오디오, 비디오 API(오디오, 비디오) Canvas API Geolocation API 로컬 오프라인 저장소 localStorage는 데이터를 오랫동안 저장하며,

sessionStorage 데이터는 브라우저를 닫은 후 자동으로 삭제됩니다. 양식 컨트롤, 달력, 날짜, 시간, 이메일, URL, 검색 새로운 기술 webworker, websocket, Geolocation

* 제거된 요소 순수 표현 요소: 기본 글꼴 , big, center,font, s, Strike, tt, u
사용성에 부정적인 영향을 미치는 요소: 프레임, 프레임셋, noframes
HTML5 새 태그 지원:
* IE8/IE7/IE6은 문서에서 생성된 태그를 지원합니다. .createElement 메소드를 사용하면 이러한 브라우저가 HTML5 새 태그를 지원하도록 할 수 있습니다. 브라우저가 새 태그를 지원한 후에는 태그의 기본 스타일을 추가해야 합니다.
* 물론 가장 좋은 방법은 Mature를 직접 사용하는 것입니다. 가장 많이 사용되는 프레임워크는 html5shim 프레임워크입니다37924444fcd8fd39aba8f0d3c6e91445 src="
http://

html5shim.googlecode.com/svn/trunk/html5. js"2cacc6d41bbb37262a98f745aa00fbf0 1b771f47d72d900ba74308aee59557f0 * 구별하는 방법: DOCTYPE은 새로운 구조적 요소와 기능적 요소를 선언합니다
16.placeholder? ie8에서 호환되게 만드는 방법 효과 자리 표시자

方法一：
首先判断浏览器是否支持placeholder属性，如果不支持的话，就遍历所有input输入框，获取placeholder属性的值填充进输入框作为提示信息，同时字体设置成灰色。

当输入框获得焦点( focus )同时输入框内文字等于设置的提示信息时，就把输入框内清空；

当输入框失去焦点( blur )同时输入框内文字为空时，再把获取的placeholder属性的值填充
进输入框作为提示信息，同时字体设置成灰色；

当输入框内有输入( keydown )时，此时输入框内的提示信息已经由focus事件清除，此时只需要把字体再恢复成黑色即可

此方法的缺点是，不适用于加载完DOM时即获得焦点的输入框，因为在用户的角度，加载完页面时看到的获得焦点的那个输入框，它的提示文字是看不到的。

HTML：<input type="text" id="uname" name="uname" placeholder="请输入用户名"/>CSS：.phcolor{ color:#999;}JS$(function(){  
  //判断浏览器是否支持placeholder属性  supportPlaceholder=&#39;placeholder&#39;in document.createElement(&#39;input&#39;),
  placeholder=function(input){
    var text = input.attr(&#39;placeholder&#39;),
    defaultValue = input.defaultValue;
    if(!defaultValue){
      input.val(text).addClass("phcolor");
    }
    input.focus(function(){
      if(input.val() == text){
        $(this).val("");
      }
    });
    input.blur(function(){
      if(input.val() == ""){
        $(this).val(text).addClass("phcolor");
      }
    });
    //输入的字符不为灰色    input.keydown(function(){
      $(this).removeClass("phcolor");
    });
  };
  //当浏览器不支持placeholder属性时，调用placeholder函数  if(!supportPlaceholder){
    $(&#39;input&#39;).each(function(){
      text = $(this).attr("placeholder");
      if($(this).attr("type") == "text"){
        placeholder($(this));
      }
    });
  }});

方法二：
此方法的思路是做一张含有提示文字的图片作为input输入框的背景图，初始时获得焦点同时加载背景图；
当输入框不为空时，去掉背景图；
当输入框为空时，加载背景图；
当用户键盘按键且输入框不为空( 输入字符 )时，去掉背景图；
当用户键盘按键且输入框为空( 删除字符 )时，加载背景图。
此方法的缺点是：需要为每一个提示文字不同的input制作背景图片，并且设置input的样式。

CSS：.phbg{ background:url(img/bg.jpg) 0 0 no-repeat;}JS$(function(){  
   //判断浏览器是否支持placeholder属性   supportPlaceholder='placeholder' in document.createElement('input');
   if(!supportPlaceholder){
     //初始状态添加背景图片     $("#uname").attr("class","phbg");
     //初始状态获得焦点     $("#uname").focus;
     function destyle(){
      if($("#uname").val() != ""){
        $("#uname").removeClass("phbg");
      }else{
        $("#uname").attr("class","phbg");
       }
     }
     //当输入框为空时，添加背景图片；有值时去掉背景图片     destyle();
     $("#uname").keyup(function(){
      //当输入框有按键输入同时输入框不为空时，去掉背景图片；有按键输入同时为空时（删除字符），添加背景图片      destyle();
     });
     $("#uname").keydown(function(){
      //keydown事件可以在按键按下的第一时间去掉背景图片      $("#uname").removeClass("phbg");
     });
   }});

方法三：
使用插件：Placeholders.js

17.常见兼容性问题？

* png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理。

* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

* 浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）   #box{ float:left; width:10px; margin:0 0 0 100px;}  这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

*  渐进识别的方式，从总体中逐渐排除局部。    首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。    接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。  
css// .bb{ background-color:#f1ee18; .background-color:#00deff\9;        +background-color:#a200ff;  _background-color:#1e0bd1;  }  

*  IE下,可以使用获取常规属性的方法来获取自定义属性,    也可以使用getAttribute()获取自定义属性;    Firefox下,只能使用getAttribute()获取自定义属性.     解决方法:统一通过getAttribute()获取自定义属性。

* IE下,event对象有x,y属性,但是没有pageX,pageY属性;    Firefox下,event对象有pageX,pageY属性,但是没有x,y属性. * 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,    可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

* 超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序: L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

* 怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。现在可以使用[html5](http://www.w3.org/TR/html5/single-page.html)推荐的写法：`0583f58d9786e05a39f68209743461b5`

* 上下margin重合问题
ie和ff都存在，相邻的两个p的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。
解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。

* ie6对png图片格式支持不好(引用一段脚本处理)

18.简述前端优化的方式 旧的雅虎34条|h5新添加的方式

1. HTTP 요청 수를 줄입니다
3. 점프 방지
4. 캐시 가능한 AJAX
6. DOM 요소 수를 줄입니다. 도메인 이름에 따라 페이지 콘텐츠 구분
9. iframe 수 최소화
10. 404 오류가 발생하지 않도록
11. 파일 헤더에 만료 또는 캐시 제어 지정 13. Gzip 압축 파일 content
14. ETag 구성
15. 가능한 한 빨리 출력 버퍼 플러시
16. GET을 사용하여 AJAX 요청 완료
17. 스타일 시트를 맨 위에 배치
18. CSS 표현식(Expression) 사용 피하기
19. 사용 외부 JavaScript 및 CSS
21. @import
대신 2cdf5bf648cf2f33323966d7f58a7f3f를 사용하세요. 23. 페이지 하단에 스크립트를 배치하세요

.
19.jquery 버전? 1.11 호환 가능?


Query 2. x 시리즈는 jQuery 1.x와 동일한 API를 갖지만 더 이상 IE6, 7, 8을 지원하지 않습니다.
IE6, 7, 8 사용자가 더 이상 웹 사이트에 액세스하지 않을 것이라고 확신하지 않는 한 버전 1.x를 사용하는 것이 좋습니다.
jquery1.11은 버전 1.x로 IE6, 7, 8과 호환되므로 IE9도 지원합니다.

20. 업계 내부? 빈 요소?

인라인 요소: 다른 모든 요소는 동일한 줄에 있습니다. 높이, 줄 높이, 여백 및 패딩은 변경할 수 없습니다. 텍스트 또는 기타 인라인 요소만 변경할 수 있습니다.
블록 요소: 항상 새 줄에서 시작하며, 높이, 줄 높이, 여백 및 패딩을 제어할 수 있으며 인라인 요소 및 기타 요소를 수용할 수 있습니다.
빈 요소: HTML 요소에서 콘텐츠가 없는 HTML 요소는 비어 있습니다. 요소. 빈 요소는 여는 태그에서 닫힙니다. 0c6dc11e160d3b678d68754cc175188a은 닫는 태그가 없는 빈 요소입니다.

21.media 속성? 화면? 모두? max-width?min-width?

media 속성은 연결된 문서가 표시될 장치를 지정합니다. media 속성은 다양한 미디어 유형에 대해 다양한 스타일을 지정하는 데 사용됩니다. Screen은 컴퓨터의 기본 화면으로, 모두 모든 기기에 적용 가능하며, 최대 너비를 초과하면 max-width가 실행되지 않으며, min-width는 최소 너비보다 커야 실행됩니다.

22. 메타 태그의 name 속성 값은 무엇인가요?

name 속성은 주로 웹페이지를 설명하는 데 사용되며, 해당 속성 값은 content입니다. 콘텐츠의 콘텐츠는 주로 검색 엔진 로봇이 정보를 찾고 정보를 분류하는 데 사용됩니다.

메타태그의 이름 속성 구문 형식은 입니다.

이름 속성에는 주로 다음 매개변수가 있습니다.

A, 키워드(키워드) 설명: 키워드는 웹 페이지의 키워드가 무엇인지 검색 엔진에 알려주는 데 사용됩니다.

B, 설명(웹사이트 콘텐츠 설명) 설명: 설명은 검색 엔진에 웹사이트의 주요 콘텐츠를 알려주는 데 사용됩니다. C, 로봇(로봇 가이드) 설명: 로봇은 검색 로봇에게 색인을 생성해야 하는 페이지와 어떤 페이지를 지정하는 데 사용됩니다. 페이지를 색인화할 필요가 없습니다. 콘텐츠 매개변수에는 all, none, index, noindex, follow, nofollow가 포함되며 기본값은 all입니다.

예: D, 작성자(작가)

23. 모바일 페이지에서 사진을 자르는 방법은 몇 가지가 있나요?


반응형 레이아웃, 유연한 레이아웃 표시: flex , js를 사용하여 비율을 작성 및 설정하고 루트 요소의 픽셀을 설정하고 rem을 단위로 사용합니다.

24.px/em/rem의 차이점은 무엇인가요? 일반적으로 글꼴 크기가 현재 개체의 텍스트 글꼴 크기를 기준으로 62.5%

로 설정되는 이유는 무엇입니까? 인라인 텍스트의 현재 글꼴 크기가 수동으로 설정되지 않은 경우 브라우저의 기본 글꼴 크기를 기준으로 합니다.

1. em의 값은 고정되어 있지 않습니다.

2. em은 상위 요소의 글꼴 크기를 상속받습니다. rem을 사용하여 요소의 글꼴 크기를 설정하면 여전히 상대적 크기이지만 HTML 루트 요소에만 상대적입니다. 이 단위는 상대적 크기와 절대 크기의 장점을 결합한 것이라고 할 수 있습니다. 이를 통해 루트 요소만 수정하여 모든 글꼴 크기를 비례적으로 조정할 수 있으며, 레이어별로 글꼴 크기를 합성하는 연쇄 반응을 피할 수 있습니다.

rem은 브라우저를 기준으로 크기가 조정됩니다. 1rem의 기본값은 16px입니다. 반응형 레이아웃에서는 하나씩 rem으로 변환하기가 너무 번거롭기 때문에 rem

body{font-size=62.5% } 이때 1rem = 10px이면 10px입니다. 1.2rem.

25. sass와 scss의 차이점은 무엇입니까? sass는 일반적으로 어떻게 컴파일됩니까? Sass에는 확장자가 ".sass"입니다. 확장자로 접미사; 문법 작성 방법이 다릅니다. Sass는 중괄호({})와 세미콜론(;) 없이 엄격한 들여쓰기 문법 규칙으로 작성되는 반면 SCSS의 문법 작성 방법은 CSS 문법 작성 방법과 매우 유사합니다.

26. CSS가 최적화되면 어떻게 해야 하나요?

압축 및 패키징, 이미지 통합, Hack 사용 방지, 호환성 문제 해결, 약어 사용을 통해 향후 CSS 유지 관리를 보장합니다.

27. CSS 파일을 압축하고 병합하는 방법은 무엇인가요?

gulp를 사용하여 홈페이지에서 전역적으로 gulp를 설치하세요.
1. npm install --global gulp
2. 둘째, 로컬에 gulp를 설치합니다. npm install gulp --save-dev
3. 프로젝트 루트 디렉터리에 gulpfile.js라는 파일을 생성합니다
var gulp = require('gulp');
gulp.task('default', function() {
// 여기에 기본 작업 코드를 입력하세요});
4. (default라는 기본 작업이 실행됩니다. 특정 작업을 별도로 실행하려면 gulp 5a3616b73b29b6ef8523164b750a7aee 7d6b528363c38dfdf8956b7f1cce7869를 입력하세요.)
gulp
JS 및 CSS 파일 병합 및 압축
JS 및 CSS 파일을 압축하려면 다음이 필요합니다. 다음 구성요소를 참조하세요.
gulp-minify-css: CSS 압축

28. 구성요소?

컴포넌트 프로그래밍: js css html을 함께 패키지하여 방법과 효과 제공
모듈화: 동일한 기능을 추출하여 프로그래밍을 위해 한 위치에 저장

29. 같은 줄에 그림과 텍스트를 표시하시겠습니까?

1 CSS의 p에 "vertical-align:middle" 속성을 추가합니다.
2 그림과 텍스트를 각각 다른 p에 넣은 다음 "margin" 속성을 사용하여 같은 줄에 표시될 수 있도록 위치를 지정합니다.
3 이미지를 배경 이미지로 설정하세요.

30. 이벤트 버블링 비활성화

event.stopPropagation()

31. 기본 이벤트 비활성화

event.preventDefault()

32.

a 태그의 링크, 방문, 호버 및 활성은 특정 순서로 되어 있습니다.
a:link
a:visited
a:hover
a:active

33. a 태그 또는

e.preventDefault();
href="javascript:void(0);

34 링크를 찾으세요. 휴대폰에서 오랫동안 사진을 클릭하면 사진이 어떻게 처리해야 할까요?

onselect=function() {
return false
}

35. 동영상 태그의 여러 속성 메서드

src: 동영상 표지, 아니요 재생 중 표시되는 그림 미리 로드: 자동 재생 루프: 루프 재생 컨트롤: 브라우저와 함께 제공되는 컨트롤 막대 너비: 비디오 너비 높이: 비디오 높이

36. 일반적인 비디오 인코딩 형식은 몇 개입니까?

비디오 형식: MPEG-1, MPEG-2 및 MPEG4, AVI, RM, ASF 및 WMV 형식
비디오 인코딩 형식: H.264, MPEG-4, MPEG-2, WMA-HD 및 VC -1

37.canvas 라벨과 스타일에 너비와 높이를 설정합니다. 너비와 높이를 설정하는 것의 차이점은 무엇인가요?

캔버스 태그의 너비와 높이는 캔버스의 실제 너비와 높이입니다. 스타일의 너비와 높이는 브라우저에서 렌더링되는 캔버스의 높이입니다. 너비와 높이가 지정되지 않거나 값이 올바르지 않으면 설정됩니다.

38.border-image?

Border-image: 그래픽 테두리
Box-sizing: 속성을 사용하면 특정 방식으로 특정 영역과 일치하는 특정 요소를 정의할 수 있습니다. : content-box | border-box
Content-box: 정의된 너비와 높이에 패딩과 테두리가 포함되지 않습니다. 즉, 개체의 실제 너비는 설정된 너비 값과 테두리와 패딩의 합과 같습니다. 요소 너비 = 너비 + 테두리 + 패딩) 이 속성은 표준 모드에서 상자 모델로 작동합니다.
Border-box: 너비와 높이 내에 패딩과 테두리가 정의에 포함됩니다. 객체의 실제 너비는 설정된 너비 값과 같습니다. 테두리 및 패딩이 정의되어 있어도 객체의 실제 너비는 변경되지 않습니다. 즉, 이 속성은 의 상자 모델처럼 동작합니다. 이상한 모드.

39. 점진적인 향상과 우아한 저하

점진적 개선: 낮은 버전의 브라우저용 페이지를 구축하여 가장 기본적인 기능을 보장한 다음 효과, 상호 작용을 개선하고 고급 브라우저용 기능을 추가하여 더 나은 사용자 경험을 제공합니다.
우아한 성능 저하: 처음부터 완전한 기능을 구축한 다음 하위 버전의 브라우저와 호환되도록 만듭니다.
차이: 우아한 저하가 복잡한 현상 유지에서 시작하여 사용자 경험의 공급을 줄이려고 시도하는 반면, 점진적인 향상은 매우 기본적이고 작동하는 버전에서 시작하여 미래 환경의 요구에 적응하기 위해 지속적으로 확장합니다.
저하(기능적 쇠퇴)는 뒤를 돌아보는 것을 의미하며, 점진적인 향상은 뿌리를 안전지대에 유지하면서 앞을 내다보는 것을 의미합니다.
"우아한 저하" 견해
"우아한 저하" 견해는 웹사이트가 가장 발전되고 완전한 브라우저에 맞게 설계되어야 한다고 믿습니다. 개발 주기의 마지막 단계에서 "오래된" 것으로 간주되거나 기능이 누락된 브라우저에 대한 테스트를 준비하고 테스트 대상을 이전 버전의 주류 브라우저(예: IE, Mozilla 등)로 제한합니다.
이 디자인 패러다임에서 오래된 브라우저는 "나쁨이지만 무난한" 브라우징 경험만 제공하는 것으로 간주됩니다. 특정 브라우저에 맞게 약간의 조정을 할 수 있습니다. 그러나 그것들은 우리의 관심의 초점이 아니기 때문에 더 큰 버그를 수정하는 것 외에는 다른 차이점은 무시될 것입니다.
"점진적 향상" 관점
"점진적 향상" 관점은 콘텐츠 자체에 집중해야 한다고 믿습니다.
콘텐츠는 우리가 웹사이트를 구축하도록 동기를 부여합니다. 일부 웹사이트는 이를 표시하고, 일부는 수집하고, 일부는 검색하고, 일부는 운영하고, 일부 웹사이트는 위의 내용을 모두 포함하기도 하지만, 모두 콘텐츠를 포함한다는 점은 동일합니다. 이는 "점진적 향상"을 보다 합리적인 설계 패러다임으로 만듭니다. 이것이 Yahoo!에서 즉시 채택되어 "등급별 브라우저 지원" 전략을 구축하는 데 사용된 이유입니다.
그러면 질문이 옵니다. 이제 제품 관리자는 IE6, 7, 8의 웹 페이지 효과가 최신 브라우저보다 둥근 모서리와 그림자(CSS3)가 훨씬 적고 호환성(이미지 배경 사용 및 CSS3 포기)이 필요하다는 점을 확인했습니다. 이제 제품 관리자를 어떻게 설득하시겠습니까? ?

40 IE 하위 버전의 이상한 상자 모델과 c3 이상한 상자 모델 및 유연한 상자 모델을 설명하세요.

IE 패딩+테두리 값이 너비 또는 높이보다 작은 경우:
상자 모델의 너비 = 여백(왼쪽 및 오른쪽)+너비(너비는 이미 패딩 및 테두리 값을 포함함)
박스 모델의 높이는 여백(상하)+높이(높이는 이미 패딩 및 테두리 값을 포함함) )
padding+border 값이 너비 또는 높이보다 큰 경우:
박스 모델의 너비 = 여백(왼쪽 및 오른쪽) + 패딩(왼쪽 및 오른쪽) + 테두리(왼쪽 및 오른쪽)
상자 높이 모델 = 여백(상단 및 하단) + 패딩(상단 및 하단) + 테두리(상단 및 하단) + 19px(기본 줄 높이 19px) 따라서 패딩+테두리를 너비 또는 높이 중 더 큰 값과 비교하는 것과 동일합니다. 선택됩니다.
위 DOCTYPE은 모두 표준 문서 유형입니다. DOCTYPE을 완전히 정의하는 데 어떤 모드를 사용하든 표준 모드가 실행됩니다. DOCTYPE이 없으면 ie6, ie7에서 이상한 모드(quirks 모드)가 실행됩니다. 및 ie8 CSS3box-sizing 두 가지 값이 있습니다. 하나는 콘텐츠 상자이고 다른 하나는 테두리 상자입니다.
box-sizing:content-box로 설정하면 표준 모드가 분석 및 계산에 사용되며 이는 기본 모드이기도 합니다.
box-sizing:border-box로 설정하면 이상한 모드가 분석에 사용됩니다.
Css3 유연한 상자 모델이 도입되었습니다. 새로운 상자 모델인 플렉스 상자 모델이 도입되었습니다. 이 모델은 상자가 다른 상자에 배포되는 방식과 사용 가능한 공간을 처리하는 방법을 결정합니다. 이 모델을 사용하면 브라우저 창에 맞춰지는 유동적인 레이아웃이나 글꼴 크기에 맞춰지는 유연한 레이아웃을 쉽게 만들 수 있습니다.

41.애니메이션 해당 속성

쓰기: 애니메이션: 이름 기간 타이밍-함수 지연 반복-횟수 방향
다음은 해당 속성에 대한 소개입니다.
animation-name은 바인딩해야 하는 키프레임 이름을 지정합니다. 선택자.
animation-duration은 애니메이션을 완료하는 데 걸리는 시간을 초 또는 밀리초 단위로 지정합니다.
animation-timing-function은 애니메이션의 속도 곡선을 지정합니다.
animation-delay 애니메이션이 시작되기 전의 지연 시간을 지정합니다.
animation-iteration-count는 애니메이션을 재생해야 하는 횟수를 지정합니다.
animation-direction은 애니메이션을 차례로 역방향으로 재생할지 여부를 지정합니다.

42.transition?

css 전환을 사용하면 CSS 속성 값이 특정 시간 간격 내에서 원활하게 전환될 수 있습니다. 이 효과는 마우스 클릭, 포커스, 클릭 또는 요소 변경에 의해 트리거될 수 있으며 애니메이션 효과로 CSS 속성 값을 부드럽게 변경합니다. 반전하고 요소를 회전하고 늘입니다.

43.h5 새로운 기능?

1、绘画的 canvas 元素
2、用于媒介回放的 video 和 audio 元素
3、对本地离线存储的更好的支持
4、新的特殊内容元素，比如 article、footer、header、nav、section 5、新的表单控件，比如 calendar、date、time、email、url、search

44.canvas 如何绘制一个三角形|正方形  

moveto 是移动到某个坐标， lineto 是从当前坐标连线到某个坐标。
这两个函数加起来就是画一条直线。 画线要用“笔”，那么MoveTo()把笔要画的起始位置固定了（x,y）然后要固定终止位置要用到LineTo函数确定终止位置（xend,yend）,这样一条线就画出来了。 每次与前面一个坐标相连 。
stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。

<!DOCTYPE HTML5><html><head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>画布</title>
  </head> <body>
     <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
     Your browser does not support the canvas element.     </canvas>
     <script type="text/javascript">
         var c=document.getElementById("myCanvas");//三角形         var cxt=c.getContext("2d");
         cxt.moveTo(10,10);
         cxt.lineTo(50,50);
         cxt.lineTo(10,50);
         cxt.lineTo(10,10);
         cxt.stroke();//正方形         var cxt2=c.getContext("2d");
         cxt2.moveTo(60,10);
         cxt2.lineTo(100,10);
         cxt2.lineTo(100,50);
         cxt2.lineTo(60,50);
         cxt2.lineTo(60,10);
         cxt2.stroke(); 
     </script></body></html>

45.所用bootstap版本？

3.0

46.css清除浮动的几种方式？

1、父级p定义 height
2、结尾处加空p标签 clear:both
3、父级p定义 伪类:after 和 zoom  
4、父级p定义 overflow:hidden  
5、父级p定义 overflow:auto  
6、父级p 也一起浮动
7、父级p定义 display:table

47.为什么要初始化CSS样式。

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

48.CSS3有哪些新特性？

CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);
//旋转,缩放,定位,倾斜增加了更多的CSS选择器  多背景 rgba 在CSS3中唯一引入的伪元素是::selection.媒体查询，多栏布局 border-image

49.解释下 CSS sprites，以及你要如何在页面或网站中使用它。

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限制，一般浏览器都是6个。对于未来而言，就不需要这样做了，因为有了`http2`。

50.什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？

FOUC - Flash Of Unstyled Content 文档样式闪烁
6e4c09dfadbdc8532a2121b9890677a7@import "../fouc.css";531ac245ce3e4fe3d50054a55f265927
而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。
解决方法：只要在93f0f5c25f18dab9d176bd4f6de5d30e之间加入一个2cdf5bf648cf2f33323966d7f58a7f3f或者3f1c4e4b6b16bbbd69b2ee476dc4f83a元素就可以了。

51.a点击出现框，解决方法:

a,a:hover,a:active,a:visited,a:link,a:focus{ 
 -webkit-tap-highlight-color:rgba(0,0,0,0);
 -webkit-tap-highlight-color: transparent;
 outline:none;background: none;
 text-decoration: none;border:none;
 -webkit-appearance: none; }

相关教程推荐：CSS视频教程

위 내용은 HTML+CSS 부분 프론트엔드 기본 인터뷰 질문의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!