CSS 일반적인 면접 질문

CSS 소개
1. 인라인 스타일, 2. 내부 스타일 시트, 3. 외부 스타일 시트

링크 @import
a가 제공됩니다. by CSS 이며 CSS

b만 로드할 수 있습니다. 페이지가 로드되면 링크도 동시에 로드되며, @import에서 참조하는 CSS는 로드되기 전에 페이지가 로드될 때까지 기다립니다

c. IE5 이상에서 인식되며, 링크는 HTML 태그이며 호환성 문제가 없습니다

d. Javascript를 사용하여 제어할 때 링크 모드 스타일의 가중치가 더 높습니다. DOM을 사용하여 스타일을 변경하면 @import는 DOM이 아닌 CSS만 볼 수 있으므로 링크 모드만 사용할 수 있습니다.

CSS 기본 선택기:

1. 태그 선택기 요소

2. ).
3. ID 선택자 4개 #
4. 와일드카드 선택자*

주제 추천

: 2020 CSS 면접 질문 요약(최신)

CSS 복합 선택자:

하위 선택자 E>F

하위 요소 선택자
교차점 선택기
union 선택기,
link 의사 클래스 선택기 lvha
단일 콜론(:)은 CSS3 의사 클래스에 사용되고, 이중 콜론(::)은 CSS3 의사 요소에 사용됩니다

<ul> 
<p>111</p> 
<span>222</span> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
</ul>

li:nth-of- type(2): ul 요소 아래의 두 번째 li를 나타냅니다.

li:nth-child(2): li 요소이자 ul 아래의 두 번째 요소임을 나타냅니다(찾을 수 없음).

일반적으로 문제가 발생할 가능성이 적은 n번째 유형을 사용하는 것이 좋습니다.
CSS의 세 가지 주요 기능: CSS 캐스케이딩, CSS 상속, CSS 우선순위
CSS 레이아웃에 대한 이해에 대해 이야기해 보세요.

Box 모델

플로팅 메소드 지우기:

1. 추가할 태그 메소드,

<p style="clear:both"></p>

2. 레벨의 오버플로 속성

3. 의사 요소 뒤에 사용하여 부동 소수점

.clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   .clearfix {*zoom: 1;}   /* IE6、7 专有 */。

4. 이중 의사 요소를 사용하여 부동 소수점 삭제

위치 지정 모드 및 가장자리 오프셋:

요소 표시 및 숨기기:

display:none;

overflow : 숨김

마우스 스타일 커서

기본 Xiaobai 기본값, 포인터 손, 이동 이동, 텍스트 텍스트, 허용되지 않는 금지

수직 정렬 수직 정렬

오버플로 텍스트 줄임표 표시

1.white-space:nowrap 텍스트를 강제로 켜짐 한 줄 표시

2.overflow: Hidden은 초과된 부분을 숨길 때 숨겨집니다
3.text-overflow: 줄임표는 개체의 텍스트가 넘칠 때 생략 표시를 표시합니다

일반적인 레이아웃 방법:

고정 레이아웃,

flow ( %) 레이아웃,
탄성(플렉스) 레이아웃,
rem 레이아웃
플로팅 레이아웃, 클리어 플로트
포지셔닝 레이아웃,
margin and padding

블록 수준 요소가 세로로 중앙에 배치됨

p를 위, 아래, 왼쪽, 오른쪽에 가운데 배치하는 방법

1.
왼쪽:50%; 위쪽:50%
변환: 번역(-50%,-50%)
2.
왼쪽:0; 오른쪽: 0; 3.px
CSS의 세 가지 주요 기능: 계단식 상속 우선순위
상속할 수 있는 속성
텍스트 관련: 글꼴 계열, 글꼴 크기, 글꼴 스타일, 글꼴 변형, 글꼴 두께, 글꼴, 문자 간격, 줄 높이, 색상

목록 관련: 목록 스타일 이미지, 목록 스타일 위치, 목록 스타일 유형, 목록 스타일

새로운 CSS3 기능

둥근 모서리 구현(테두리 반경), 그림자(상자) -shadow), 텍스트에 대한 특수 효과(text-shadow), 선형 그라데이션(gradient), 변환

더 많은 CSS 선택기 다중 배경 rgba를 추가했습니다. CSS3에 도입된 유일한 의사 요소는 ::selection, media query, multi- 컬럼 레이아웃

link @import
a 링크는 HTML 태그이며, @import는 CSS에서 제공됩니다. CSS

b만 로드할 수 있습니다. 페이지가 로드되고 링크도 동시에 로드되며 @import에서 참조하는 CSS는 로드되기 전에 페이지가 로드될 때까지 기다립니다

c에서만 인식할 수 있습니다. IE5 이상, 링크는 HTML 태그이므로 호환성 문제는 없습니다

d.링크 방식 스타일을 변경하기 위해 Javascript를 사용하는 경우 DOM을 제어하는 ​​경우 @import

e의 가중치보다 높습니다. , @import는 제어할 수 있는 DOM이 아닌 CSS만 보기 때문에 링크 방법만 사용할 수 있습니다.

CSS 기본 선택기:

1. 태그 선택기 요소

2. 클래스 선택기(다중 클래스 이름 선택기)

3. ID 선택자 4개 # 4. 와일드카드 선택자 *

CSS 복합 선택기:
하위 선택기 E>F
하위 요소 선택기
교차점 선택기
Union 선택기,
링크 의사 클래스 선택기 lvha
CSS3 의사 클래스의 경우 단일 콜론(:), CSS3의 경우 이중 콜론(:) pseudo-elements

<ul> 
<p>111</p> 
<span>222</span> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
</ul>

li:nth-of-type(2): ul
li:nth-child(2) 아래의 두 번째 li 요소를 나타냅니다.: li 요소이자 ul 아래의 두 번째 요소임을 나타냅니다. 찾을 수 없습니다).
일반적으로 문제가 발생할 가능성이 적은 n번째 유형을 사용하는 것이 좋습니다.
CSS의 세 가지 주요 기능: CSS 캐스케이딩, CSS 상속, CSS 우선순위
CSS 레이아웃에 대한 이해에 대해 이야기해 보세요.

Box 모델

플로팅 메소드 지우기:
1. 추가할 태그 메소드,

<p style="clear:both"></p>

2. 레벨의 오버플로 속성
3. 의사 요소 뒤에 사용하여 부동 소수점

.clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   .clearfix {*zoom: 1;}   /* IE6、7 专有 */。

4. 이중 의사 요소를 사용하여 부동 소수점 삭제

위치 지정 모드 및 가장자리 오프셋:

요소 표시 및 숨기기:
display:none;
overflow : 숨김

마우스 스타일 커서
기본 Xiaobai 기본값, 포인터 손, 이동 이동, 텍스트 텍스트, 허용되지 않는 금지
수직 정렬 수직 정렬

오버플로 텍스트 줄임표 표시
1.white-space:nowrap 텍스트를 강제로 켜짐 한 줄 표시
2.overflow: Hidden은 초과된 부분을 숨길 때 숨겨집니다
3.text-overflow: 줄임표는 개체의 텍스트가 넘칠 때 생략 표시를 표시합니다

일반적인 레이아웃 방법:
고정 레이아웃,
flow ( %) 레이아웃,
탄성(플렉스) 레이아웃,
rem 레이아웃
플로팅 레이아웃, 클리어 플로트
포지셔닝 레이아웃,
margin and padding

블록 수준 요소가 세로로 중앙에 배치됨
p를 위, 아래, 왼쪽, 오른쪽에 가운데 배치하는 방법
1.
왼쪽:50%; 위쪽:50%
변환: 번역(-50%,-50%)
2.
왼쪽:0; 오른쪽: 0; 3.px
CSS의 세 가지 주요 기능: 계단식 상속 우선순위
상속할 수 있는 속성
텍스트 관련: 글꼴 계열, 글꼴 크기, 글꼴 스타일, 글꼴 변형, 글꼴 두께, 글꼴, 문자 간격, 줄 높이, 색상

목록 관련: 목록 스타일 이미지, 목록 스타일 위치, 목록 스타일 유형, 목록 스타일

새로운 CSS3 기능

둥근 모서리 구현(테두리 반경), 그림자(상자) -shadow), 텍스트에 대한 특수 효과(text-shadow), 선형 그라데이션(gradient), 변환

더 많은 CSS 선택기 다중 배경 rgba를 추가했습니다. CSS3에 도입된 유일한 의사 요소는 ::selection, media query, multi- 열 레이아웃

관련 튜토리얼 권장 사항:

CSS 비디오 튜토리얼

위 내용은 CSS 일반적인 면접 질문의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!