웹 프론트엔드 상식 학습 상세 소개

1. 공통 블록 수준 요소 인라인 요소

p - 가장 일반적으로 사용되는 블록 수준 요소

dl - dt-dd와 함께 사용되는 블록 수준 요소

양식 - 대화형 양식

h1 -h6- 제목

hr - 가로 구분선

ol - 정렬된 목록

p - 단락

ul - 순서가 지정되지 않은 목록

fieldset - 양식 필드 집합

colgroup-col - 양식 열 그룹화 요소

table-tr- td 테이블 및 row-cell

사전 서식이 지정된 텍스트

a - 하이퍼링크(앵커)

br - 줄바꿈

i - 기울임꼴

em - 강조

img - 그림

입력 - 입력 상자

레이블 - 양식 레이블

범위 - 공통 인라인 컨테이너, 텍스트 내의 블록 정의

강함 - 굵은 강조

sub - 아래 첨자

sup - 위 첨자

textarea - 여러 줄 텍스트 입력 상자

u - 밑줄

선택 - 프로젝트 선택

2. 텍스트 3점 구현을 위한 여러 조건

text-overflow속성은 만: 텍스트가 넘칠 때 줄임표 표시 여부. 다른 스타일 속성 정의가 없습니다. 넘칠 때 줄임표를 생성하는 효과를 얻으려면 다음을 정의해야 합니다.

1. 🎜>width: value; (px, %, 둘 다 허용됨)

2. 텍스트를 한 줄로 강제 표시:

white-space: nowrap; > 3. 오버플로 내용은 숨겨집니다.

4. 오버플로 텍스트는 줄임표를 표시합니다. text-overflow: ellipsis

참고: 한 줄의 텍스트여야 합니다. 이 기사의 오버플로를 설정하려면! ! !

IE6+; chrome1.0+; safari3.1+(firefox, Opera는 아직 지원되지 않음)

3. 수직 중앙 정렬을 위한 여러 조건

컨테이너를 수직으로 중앙에 배치하려면 기본

display

속성 값을 inline-block으로 변경하고 형제 요소(ruler)를 추가해야 합니다(형제 요소 [ruler] 스타일은 다음으로 설정됨).

세로 정렬

:중간;너비:0;높이:100%;디스플레이:인라인 블록;) . 세 가지 조건:

1: 컨테이너에 추가해야 함(상위 요소)

text-align

:center;2: 추가해야 함 현재 요소를 인라인 블록 요소(display:inline-block;)로 변환하고 수직 정렬:middle;

3을 현재 요소에 추가합니다(캐리지 리턴 없이). 뒤에 형제 요소 범위를 추가합니다. 현재 요소(캐리지 리턴 없음) ;그리고 Vertical-align:middle;width:0;height:100%;display:inline-block

4. 대체 요소 및 비대체 요소

대체요소와 비대체요소

a) 대체 요소: 브라우저는 태그와 속성을 기반으로 요소의 특정 표시 콘텐츠를 결정합니다. 예를 들어, 브라우저는 이미지 정보를 읽고 태그의 src 속성 값을 기반으로 표시하지만 (x)html 코드를 보면 이미지의 실제 내용을 볼 수 없습니다. 입력 상자, 라디오 버튼 등을 표시할지 여부를 결정하는 태그 속성의 유형입니다. (x), , , <select>는 모두 대체 요소입니다. 이러한 요소에는 실제 콘텐츠가 없는 경우가 많습니다. 즉, 빈 요소입니다. </p> <p style="text-align: left;">대체 요소는 디스플레이에 상자를 생성하므로 일부 인라인 요소(img, input)가 너비와 높이를 설정할 수 있습니다. </p> <p style="text-align: left;">b) 대체할 수 없는 요소(대체할 수 없는 요소): (x) html의 대부분의 요소는 대체할 수 없는 요소입니다. 즉, 해당 내용이 사용자(예: 브라우저)에게 직접 표시됩니다. </p> <p style="text-align: left;">5. 스프라이트 맵이란 무엇인가요? 장점은 무엇입니까? </p> <p style="text-align: left;">이미지 통합, 작은 단일 배경 이미지를 하나의 큰 배경 이미지로 통합합니다. </p> <p style="text-align: left;">이미지 통합의 장점: 1) 이미지 통합을 통해 서버로의 요청 횟수를 줄여 페이지 로딩 속도를 향상시킵니다. 2) 사진을 통합하여 크기를 줄입니다. </p> <p style="text-align: left;">6. <a href="http://www.php.cn/code/5005.html" target="_blank">css 캐스케이딩 </a> 스타일시트란 무엇인가요? 우선순위 알고리즘은 어떻게 계산되나요? </p> <p style="text-align: left;">a. 중요도와 소스의 우선순위는 </p> <p style="text-align: left;">1) 브라우저 기본 스타일 </p> <p style="text-align: left;">2) <a href="http://www.php.cn/wiki/164.html" target="_blank">class</a>/id입니다. ....선택기의 가중치 </p> <p style="text-align: left;">3) 인라인 스타일 </p> <p style="text-align: left;">4) 인라인 또는 외부(쓰기 순서) </p> <p style="text-align: left;">5) !important가 가장 높습니다</p> <p style="text-align: left;">7. 디스플레이:없음과 <a href="http://www.php.cn/wiki/929.html" target="_blank">가시성</a>:숨김 </p> <p style="text-align: left;">전자: 숨겨졌지만 공간을 차지하지 않음, 후자: 숨겨졌지만 공간을 차지함</p> <p style="text-align: left;">8. <a href="http://www.php.cn/code/6440.html" target="_blank">플로팅을 지우는 여러 가지 방법 </a></p> <p style="text-align: left;">hack1: 상위 요소에 Overflow:hidden 선언을 추가합니다.</p> <p style="text-align: left;">hack2: 상위 요소에 높이를 추가합니다</p> <p style="text-align: left;">hack3: 플로팅 요소 아래에 빈 p를 추가하고 요소에 선언을 추가합니다. p{clear:both height:0; Overflow:hidden;}</p> <p style="text-align: left;">hack4: 범용 클리어 플로팅 메서드 p:after{content: ". ";clear:both;display:block;height:0;overflow:hidden; visible:hidden;}</p> <p style="text-align: left;">9. 어떤 속성을 상속받을 수 있나요? </p> <p style="text-align: left;">1) 텍스트 관련: 글꼴 모음, 글꼴 크기, 글꼴 스타일, 글꼴 변형, 글꼴 두께, 글꼴, 문자 간격, 줄 높이, 텍스트 정렬, 텍스트 들여쓰기, 텍스트 -변환, 단어 간격</p> <p style="text-align: left;">2) 목록 관련: 목록 스타일-이미지, 목록 스타일-위치, 목록 스타일 유형, 목록 스타일</p> <p style="text-align: left;">3) 색상 관련 : color </p> <p style="text-align: left;">4) 투명도(하위 요소는 상위 요소의 불투명도를 상속하지만 변경할 수 없음) </p> <p style="text-align: left;">참고: 글꼴 크기는 비율이 아니라 상위 요소의 크기를 상속합니다. . line-height 상위 요소가 백분율 또는 px 값인 경우 하위 요소는 상위 요소와 동일합니다. 상위 요소가 일반 또는 숫자인 경우 하위 요소의 줄 높이는 하위 요소의 글꼴 크기입니다. 요소에 숫자를 곱합니다. </p> <p style="text-align: left;">10. 위치 지정 방법</p> <p style="text-align: left;">위치 속성 값: <a href="http://www.php.cn/wiki/188.html" target="_blank">정적</a>, 상대, 절대, 고정</p> <p style="text-align: left;">1) 정적</p> <p style="text-align: left;">정적은 해당 요소는 문서 흐름에 위치하며 <a href="http://www.php.cn/wiki/904.html" target="_blank">상단</a>, <a href="http://www.php.cn/wiki/906.html" target="_blank">하단</a>, <a href="http://www.php.cn/wiki/907.html" target="_blank">왼쪽</a> 및 <a href="http://www.php.cn/wiki/905.html" target="_blank">오른쪽</a>에 정상적으로 표시됩니다. 요소의 속성은 무시됩니다. <a href="http://www.php.cn/wiki/903.html" target="_blank">z-index</a> 속성은 항상 0입니다.</p> <p style="text-align: left;">2) 상대</p> <p style="text-align: left;"> 상대 위치 지정은 문서 흐름에서 요소가 차지하는 위치와 크기를 유지하며 left/ 오른쪽/위/아래 여러 속성이 상대 이동 거리를 결정하고 원래 위치는 유지</p> <p style="text-align: left;">3) 절대</p> <p style="text-align: left;"><a href="http://www.php.cn/code/6074.html" target="_blank">절대 위치 지정</a>, 문서에서 개체를 분리합니다. 흐름, /right/top/bottom과 같은 왼쪽 속성을 사용하면 위치 지정 설정이 있는 가장 가까운 상위 요소를 기준으로 절대 위치가 지정됩니다. 그렇지 않은 경우 본문 개체를 기반으로 합니다. </p> <p style="text-align: left;">4) 고정</p> <p style="text-align: left;">고정은 절대와 유사하지만 창의 왼쪽 상단을 기준으로 하며 문서와 함께 스크롤되지 않습니다. 그러나 다중 프레임 페이지에 있는 경우 브라우저의 왼쪽 위 모서리가 아닌 프레임의 왼쪽 위 모서리를 기준으로 합니다. </p> <p style="text-align: left;">11.링크와 @import의 차이점은 무엇인가요? </p> <p style="text-align: left;">1. 조상의 차이. Link는 XHTML 태그에 속하며, @import는 전적으로 CSS에서 제공하는 메소드입니다. </p> <p style="text-align: left;">2. 링크 태그는 CSS 로드 외에도 <a href="http://www.php.cn/wiki/1541.html" target="_blank">RSS</a> 정의, rel 연결 속성 정의 등 다양한 작업을 수행할 수 있습니다. @import는 CSS만 로드할 수 있습니다</p> <p style="text-align: left;">3. 로딩 순서의 차이. 페이지가 로드되면(즉, 뷰어가 볼 때) 링크에서 참조하는 CSS가 동시에 로드되는 반면, @import에서 참조하는 CSS는 페이지가 로드되기 전에 완전히 다운로드될 때까지 기다립니다. 그래서 가끔 @import가 CSS를 로드하는 페이지를 탐색할 때 스타일이 없는 경우가 있습니다(깜빡거림만 있을 뿐입니다) </p> <p style="text-align: left;"> 4. 호환성의 차이. @import는 CSS2.1에서 제안되었기 때문에 기존 브라우저에서는 지원하지 않습니다. @import는 IE5 이상에서만 인식이 가능하지만 링크 태그에는 이런 문제가 없습니다</p> <p style="text-align: left;"> 5. dom을 사용할 때의 차이점 스타일을 제어합니다. JavaScript를 사용하여 스타일을 변경하기 위해 DOM을 제어할 때 @import는 DOM으로 제어할 수 없기 때문에 link 태그만 사용할 수 있습니다. </p> <p style="text-align: left;">12. 위치 지정 속성 값은 무엇입니까? 각각의 가치가 있나요? </p> <p style="text-align: left;">각 속성 값의 기능: </p> <p style="text-align: left;">정적: 기본값. 위치가 정적으로 설정된 요소는 일반적으로 항상 문서 흐름에 의해 지정된 위치에 표시됩니다(정적 요소는 위쪽, 아래쪽, 왼쪽 또는 오른쪽 선언을 무시합니다). </p> <p style="text-align: left;">절대: 상위 요소를 기준으로 한 절대 위치 지정, s는 레이아웃 흐름에서 벗어나 공간을 차지하지 않습니다. 레이어라고 부르는 위치는 가장 가까운 위치에 있는 상위 요소 위치를 기준으로 합니다. "왼쪽", "상단", "오른쪽" 및 "하단" 속성을 직접 지정할 수 있습니다. 상위 요소가 배치되지 않은 경우 html(루트 요소)이 사용됩니다. (스태킹 순서 z-index: 값) </p> <p style="text-align: left;">relative: 기본 위치를 기준으로 한 오프셋 위치 지정으로 왼쪽, 위쪽, 오른쪽 및 오른쪽을 설정하여 일반 위치를 기준으로 위치를 이동할 수 있습니다. (자체 시작 위치를 기준으로 이동, [일반 레이아웃 흐름을 방해하지 않음] </p> <p style="text-align: left;">고정: 브라우저를 기준으로 절대 위치 지정, 브라우저 창의 지정된 좌표를 기준으로 위치 지정. 이 요소는 "left", "top", "right" 및 "bottom" 속성으로 지정할 수 있습니다. </p> <p style="text-align: left;">13. <.>html5<a href="http://www.php.cn/wiki/1118.html" target="_blank"></a>새 <a href="http://www.php.cn/php/php-tp-append.html" target="_blank"> 태그 15개 추가</a></.></p>헤더 탐색 바닥글 <p style="text-align: left;">메인<a href="http://www.php.cn/wiki/646.html" target="_blank"> 외 기사 섹션 그림 데이터 목록 비디오 오디오 fieldest 범례 레이블 캡션</a></p>14. 1. BFC란 무엇인가요? <p style="text-align: left;"></p>1. 블록 수준 서식 컨텍스트<p style="text-align: left;"></p>2. 적응형 2열 레이아웃, 수직성 방지<p style="text-align: left;"> margin<a href="http://www.php.cn/wiki/931.html" target="_blank"> 겹침(두 개의 BFC에 배치) </a></p>3. 루트 요소, <p style="text-align: left;">float<a href="http://www.php.cn/wiki/919.html" target="_blank"> 속성이 없음, 위치가 절대 또는 고정, 표시가 인라인 블록, 테이블-셀 , table-caption, flex, inline-flex, Overflow는 보이지 않습니다</a></p>15. .px, em, rem, pt의 차이점<p style="text-align: left;"></p>1) px는 실제로는 픽셀이므로 px를 사용하세요. 글꼴 크기를 설정할 때 비교적 안정적이고 정확합니다<p style="text-align: left;"></p> 하지만 이 방법에는 우리가 만든 웹 페이지를 브라우저에서 탐색할 때 브라우저를 확대하면 문제가 발생합니다. us 웹<p style="text-align: left;">페이지 레이아웃<a href="http://www.php.cn/code/7955.html" target="_blank">이 깨졌습니다. 따라서 웹페이지의 글꼴을 정의하기 위해 "em"을 사용하는 것이 제안되었습니다. </a></p>2) em은 기준선을 기준으로 글꼴 크기를 조정하는 것입니다. <p style="text-align: left;"></p>em은 상위 요소를 기준으로 글꼴 크기를 설정하는 것이므로 요소를 설정할 때 문제가 발생합니다. 부모 요소의 크기를 알아야 할 수도 있습니다 <p style="text-align: left;"></p>3) rem은 루트 요소의 글꼴 크기를 기준으로 표시됩니다. <p style="text-align: left;"></p>rem은 루트 요소 <html>에 상대적입니다. ;, 즉 루트 요소에서 참조 값만 결정하면 됩니다 <p style="text-align: left;"></p>4) pt의 크기는 1인치의 1/72입니다 <p style="text-align: left;"></p> 파운드: 텍스트 측정 단위 <p style="text-align: left;"><p style="text-align: left;">이 측정 방법은 인쇄 디자인 배경에서 왔으며 미디어에 가장 적합하지만 디스플레이에도 널리 사용됩니다</p><p style="text-align: left;">16. 수직 + 수평 센터링을 달성하는 방법은 무엇입니까? </p><p style="text-align: left;">1.p{너비:200px;높이:200px;<a href="http://www.php.cn/wiki/892.html" target="_blank">배경</a>:#f00;위치:고정;왼쪽:0;오른쪽:0;상단:0;하단:0;여백 :auto;}</p><p style="text-align: left;">2.p{너비:200px;높이:200px;배경:#f00;위치:고정;왼쪽:50%;상단:50%;여백:-100px 0 0 -100px; }</p><p style="text-align: left;">17. 점진적인 향상과 점진적인 저하</p><p style="text-align: left;">점진적인 향상: 낮은 버전의 브라우저용 페이지를 구축하여 가장 기본적인 기능을 보장한 다음 고급 브라우저용 효과 및 상호 작용을 수행합니다. 더 나은 사용자 경험을 달성하기 위한 추가 기능. </p><p style="text-align: left;">우아한 성능 저하: 처음부터 완전한 기능을 구축한 다음 하위 버전 브라우저와 호환되도록 만듭니다</p><p style="text-align: left;">18. CSS 선택기란 무엇인가요? </p><p style="text-align: left;">1) 와일드카드 선택기 *</p><p style="text-align: left;">2) 유형 선택기/요소 선택기 a</p><p style="text-align: left;">3) 속성 선택기 input[type="button"]</p><p style="text-align: left;">4 ) 선택기 p 포함 .code a</p><p style="text-align: left;">5) 하위 개체 선택기 ul.test>li<p style="text-align: left;">6) ID 선택기 #</p> <p style="text-align: left;">7) 클래스 선택기 .</p> <p style="text-align: left;">8) 그룹 선택기 body,ul,li</p> <p style="text-align: left;">9) <a href="http://www.php.cn/code/6014.html" target="_blank">의사 클래스</a> 및 의사 객체 선택기 p<a href="http://www.php.cn/wiki/970.html" target="_blank">:first-letter </a> a<a href="http://www.php.cn/wiki/966.html" target="_blank">:hover</a></p> <p style="text-align: left;">10) 인접 선택자 li+li</p> <p style="text-align: left;">19. 애니메이션과 전환의 차이점 </p> <p style="text-align: left;">동일점: 둘 다 시간에 따라 변하는 요소의 속성값입니다. . </p> <p style="text-align: left;">차이점: 전환은 시간이 지남에 따라 </p> <p style="text-align: left;">css 속성을 변경하기 위해 이벤트(호버 이벤트 또는 클릭 이벤트 등)를 트리거해야 합니다. 애니메이션은 이벤트를 명시적으로 트리거하지 않고도 사용할 수도 있습니다. <a href="http://www.php.cn/code/9595.html" target="_blank">애니메이션</a> 효과를 얻으려면 시간이 지남에 따라 요소의 CSS 속성 값을 지정하려면 명확한 애니메이션 속성 값이 필요합니다. </p> <p style="text-align: left;">20. 표준 <a href="http://www.php.cn/code/6444.html" target="_blank">박스 모델</a>과 이상한 박스 모델은 무엇인가요? 둘의 차이점, 이상한 상자 모델 구현 방법과 표준 합계 모델 </p> <p style="text-align: left;">표준 상자 모델: 콘텐츠+테두리+<a href="http://www.php.cn/wiki/948.html" target="_blank">패딩</a>  </p> <p style="text-align: left;">이상한 상자 모델: 콘텐츠 </p> <p style="text-align: left;">하나는 상자 너비를 계산할 때 테두리와 패딩을 추가하고, 다른 하나는 추가하지 않습니다. </p> <p style="text-align: left;">이상한 상자 모델 구현: box-sizing: border-box</p> <p style="text-align: left;">표준 상자 model: box-sizing: content-box</p> <p style="text-align: left;">21. 상위 요소 내에서 요소를 위, 아래, 왼쪽, 오른쪽 가운데에 배치하는 방법</p> <p style="text-align: left;">css: </p> <p style="text-align: left;">.box {display:flex;width:800px;height:300px ;justify-content:center}</p> <p style="text-align: left;">.box p{align-self:center}</p> <p style="text-align: left;">html:</p> <p style="text-align: left;">< ;p class="box"></p> <p style="text-align: left;"> <p></p></p> <p style="text-align: left;"></p></p> <p style="text-align: left;">22. 비디오 및 오디오 </p> <p style="text-align: left;"> 비디오의 경우: video /ogg video/mp4 video/webm <a href="http://www.php.cn/code/6093.html" target="_blank">audio</a>의 경우: audio/ogg audio/mpeg</p> <p style="text-align: left;">23. <a href="http://www.php.cn/code/10723.html" target="_blank">유연한 상자 모델</a>의 속성 및 속성 값(6개 이상의 속성 작성) </p> <p style="text-align: left;">display:flex;</p> <p style="text-align: left;">flex-<a href="http://www.php.cn/wiki/873.html" target="_blank">direction</a>: </p> <p style="text-align: left;">정렬 콘텐츠:</p> <p style="text-align: left;"> 정렬 항목:</p> <p style="text-align: left;">정렬 자체:</p> <p style="text-align: left;">정렬 콘텐츠:</p> <p style="text-align: left;">flex-wrap: </p> <p style="text-align: left;">23. 선형 그래디언트 및 경로에 대해 간략하게 소개 그래디언트 및 반복 그래디언트 사용법</p> <p style="text-align: left;">선형 그래디언트: 선형-그라디언트()</p> <p style="text-align: left;">방사형 그라디언트: Radial-gradient()</p> <p style="text-align: left;"> 선형 그라디언트 반복: Repeating-linear-gradient()</p> <p style="text-align: left;"> 방사형 그라디언트 반복: Repeating-Radial-Gradient()</p> <p style="text-align: left;">24. 애니메이션의 사용법을 간략하게 소개합니다. </p> <p style="text-align: left;">애니메이션은 두 부분으로 구성됩니다. 애니메이션: 애니메이션 이름 애니메이션 실행 시간 애니메이션 유형 애니메이션 지연 시간 애니메이션 반복 횟수 애니메이션 이름; <a href="http://www.php.cn/wiki/1051.html" target="_blank"></a> 25. css3D의 주요 속성과 속성값 </p> <p style="text-align: left;"> 1. 심도 : perspactive:number; 보고 싶은 객체가 크다면 값을 더 작게 설정하세요 , 개체를 더 작게 보려면 값을 더 크게 설정하세요 </p> <p style="text-align: left;">2. 3D 스테이지: 변환 스타일:preserve-3d;</p> <p style="text-align: left;">3.translateZ()rotateZ()scaleZ() </p> <p style="text-align: left;">26. 2D의 주요 속성</p> <p style="text-align: left;">transform:translate() Rotate() Skew() scale()</p> <p style="text-align: left;">transform-origin:</p> <p style="text-align: left;">27 .전환 애니메이션</p> <p style="text-align: left;">전환: 속성 이름(</p>모두<p style="text-align: left;"> 사용 가능) 애니메이션 실행 시간 애니메이션 유형 애니메이션 지연 시간<a href="http://www.php.cn/wiki/1483.html" target="_blank"></a>28의 속성과 속성값을 간략하게 소개합니다. . css3</p> <p style="text-align: left;"><a href="http://www.php.cn/code/6021.html" target="_blank"></a> background-origin</p>의 새로운 <p style="text-align: left;">배경 속성: 배경 원점<a href="http://www.php.cn/code/865.html" target="_blank"></a></p>배경 클립<p style="text-align: left;">:배경 자르기<a href="http://www.php.cn/code/868.html" target="_blank"></a></p>배경 크기<p style="text-align: left;">:<a href="http://www.php.cn/code/872.html" target="_blank">배경 이미지의 크기 </a><a href="http://www.php.cn/code/8294.html" target="_blank"></a>다음은 배경 크기의 세 가지 값입니다</p> <p style="text-align: left;">길이</p> <p style="text-align: left;">는 배경 이미지의 크기를 지정합니다. 첫 번째 값은 너비이고 두 번째 값은 높이입니다. </p> <p style="text-align: left;">백분율(%)</p> <p style="text-align: left;">배경 이미지 크기를 백분율로 설정 </p> <p style="text-align: left;">표지</p> <p style="text-align: left;">배경 이미지를 충분히 크게 확대하여 배경 이미지를 배경 영역을 완전히 덮는다 </p> <p style="text-align: left;"> 29. 5대 브라우저의 핵심과 대표작 작성 </p> <p style="text-align: left;">*Trident: IE, Maxthon, Tencent, Theworld, 360 Browser </p> <p style="text-align: left;">*Gecko:: 대표작 Mozilla Firefox는 오픈소스입니다 </p> <p style="text-align: left;">*Webkit: 대표작 Safari와 Chrome은 오픈소스 프로젝트입니다. </p> <p style="text-align: left;">*Presto: 대표작 Opera, Presto는 Opera Software에서 개발한 브라우저 레이아웃 엔진입니다. 또한 세계에서 가장 빠른 렌더링 엔진으로 인정받고 있습니다. </p> <p style="text-align: left;">*Blink: Google과 Opera Software가 개발한 브라우저 레이아웃 엔진으로 2013년 4월에 출시되었습니다. </p> <p style="text-align: left;">30. IE6의 몇 가지 일반적인 버그와 해결책을 적습니다(4개 이상) </p> <p style="text-align: left;">1) 그림에 테두리가 있습니다. BUG 해결 방법: 그림에 border:0 또는 border:0을 추가하세요. none;</p> <p style="text-align: left;">2. 이중 부동 방향(이중 여백) 해결책: display:inline</p> <p style="text-align: left;">3. 기본 높이(IE6, IE7) 해결책: 요소에 선언 추가: 글꼴 크기:0; 옵션 2: 요소에 명령문 추가: Overflow:hidden;</p> <p style="text-align: left;"> 4. 버튼 요소의 기본 크기는 다릅니다. 옵션: 태그를 사용하여 </p> <p style="text-align: left;"> 시뮬레이션합니다. 필터 </p>어떤 것들이 있나요? <p style="text-align: left;"><a href="http://www.php.cn/code/120.html" target="_blank">1._ 밑줄 속성 필터 </a></p>2.9: 다른 브라우저에서는 구문을 인식하지 못합니다: selector {속성: 속성 값 9;}<p style="text-align: left;"></p>3.<p>위 내용은 웹 프론트엔드 상식 학습 상세 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="부트스트랩 IE8 호환성 처리를 사용하는 방법" href="https://m.php.cn/ko/faq/358069.html">부트스트랩 IE8 호환성 처리를 사용하는 방법</a></span><span>다음 기사：<a class="dBlack" title="부트스트랩 IE8 호환성 처리를 사용하는 방법" href="https://m.php.cn/ko/faq/358073.html">부트스트랩 IE8 호환성 처리를 사용하는 방법</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="https://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ko/faq/841.html" title="CSS 작성 시 Border에 대해 주의해야 할 사항 요약" class="aBlack">CSS 작성 시 Border에 대해 주의해야 할 사항 요약</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/961.html" title="다중 스타일 선택 및 스타일 실시간 전환 구현 방법_경험 교환" class="aBlack">다중 스타일 선택 및 스타일 실시간 전환 구현 방법_경험 교환</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/1345.html" title="Marquee의 상세한 사용 분석" class="aBlack">Marquee의 상세한 사용 분석</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/269082.html" title="CSS标题线（删除线贯穿线效果）实现" class="aBlack">CSS标题线（删除线贯穿线效果）实现</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/269606.html" title="CSS3中优雅降级和渐进增强的区别" class="aBlack">CSS3中优雅降级和渐进增强的区别</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p></div><div class="footermid"><a href="https://m.php.cn/ko/about/us.html">회사 소개</a><a href="https://m.php.cn/ko/about/disclaimer.html">부인 성명</a><a href="https://m.php.cn/ko/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>