일반적인 CSS 속성 요약

******* 일반적인 CSS 속성 *********

z-index:

auto(기본값)

객체의 스택 순서를 검색하거나 설정합니다.

병렬 객체의 경우 이 속성 매개변수의 값이 클수록 맨 위에 더 높게 쌓입니다.

두 개체의 이 속성이 동일한 값을 갖는 경우 HTML 문서에서 흐르는 순서에 따라 계단식으로 배열되며 나중에 작성된 개체가 이전 개체를 덮어씁니다.

이 값을 적용하려면 위치 속성 값을 상대 | 절대 | 페이지로 정의해야 합니다.

의 해당 스크립트 기능은 zIndex입니다.

------------------------- --- ---------------------------------- --- ----------

clip: 개체의 표시 영역을 검색하거나 설정합니다. 영역 밖의 부분은 투명합니다.

이 속성을 사용하려면 position 값을 절대값으로 설정해야 합니다.

auto: 객체 클리핑 없음

Rect(|auto |auto |auto |auto): 상단 오른쪽 하단 기준 -left 순서는 (0,0) 좌표에 대해 개체의 왼쪽 상단에서 계산된 4개의 오프셋 값을 제공합니다. 이 값은 모두 자동으로 대체될 수 있습니다. 즉, 이 가장자리는 그렇지 않습니다. 잘렸다.

왼쪽 위 방향으로 자르기: 0부터 설정 값까지 자르기 시작합니다. 즉, 왼쪽 위 방향의 자동 값은 0과 같습니다.

오른쪽 자르기; -낮은 방향: 설정에서 시작 값은 가장 오른쪽과 아래쪽 가장자리까지 잘리기 시작합니다. 즉, 오른쪽 아래 자동 값은 상자의 실제 너비와 높이입니다.

예: 클립: ract(auto 50px 20px auto)

참고: 상단은 잘리지 않고, 오른쪽은 50번째 픽셀부터 가장 오른쪽까지 잘리고, 하단은 20번째 픽셀부터 잘립니다.

inset(|auto |auto |auto |auto): 이 클리핑 방법은 ect()와 유사합니다. inset()의 클리핑. 각 방향은 방향의 경계를 참조하여 클리핑됩니다.

오른쪽 위-왼쪽 아래 방향으로 자르기: 0부터 설정 값까지 자르기 시작합니다. 즉, 오른쪽 위-왼쪽 아래 방향의 자동 값은 0입니다(CSS3; )

------------------------- ----------- -------------------------- ----------- ---------------

position: 객체의 위치 지정 방법을 검색합니다. .

정적: 개체가 규칙적인 흐름을 따릅니다. 위쪽, 오른쪽, 아래쪽, 왼쪽 등의 속성은 적용되지 않습니다.

relative: 객체는 일반 흐름을 따르며, 일반 흐름에서의 위치에 따라 위쪽, 오른쪽, 아래쪽, 왼쪽 속성을 통해 오프셋될 때 일반 흐름의 어떤 요소에도 영향을 주지 않습니다. 계단식 배열은 z-index 속성을 통해 정의됩니다.

절대: 개체는 일반 흐름에서 벗어나 절대 위치 지정을 위해 위쪽, 오른쪽, 아래쪽, 왼쪽 및 기타 속성을 사용합니다. 상자의 오프셋 위치는 일반 흐름의 어떤 요소에도 영향을 주지 않으며, 여백은 다른 여백과 함께 축소되지 않습니다. 해당 계단식은 z-index 속성을 통해 정의됩니다.

수정됨: 개체가 일반 흐름에서 벗어나 위쪽, 오른쪽, 아래쪽, 왼쪽 및 기타 속성을 사용하여 창을 참조점으로 배치하면 스크롤 막대가 나타날 때 개체가 스크롤되지 않습니다. . IE6 이하에서는 이 매개변수 값을 지원하지 않습니다.

center: 객체가 일반적인 흐름과 분리되어 있으며, 상자의 위치나 크기는 위쪽, 오른쪽, 아래쪽, 왼쪽 등의 속성을 사용하여 지정됩니다. 상자는 포함된 컨테이너 내에서 수직 및 수평 중앙에 위치합니다. 상자의 오프셋 위치는 일반 흐름의 요소에 영향을 주지 않으며, 상자의 여백은 다른 여백과 함께 축소되지 않으며, 계단식 배열은 z-index 속성으로 정의됩니다. (CSS3)

페이지: 상자의 위치는 절대값을 기준으로 계산됩니다. (CSS3)

---------- ------------------------------------------------- - ------------

여백

h2{margin:10px 0;}

객체의 네 면에서 확장된 여백을 검색하거나 설정합니다.

파라미터 값 4개를 모두 제공하면 상, 우, 하, 좌 순으로 4면이 적용됩니다.

한 쪽만 제공하면 네 면 모두 사용됩니다.

두 개가 제공되는 경우 첫 번째는 상하용이고 두 번째는 왼쪽 및 오른쪽용입니다.

3개가 제공되면 첫 번째는 위쪽용, 두 번째는 왼쪽 및 오른쪽용, 세 번째는 아래쪽용입니다.

인라인 개체는 이 속성을 사용하여 왼쪽과 오른쪽에 외부 패치를 설정할 수 있습니다. 위쪽과 아래쪽에 외부 패치를 설정하려면 먼저 개체를 블록 수준 또는 인라인 블록 수준.

확장된 여백은 항상 투명합니다.

일부 인접한 여백이 합쳐지는 것을 여백 접기라고 합니다.

--- ----- -------------------------------- ----- ---------------------

측면 -ratio

: 비율 지정

페이지 표시 영역의 너비와 높이의 비율을 정의합니다. 출력 장치에서.

이 기능은 최소 및 최대 접두사를 허용하므로 최소 종횡비와 최대 종횡비라는 두 가지 미디어 기능을 파생할 수 있습니다.

@media 화면 및 (가로세로 비율:1680/957){ … }

@import url(example.css) 화면 및 (max-aspect-ratio:20/11);

------------ ------------------------------------- ------

background:

[ background-color]: 배경색을 지정합니다. 물체.

[ background-image ]: 객체의 배경 이미지를 지정합니다. 실제 이미지 경로이거나 그라디언트를 사용하여 생성된 "배경 이미지"일 수 있습니다.

[ background-repeat ]: 개체의 배경 이미지가 배치되고 채워지는 방식을 지정합니다.

[ background-attachment ]: 개체의 배경 이미지가 개체 내용과 함께 스크롤되는지 아니면 고정되는지를 지정합니다.

[ background-position ]: 객체의 배경 이미지 위치를 지정합니다.

[ background-origin ]: 객체의 배경 이미지 표시 원본을 지정합니다.

[ background-clip ] : 지정한 객체의 배경 이미지가 바깥쪽으로 잘리는 영역을 지정합니다.

[ background-size ]: 객체의 배경 이미지 크기를 지정합니다.

------------------------- --- ---------------------

배경 부착 설정 또는 배경 이미지가 개체 내용과 함께 스크롤되는지 또는 고정되는지 검색합니다. background-image 속성을 먼저 지정해야 합니다.

고정: 배경 이미지가 양식을 기준으로 고정됩니다.

스크롤: 배경 이미지는 요소를 기준으로 고정됩니다. 즉, 배경 이미지는 항상 요소 자체를 따르기 때문에 요소 내용이 스크롤될 때 배경 이미지가 스크롤되지 않습니다. 그러나 요소의 상위 요소나 양식과 함께 스크롤됩니다.

local: 배경 이미지는 요소 콘텐츠를 기준으로 고정됩니다. 즉, 요소가 요소와 함께 스크롤되면 배경 이미지도 함께 스크롤됩니다. 배경 이미지는 항상 콘텐츠를 따르기 때문입니다. (CSS3)

---------- ------------------------------------------------- - -------------

Background-clip은 객체의 배경 이미지가 바깥쪽으로 잘리는 영역을 지정합니다.

padding-box: 패딩 영역에서 바깥쪽으로 배경을 자릅니다(패딩 제외).

border-box: 테두리 영역(테두리 제외)에서 바깥쪽으로 배경을 자릅니다.

content-box: 콘텐츠 영역에서 바깥쪽으로 배경을 자릅니다.

텍스트: 전경 콘텐츠(예: 텍스트)의 모양에서 바깥쪽으로 자르기 영역으로 잘라내어 배경을 채우기 색상으로 사용하는 등의 마스킹 효과를 얻을 수 있습니다.

------------------------- --- ---------------------------------- --- ----------

background-repeat: 설정이나 검색은 어떻습니까 개체의 배경 이미지 채우기를 배치합니다. background-image 속성을 먼저 지정해야 합니다.

에서는 2개의 매개변수를 제공할 수 있습니다. 2개의 매개변수를 모두 제공하는 경우 첫 번째는 가로 방향이고 두 번째는 세로 방향입니다.

매개변수가 1개만 제공되면 가로, 세로에 사용됩니다. repeat-x와repeat-y라는 특별한 값을 제외하고는,repeat-x는 반복없음,repeat-y는 반복없음,즉,repeat-x와repeat-y는 동일하므로 두 개의 매개변수 값을 제공하는

의 해당 스크립트 기능은 backgroundRepeat입니다.

repeat-x: 배경 이미지가 가로로 타일링됩니다.

repeat-y: 배경 이미지가 세로로 타일링됩니다.

repeat: 배경 이미지 타일입니다. 수평 및 수직

반복 없음: 배경 이미지가 타일링되지 않습니다.

원형: 배경 이미지가 전체 컨테이너에 맞고 채워질 때까지 자동으로 크기가 조정됩니다. (CSS3)

space: 배경 이미지가 동일한 간격으로 타일링되어 컨테이너 전체 또는 특정 방향을 채웁니다. (CSS3

-------------------------------------- ------------ -----------

background -position: 객체의 배경 이미지 위치를 설정하거나 검색합니다.

4개가 제공되는 경우 각각을 지정해야 합니다. 키워드 앞에(즉, 왼쪽 | 가운데 | 오른쪽 | 위쪽 | 아래쪽) 오프셋은 키워드 위치를 기준으로 합니다.

예: 배경 이미지를 다음과 같이 정의한다고 가정합니다. 컨테이너의 오른쪽 하단에 있고 오른쪽과 하단에 각각 20px

약어: background:url(test1.jpg) no-repeat right 20px 하단 20px;

: 배경 이미지 채우기 위치를 백분율로 지정합니다.

: 배경 이미지 채우기 위치를 음수 값으로 지정합니다.

center: 배경 이미지를 가로, 세로 중앙에 배치합니다.

left: 배경 이미지를 가로 방향에서 왼쪽부터 채웁니다.

right: 배경 이미지를 세로 방향에서 오른쪽부터 채웁니다.

top: 배경 이미지가 세로 방향으로 채워집니다.

bottom: 배경 이미지가 세로 방향으로 시작됩니다. >--------------- --------------------- --------------

background-origin : 객체의 배경 이미지의 배경 위치 계산 시 기준 원점(위치)을 설정하거나 검색합니다. .

padding-box: 패딩 영역(패딩 포함)부터 배경 이미지를 표시합니다.

border-box: 테두리 영역(테두리 포함)부터 배경 이미지를 표시합니다.

content-box: 콘텐츠 영역부터 배경 이미지를 표시합니다.

------------------------- --- -----------

위는 일반적인 CSS 속성의 요약입니다. 더 많은 관련 콘텐츠를 보려면 결제하세요. PHP 중국어 웹사이트(www.php .cn)에 주목하세요!