2020년 6월 26일 노트

CSS
CSS 고급 기술
요소 표시 및 숨기기
목적: 원소를 페이지에서 사라지게 하지만 원본 코드에서 삭제하지 않습니다.장면: 사이트 광고, 클릭하면 닫힐 때 사라지고 새로 고치면 다시 나타난다.
디스플레이 디스플레이
객체의 표시 여부 및 표시 방법을 설정하거나 읽어들입니다.

/*    */
display: none;
/*          ，         。*/
display: block;

숨겨진 위치는 더 이상 유지되지 않습니다.
visibility 가시성
객체 표시 여부 설정 또는 읽어들이기

visibility: visible;     
visibility: hidden;     

숨겨진 후 계속 위치 유지
오버플로우 넘침
객체의 컨텐트가 지정된 높이나 너비를 초과할 때 컨텐트를 관리하는 방법을 읽어들이거나 설정합니다.

overflow:   ;

매개 변수:visible: 내용을 잘라내지 않고 스크롤 바를 추가하지 않습니다(기본 매개 변수).hidden: 대상의 크기를 초과한 내용을 표시하지 않고 초과한 부분은 숨깁니다.scroll: 내용을 초과하든지 말든지 스크롤 바를 표시합니다.auto: 스크롤 막대 자동 표시를 초과합니다.
CSS 사용자 인터페이스 스타일
마우스 스타일cursor

cursor:   ;

매개 변수:default:기본값;pointer: 하얀 작은 손;move: 네모난 화살표 이동하기;text: 텍스트;not-allowed: 금지;
아웃라인 아웃라인
는 요소 주위에 그려진 선으로 경계 가장자리의 외곽에 위치하며 요소를 강조 표시하는 역할을 합니다.

outline: outline-color||outline-style||outline-width

그러나 우리는 일반적으로 사용하지 않고 모두 직접 제거한다.

outline: 0;
outline: none;

텍스트 필드 드래그 방지 resize
실제 개발할 때, 우리의 텍스트 영역의 오른쪽 아래쪽은 드래그할 수 없습니다.

"resize: none;"> 

vertical-align 수직 정렬

폭이 있는 블록급 원소를 수평으로 가운데로 둔다: margin: 0 auto;

가운데 맞춤: text-align: center;

인라인 요소 또는 인라인 블록 요소를 수직으로 정렬: vertical-align: baseline||top||middle||bottom; 일반적으로 그림/폼과 문자의 수직 정렬을 제어합니다.
그림, 폼 및 텍스트 정렬
기본 그림은 텍스트 기선과 정렬됩니다.
그림 밑의 빈 틈을 제거하다
원인: 그림이나 폼 등 줄 안의 요소 밑줄은 기본적으로 부모 상자의 기선과 일치하여 그림 밑부분에 공백이 생길 수 있습니다.해결 방법:

vertical-align을 사용하여 수직 정렬을 수정합니다.

img에display:block 추가하기;블록 레벨 요소로 변환합니다.

넘쳐나는 문자는 생략호로 표시한다
3부작:

/*      */
white-space: nowrap;
/*        ，       */
overflow: hidden;
/*        （...）  */
text-overflow: ellipsis;

white-space
일반적으로 한 행의 컨텐트를 강제로 표시하는 객체의 텍스트 표시 방식을 설정하거나 읽어들입니다.

white-space: normal;       
white-space: nowrap;              ，         br  

text-overflow 텍스트 넘침
객체의 텍스트 오버플로우를 나타내기 위해 줄임표(...)를 사용할지 여부를 설정하거나 읽어들입니다.

text-overflow: clip;       （...）      ；
text-overflow: ellipsis;              （...）。

CSS 엘프 기술(sprite)
사용자가 한 사이트를 방문할 때 서버에 요청을 보내야 하며, 웹 페이지의 모든 사진은 한 번의 요청을 거쳐야만 불러올 수 있다.웹 페이지에 그림이 너무 많을 때 서버는 빈번하게 요청을 받아들이고 발송하기 때문에 웹 페이지의 마운트 속도를 크게 낮출 수 있다.서버가 요청을 받아들이고 발송하는 횟수를 효과적으로 줄이고 페이지의 마운트 속도를 높이기 위해 CSS정령기술(CSS스피릿, CSS사이다)이 등장했다.
CSS 엘프 기술 설명
CSS정령은 사실 웹 페이지의 배경 이미지를 큰 그림에 통합시키는 것이다(정령도).사용할 때 각 웹 페이지 요소는 보통 정령도 중의 어느 위치의 작은 그림에만 사용된다.이때 우리는 다음과 같이 사용해야 한다.

background-image

background-repeat

background-position

가장 중요한 것은position을 사용하여 정확한 위치를 정하는 것이다.
엘프 기술 사용의 핵심 총결
CSS 정령 기술은 주로 배경 그림에 대한 것이기 때문에 삽입된 그림img은 이 기술을 사용할 필요가 없다.

각 작은 그림의 크기와 위치를 정확하게 측정한다.

상자에 작은 그림을 지정할 때 배경 위치의 x값과 y값은 기본적으로 복사됩니다.

정령도를 만들다
대부분의 경우 미공이 정령도를 만들어서 하지 않아도 그녀에게 요구를 해서 시킬 수 있다.

                  ，         。
             ；
       ，     ，              。

작은 회사에서는 배경 그림이 적은 상황에서 정령 기술을 사용할 필요가 없고 유지 보수 비용이 너무 높다.배경 그림이 많으면 정령 기술을 사용하는 것을 권장합니다.