CSS
CSS 박스 모델을 소개하시나요?
(1) IE 박스 모델과 표준 W3C 박스 모델의 두 가지 유형이 있습니다. IE의 콘텐츠 부분에는 테두리와 패딩이 포함됩니다.
(2) 박스 모델: 콘텐츠, 패딩, 여백, 테두리.
CSS 선택자? 어떤 속성을 상속받을 수 있나요? 우선순위 알고리즘은 어떻게 계산되나요? CSS3의 새로운 의사 클래스는 무엇입니까?
* 1. id 선택자 (# myid)
2. 클래스 선택자 (.myclassname)
3. 태그 선택자 (div, h1, p)
4. 인접 선택자 (h1 + p)
5. 하위 선택자 (ul < ; li)
6. 하위 선택자(li a)
7. 와일드카드 선택자(*)
8. 속성 선택자(a[rel = "external"])
9. 의사 클래스 선택 컨테이너(a: hover, li: n번째 - 하위)
* 상속 가능한 스타일: 글꼴 크기 글꼴 계열 색상, UL LI DL DD DT;
* 상속 불가능한 스타일: 테두리 패딩 여백 너비 높이;
* 우선순위 원칙, 가장 가까운 스타일 정의가 우선합니다.
* 로딩 스타일은 마지막으로 로딩된 위치에 따릅니다.
!important > class > tag
important는 inline
CSS3입니다. 새로운 의사 클래스 예:
p:first-of-type은 상위 요소의 첫 번째 <p> 요소에 속하는 각 <p> 요소를 선택합니다.
p:last-of-type은 상위 요소의 마지막 <p> 요소를 모두 선택합니다.
p:only-of-type은 상위 요소의 유일한 <p> 요소를 선택합니다.
p:only-child 상위 요소의 유일한 하위 요소인 각 <p> 요소를 선택합니다.
p:nth-child(2) 상위 요소의 두 번째 하위인 각 <p> 요소를 선택합니다.
:enabled :disabled는 양식 컨트롤의 비활성화 상태를 제어합니다.
:checked 라디오 버튼이나 체크박스가 선택되어 있습니다.
div를 중앙에 배치하는 방법은 무엇입니까? 부동 요소를 중앙에 배치하는 방법은 무엇입니까?
div에 너비를 설정한 다음 margin:0 자동 속성을 추가하세요
div{
width:200px;
margin:0 auto;
}
플로팅 요소 중앙에 배치
컨테이너의 너비, 높이, 500 및 높이 300 레이어 결정
레이어의 외부 여백 설정
.div {
Width:500px; height:300px;//높이 생략 가능
Margin: -150px 0 0 - 250px;
position :relative; 상대 위치
background-color:pink;//효과를 보기 쉽습니다
left:50%;
top:50%;
}
표시 값을 나열하고 설명합니다. 기능. 위치, 상대 및 절대 위치 결정 원점의 값은 무엇입니까?
1.
블록은 블록형 요소처럼 표시됩니다.
기본값은 없습니다. 인라인 요소 유형처럼 표시됩니다.
inline-block은 인라인 요소처럼 표시되지만 내용은 블록형 요소처럼 표시됩니다.
list-item은 블록형 요소처럼 표시되며 스타일 목록 마크업을 추가합니다.
2.
*절대
정적 위치 지정이 아닌 첫 번째 상위 요소를 기준으로 위치가 지정된 절대 위치 요소를 생성합니다.
*고정됨(이전 IE는 지원하지 않음)
브라우저 창을 기준으로 절대 위치에 있는 요소를 생성합니다.
*relative
일반 위치를 기준으로 상대적으로 배치된 요소를 생성합니다.
* 정적 기본값. 위치 지정이 없으면 요소는 일반 흐름
*으로 나타납니다(상단, 하단, 왼쪽, 오른쪽 Z-인덱스 선언은 무시됨).
* 상속은 상위 요소에서 위치 속성 값을 상속하도록 지정합니다.
CSS3의 새로운 기능은 무엇인가요?
CSS3는 둥근 모서리(border-radius:8px), 그림자(box-shadow:10px)를 구현합니다.
텍스트에 특수 효과 추가(text-shadow,), 선형 그라디언트(gradient), 회전(transform)
변환:회전 ( 9deg) scale(0.85,0.90)translate(0px,-30px)skew(-9deg,0deg);//회전, 크기 조정, 위치 지정, 기울기
더 많은 CSS 선택기 추가 다중 배경 rgba
전체 방법
자주 접하는 CSS의 호환성은 무엇인가요? 원인과 해결책은?
CSS 스타일을 초기화하는 이유.
- 브라우저 호환성 문제로 인해 일부 태그에 대해 브라우저마다 기본값이 다릅니다. CSS가 초기화되지 않으면 브라우저 간에 페이지 표시 차이가 자주 발생합니다.
- 물론 초기화 스타일이 SEO에 어느 정도 영향을 미치겠지만 케이크를 들고 먹을 수도 없지만 최소한의 영향으로 초기화하도록 노력하세요.
*가장 간단한 초기화 방법은 다음과 같습니다: * {padding: 0; margin: 0;} (권장하지 않음)
Taobao 스타일 초기화:
body, h1, h2, h3, h4, h5, h6, hr, p , blockquote , dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, 버튼, 입력, 텍스트 영역, th, td { margin:0 }
body, 버튼, 입력, 선택 , 텍스트 영역; { 글꼴:12px/1.5tahoma, arial, 5b8b4f53; }
h1, h2, h3, h4, h5, h6{ 글꼴 크기:100% }
address, cite, dfn, em, var { 글꼴 스타일:normal ; }
code, kbd, pre, samp { 글꼴 패밀리:couriernew, courier, monospace }
small{ 글꼴 크기:12px }
ul, ol { 목록 스타일: 없음 }
a { :none; fieldset, img { border:0 }
button, input, select, textarea { 글꼴 크기:100% }
table { border-collapse:collapse:0 }
absolute 일반 흐름과 다른 블록을 포함하는 계산 방법은 무엇입니까?
위치, 표시, 여백 축소, 오버플로, 부동의 기능이 서로 겹쳐지면 어떻게 될까요?
BFC 사양을 이해하셨나요?
(W3C CSS 2.1 사양의 개념으로 요소의 콘텐츠 위치와 다른 요소와의 관계 및 상호 작용을 결정합니다.)
css에 의해 정의된 가중치
다음은 가중치에 대한 규칙입니다. Weight는 1, 클래스의 가중치는 10, id의 가중치는 100입니다. 다음 예에서는 다양한 정의의 가중치 값을 보여줍니다.
/*가중치는 1*/
div{
}
/* 가중치는 10*/
.class1{
}
/*가중치는 100*/
#id1{
}
/*가중치는 100+1=101*/
#id1 div{
}
/* 가중치는 10+1=11* /
.class1 div{
}
/*가중치는 10+10+1=21*/
.class1 .class2 div{
}
가중치가 같다면, 마지막으로 정의된 스타일은 작동하지만 이는 피해야 합니다. 이런 상황이 발생합니다
float와 작동 원리를 설명하시겠습니까? 부동 소수점 지우기 팁
모바일 레이아웃에 미디어 쿼리를 사용해 본 적이 있나요?
CSS 전처리기를 사용하시겠습니까? 그거 좋아해?
SASS
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
인터뷰를 두려워하지 마세요