프런트 엔드 학교 모집의 CSS 지식

이 문서에서는 다음과 같은 네 가지 측면을 소개합니다 :

• 선택자
• 스타일 시트 상속
• CSS3 몇 가지 특성
• BFC

CSS 선택 우선 순위 정책

먼저 링크를 첨부 : CSS 선택기 참조 설명서

= 속성 선택기 의사 클래스 선택기> 태그 = 가상 요소 선택기 인라인> ID> 클래스

우선 특별한 사정이 :! 중요

(A)에서 스타일 문을 사용하는 경우  !important 시간 규칙이 문은 추가 요구를 다룰 것입니다. 기술적으로하지만  !important 우선 순위 관련이없는

스타일 시트 상속

CSS의 주요 기능은 그것이 조상에 의존, 상속 - 관계의 후손. 상속은 스타일 만이 아니라 자손에 적용 할 수있는, 특정 요소에 적용 할 수 없습니다 수있는 메커니즘이다. BODY 예는 컬러 값이 단락의 텍스트에 적용되는 정의한다.

갈등의 상속 패턴의 결과는 최근의 조상은 (최근 원칙)을 수상합니다.

그것은 스타일이 무엇을 상속 할 수 있듯이? 그건 내가 시작되지 않습니다, 너무 많이, 그리고 여기에 첨부 된 상세한 링크를

CSS3

오래된 규칙은 먼저 스윙 링크는 하, 하, 하 나는 → 너무 게으른 아니었다 CSS3

그리고 우리는이에 대한 몇 가지를 선택 :

A, 플렉스 그리드 레이아웃

약 2 레이아웃, 루안 이풍 교사 쓰기 정말 좋은, 내가 직접 링크를 넣어 원하고, 아니, 나는 단순히 약간의 쓰기

(하지만 우리는 여전히 →이 링크 f를 넣어 렉스 튜토리얼    그리드 튜토리얼 )

1) 플렉스

플렉스 레이아웃 요소를 사용하여 컨테이너를 불렀다. 그것은 모든 자식 요소가 자동으로 프로젝트라는 용기의 구성원이 될합니다.

컨테이너 속성은 다음과 같습니다

방향 플렉스 : 행 | 행-역 | 칼럼 | 프로젝트의 역 열 결정의 배열 방향

랩 플렉스 : 파라미터 nowrap | 랩 | 랩 역은할지 여부를 결정 프로젝트뿐만 아니라 어떻게 랩을 감싸는

플렉스 유량 : 굴곡 방향과 플렉스 랩 기본 값 행 랩 약식

내용 - 더 정당화 : 플렉스 시작 | 플렉스 엔드 | 센터 | 공간 사이 | 가로축의 맞춤 주위 공간 정의 된 프로젝트

여기에 공간 사이의 공간 주변의 주요 참고

정렬-항목 :flex-start|flex-end|center|baseline|stretch 定义项目在纵轴上如何对齐

콘텐츠 정렬 : 축 정렬 된 복수의 정의. 프로젝트가 하나의 축 인 경우,이 건물은 작동하지 않습니다.

프로젝트 속성은 다음과 같습니다

• 순서 : 프로젝트에 정의 된 순서, 작은 더 기대 값
• - 플렉스 성장 : 확대하여 정의 된 프로젝트, 기본값은 0
• 수축 플렉스 : 감속비 정의 프로젝트는 기본이 1
• 플렉스 기준 : 여분의 공간, 스핀들에 의해 점령 프로젝트 공간, 자동 기본값을 할당하기 전에 정의
• 플렉스 : 시 flex-grow,  flex-shrink 그리고  flex-basis속기
• 정렬 셀프 : 다른 항목 단품 덮고 다른 배향 가지고있게 align-items특성

 

2) 그리드

플렉스는 레이아웃 축이다 2 차원 레이아웃 일차원 그리드는 행과 열로 분할된다

컨테이너 속성 :

디스플레이 : 그리드 | 인라인 그리드

열 너비는 각 열 / 행에 대해 정의 : 그리드 템플릿 - 열 / 행

격자 행 / 열 갭 : 컬럼 세트 행간 / 피치

그리드 자동 흐름 : 행 | 열 순서는 첫 번째 행 또는 첫 열 내원 후 결정

 

두 필터 필터 속성

이 속성을 사용하면 사용하지 않거나 인상하지 않은 수 있지만, 아직 사방 않습니다.

필터 : 없음 | 흐림 () | 휘도 () | 대조 () | 드롭 - 그림자 () | 그레이 스케일 () | 색상 - 회전 () | 반전 () | 불투명도 () | 포화 () | 세피아 () | URL ();

가장 일반적인 필터 : 흐림 (PX), 화상 세트에 가우스 블러 더 큰 값을 더 흐리게

기타 사항, 제발 ~ 여기 찌를

 

셋째, 미디어 쿼리 & 렘

미디어 문의 @media

우리가 반응 페이지 디자인을 필요로 할 때 미디어가 다양한 화면 크기에 대해 서로 다른 스타일을 설정할 수 있습니다 @, 미디어 쿼리는 매우 유용합니다.

语法 : @media의 MediaType에와 | 하지 | 전용 (미디어 기능)

MediaType에 모든 / 인쇄 / 화면 / 음성

일반적인 미디어 기능 :

최대 폭 / 최소 폭 : 장치 최대 최소 페이지 표시 영역 폭

방향 : 세로 / 가로 세로 또는 가로

렘

모바일 단말 적응을 위해 사용 렘은, 먼저, 렘과 그들을 구별 할 수

때문에 그들을 상속 할 상위 요소의 크기에 텍스트 개체의 현재 글꼴 크기에 그들을 상대, 그래서 더 복잡한 측면에서 깊은 페이지 수준

루트 요소의 크기에 REM의 상대는, 루트 요소를 조정할 수있는 모든 요소의 크기를 수정 만 수행 할 수 있습니다

JS 루트 요소 폰트 크기를 배치 :

우리는 750px의 초안을 설계 가정, 그것은 글꼴 크기 100 픽셀의 루트 요소입니다 제공

< 스크립트 타입 = "텍스트 / 자바 스크립트" > 
        / * 动态调整REM值,除以100 * / 
        기능 에는 setSize () {
           VAR winW = document.documentElement.clientWidth, 
              winH = document.documentElement.clientHeight, 
            baseFontSize =  100 , 
            baseWidth =  750 , 
            winWidthSize = Math.min (winW, winH);
          경우 (winWidthSize <  270 ) { 
            winWidthSize =  270  ;
          }
           VAR _html = document.getElementsByTagName ( " HTML " ) [ 0 ]; 
          _html.style.fontSize = winWidthSize / baseWidth * baseFontSize +  ' 픽셀 ' ; 
        } 
        에는 setSize (); 
    </ 스크립트 >

 

四, 변환 및 애니메이션

변환 변환

CSS 변환 요소는, 이동 스케일링, 회전, 신장 또는 신장 될 수있다

구문 : 변환 : 변환 방법

tranform-기원 : 기원의 변환 소자 변경

2D 변환 방법 :

매트릭스 (또는 그 이상을 조합) (PAN) 번역 회전 (회전), 스케일 (크게) (경사) 스큐

3D 속성을 변환 :

변환 - 스타일 : 평면 | 보존-3D

관점 : 여기서, 소자의 시야각을 설정

관점 출처 : 바닥 요소 3D의 위치를 ​​설정

이면에는 시인성 : 화면 대향하지 않을 때는 요소 정의가 보이는

 

전환 전환

당신은 당신이 같은 전환 등의 CSS 속성과 효과를 추가 할 효과의 지속 시간을 지정해야합니다 : 모두 2 초를

트랜 속성 :

전이 특성 : 응용 프로그램 전환 CSS 속성의 이름

전이 기간 : 그것은 전환 효과를 정의하는 데 걸리는 시간, 0 기본

전환 타이밍 기능 : 용이성 | 선형 | 용이성 / 아웃 | 큐빅 베 지어 () 소정 시간 곡선 전환 효과

전환 지연 : 지정된 전환 효과를 시작할 때, 기본값은 0

 

애니메이션 애니메이션

CSS3 애니메이션을 만들려면 @keyframes 규칙을 알아야합니다.

• @keyframes 규칙은, 애니메이션을 만들 CSS 스타일을 지정하고 애니메이션이 점차적으로 새로운 스타일의 현재 스타일로 변경됩니다 것입니다.
• @keyframes에서 애니메이션을 만들 때, 선택기에 바인딩 그렇지 않으면 애니메이션이 적용되지 않습니다.
• @keyframes에서 백분율 소정의 시간에, 또는 "에서"키워드로 변화와 0 %에서 100 %로 "을"동등한를 바랍니다.

/ * div 요소에 묶여, 기간은 "죠아"애니메이션 : 5초 * / 
DIV 
{ 
    애니메이션 : 죠아 5S는; 
} 

 / * 변경 후 애니메이션이 25 %와 50 % 일 때의 배경색을 변경하고 다시 때 애니메이션 100 % 완료 * / 
@keyframes 죠아 
{ 
    0 % {배경 : 빨강;} 
    25 % {배경 : 노란색;} 
    50 % {배경 : 블루;} 
    100 % {배경 : 녹색;} 
}

 

다섯, BFC

BFC는 무엇입니까?

BFC (블록 포맷 컨텍스트) 블록 레벨 포맷 컨텍스트 카세트 레이아웃 모델의 웹 CSS 렌더링 모드, 별도의 컨테이너 수단.

BFC 형성 조건

• 플로트의 없음 이외의 float 값
• 위치 결정 소자의 위치 (고정 절대)
• 디스플레이 : 인라인 블록 테이블 셀, 플렉스, 그리드
• 가시 광선 이외의 플로우 값

BFC의 주요 특징

• BFC 요소 생성은, 아이는 그 붕괴의 높이가 아니라, 계산의 플로트 높이에 참여할 것입니다.
• 플로팅 소자에 인접하여, BFC 요소를 만드는, 그들은 서로 부동 요소를 커버 할 수 없다.
• BFC는 자녀가 발생하지 않습니다 폴딩에서 외부 요소를 만들었습니다.
• 한 내부 박스는 후 수직 방향으로 배치.
• 자식 요소 내부 BFC는 외부 요소에 영향을 미치지 않습니다.