CSS 공통 속성 3 요약

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

[margin]

margin 개체의 네 변의 확장된 여백을 검색하거나 설정합니다.

margin-top 개체의 위쪽 가장자리의 확장된 여백을 검색하거나 설정합니다.

margin-right 검색 또는 설정합니다. 개체 오른쪽의 확장된 여백

margin-bottom 개체의 아래쪽 가장자리의 확장된 여백을 검색하거나 설정합니다.

margin-left 왼쪽의 확장된 여백을 검색하거나 설정합니다. 객체의 측면

argin: 객체의 네 변의 외부 여백을 검색하거나 설정합니다.

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

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

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

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

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

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

일부 인접한 여백이 합쳐지며 이를 여백 접기라고 합니다.

여백 접기에 대한 일반적인 이해:

여백 접기만 블록 수준에서 발생합니다.

플로팅 요소의 여백은 여백과 함께 축소되지 않습니다.

오버플로 속성이 설정되어 있고 값이 표시되지 않는 블록 수준 요소는 해당 하위 요소와 겹치지 않습니다. . 요소의 여백이 축소됩니다.

절대 위치에 있는 요소의 여백은 어떤 여백으로도 축소되지 않습니다.

루트 요소의 여백은 다른 여백과 함께 축소되지 않습니다. 🎜>

auto: 값이 반대쪽 가장자리의 값으로 설정됩니다.

: 길이 값을 사용하여 외부 패딩을 정의합니다. 음수일 수 있음

: 백분율을 사용하여 외부 패딩을 정의합니다. 부정적일 수 있음

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

******************************************** * ************************************************* ** *********************

【패딩】

padding 검색 또는 객체의 네 변에 대한 내부 패딩을 설정

padding-top 객체의 상단 가장자리에 대한 내부 패딩을 검색하거나 설정

padding-right 내부 패딩을 검색하거나 설정 객체 오른쪽 패딩

padding-bottom 객체 아래쪽 가장자리의 내부 패딩을 검색하거나 설정합니다.

padding-left 객체 왼쪽의 내부 패딩을 검색하거나 설정합니다. 객체

padding: 객체를 검색하거나 네 측면 모두에 내부 여백을 설정합니다.

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

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

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

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

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

: 길이 값을 사용하여 내부 패딩을 정의합니다. 음수 값은 허용되지 않습니다

: 백분율을 사용하여 내부 패딩을 정의합니다. 음수는 허용되지 않습니다

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

********* *** *********************************************** **** *******************************************

[text]

text-transform 객체의 텍스트 대소문자를 검색하거나 설정합니다.

white-space 설정 또는 검색합니다. 개체 내 공백 처리 방법

tab-size 개체의 탭 문자 길이를 검색하거나 설정합니다.

word-wrap 내용이 탭 문자의 길이를 초과할 때 줄 바꿈 여부를 설정하거나 검색합니다. 지정된 컨테이너의 경계

word -Bream 설정 또는 텍스트의 텍스트에서 검색된 개체

Text-Align 검색 개체의 콘텐츠 수준 설정 또는 검색

텍스트-정상-일단 설정 또는 블록에서 블록을 검색하거나 마지막 줄 (블록에 텍스트 라인이 하나만있는 경우, 첫 번째 줄과 마지막 줄이 모두있는 경우) 또는 정렬을 포함합니다. 강제 중단된 줄

 

text-justify                                              개체 내에서 텍스트를 조정하는 데 사용되는 정렬 검색

단어 간격                                                                                                          >                               

text-indent 개체의 텍스트 들여쓰기를 검색하거나 설정합니다.

vertical-align 개체 내용의 세로 정렬을 설정하거나 검색합니다

line-height 객체 행 높이를 검색하거나 설정합니다. 즉, 글꼴 하단과 글꼴 내부 상단 사이의 거리

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

문자 간격: 검색 또는 개체의 문자 사이의 간격을 설정합니다. 최소, 최대 및 최적 간격.

이 속성은 각 문자(단어 내의 각 문자 포함) 뒤에 지정된 간격을 추가합니다.

문자 간격은 줄의 시작 부분과 끝 부분에 적용할 수 없습니다. ;

normal: 기본 간격

: 길이 값으로 간격을 지정합니다. 부정적일 수 있습니다.

: 간격을 백분율로 지정합니다. 부정적일 수 있습니다.

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

줄 높이: 검색 또는 객체의 선 높이를 설정합니다. 즉, 글꼴 하단과 글꼴 내부 상단 사이의 거리입니다.

기본값: 일반

일반: 콘텐츠가 지정된 컨테이너 경계를 밀거나 오버플로하도록 허용합니다.

: 길이 값을 사용하여 줄 높이를 지정합니다. 부정적일 수 있습니다.

: 줄 높이를 백분율로 지정하고 백분율 값은 글꼴의 높이 크기를 기준으로 합니다. 부정적일 수 있습니다.

: 곱셈 인수를 사용하여 행 높이를 지정합니다. 부정적일 수 있습니다.

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

text-align: 텍스트의 가로 정렬을 설정하거나 검색합니다. 개체의 내용입니다.

블록 수준 요소의 텍스트는 일부 쌓인 와이어프레임입니다.

text-align의 정렬을 유효하게 하려면 공백과 같은 한자 사이에 공백을 삽입해야 합니다. ;

블록 내 텍스트의 마지막 줄(블록에 텍스트가 한 줄만 있는 경우 포함, 첫 번째 줄과 마지막 줄이 모두 해당) 및 강제로 중단된 줄 , 양쪽 끝을 정렬하려면 텍스트를 사용해야 합니다.

IE 브라우저에서 text-align-last를 적용하려면 text-align을 justify로 정의해야 합니다. >한 줄의 양쪽 끝 정렬 효과는 비교적 간단해집니다.

li{overflow:hidden;width:200px;height:21px;text-align:justify;text-align -last:justify;}

li:after {display:inline-block;overflow:hidden;width:100%;height:0;content:'';}

왼쪽: 콘텐츠가 왼쪽으로 정렬됩니다.

center: 콘텐츠를 중앙 정렬합니다.

right: 콘텐츠가 오른쪽으로 정렬되었습니다.

정의: 양쪽 끝의 콘텐츠를 정렬합니다.

start: 콘텐츠 정렬 시작 경계입니다. (CSS3)

end: 콘텐츠 정렬 끝 경계입니다. (CSS3)

: 문자열은 단일 문자여야 합니다. 그렇지 않으면 선언이 유효하지 않습니다. (CSS3)

match-parent: 이 값에 의해 상속된 start 또는 end 키워드가 상위의 방향 값에 대해 계산된다는 점을 제외하면 이 값은 상속과 동일하게 동작합니다. 계산된 값은 왼쪽과 오른쪽이 될 수 있습니다. . (CSS3)

start end: 첫 번째 줄을 정렬하려면 start를 지정하고, 강제로 중단된 줄은 end를 지정하여 나머지 모든 줄을 정렬하고 text-align-last의 영향을 받지 않습니다.

++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +++++++

몇 가지 참고 사항:

모든 주요 브라우저는 text-align 값의 justify 속성을 지원합니다.

text-align은 강제 중단된 줄을 처리하지 않으며 블록 내의 마지막 줄도 처리하지 않습니다. 즉, 블록에 텍스트 줄이 하나만 있는 경우(이것은 line은 둘 다입니다. 한 줄은 마지막 줄이기도 합니다. text-align:justify를 설정하면 줄의 양쪽 끝을 정렬할 수 없습니다.

text-align-last를 사용하여 처리합니다. 블록의 마지막 줄과 강제로 중단된 줄이므로 양쪽 끝에서 단일 텍스트 줄의 정렬을 설정하려면 text-align-last를 사용해야 합니다.

Firefox가 아닌 브라우저는 양쪽 끝에서 정렬을 활성화해야 합니다(예: 공백). 텍스트 사이에 공백을 삽입해야 합니다(한 줄에 중국어 문자가 2개만 있는 경우 Firefox도 그 사이에 공백을 삽입해야 합니다).

Chrome23, Safari5.1.7, Opera12.5는 아직 Text-align-last를 지원하지 않습니다.

위 사항에 따르면 한 줄의 양쪽 끝에서 정렬을 수행합니다. , 두 가지 방향으로 갈 수 있습니다:

모든 브라우저가 지원하므로 text-align의 justify 속성 값은 text-align-last를 완전히 지원하지 않습니다. 우리는 의사 객체를 사용하여 생성할 수 있습니다. IE 이외의 브라우저와 IE7 이상 브라우저(IE7 이하 브라우저는 의사 개체를 지원하지 않으므로 텍스트 정렬 마지막 처리를 사용)의 경우 추가 내용을 두 번째 줄에 배치하고 이때 텍스트의 첫 번째 줄을 숨깁니다. (즉, 정렬할 텍스트 한 줄) text-align:justify

를 사용하여 정렬할 수 있습니다.

IE, Firefox 등 text-align-last를 지원하는 브라우저는 text-align-last를 사용합니다. 이를 지원하지 않는 브라우저는 위의 방법을 사용합니다.

현재 상황에 따라 다음을 사용하세요. 첫 번째 솔루션은 비교적 간단하며 IE5.5-10, Firefox, Chrome, Safari, Opera와 쉽게 호환됩니다

++++++++++++ + +++++++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++++++++++++

text-align-last: 블록의 마지막 줄을 설정하거나 검색합니다(블록에 텍스트 줄이 하나만 있는 경우 포함, 이 경우 첫 번째 줄과 마지막 줄이 모두 해당)

                                                                     또는 강제로 중단된 줄의 정렬

한 줄이 블록의 첫 번째 줄이거나 첫 번째 줄이지만 뒤에 강제 줄바꿈이 따라오는 경우, 그렇지 않은 경우 표시됩니다. 텍스트 정렬 첫 번째 줄 정렬(값 '시작 끝')을 지정합니다. 그렇지 않으면 텍스트 정렬 마지막이 텍스트 정렬을 재정의합니다.

자동 값이 지정되면 콘텐츠 정렬은 다음을 기반으로 합니다. text -align 설정(text-align이 justify로 설정되지 않은 경우)

IE의 비공개 속성 중 하나로 IE5.5는 최초로 text-align-last를 구현했으며 나중에 표준 속성으로 채택되었습니다. w3c;

IE7 이하 브라우저에서는 블록의 마지막 줄 정렬만 구현하고 강제로 중단된 줄 정렬은 처리하지 않습니다.

IE 브라우저에서 text-align-last를 적용하려면 먼저 text-align을 justify로 정의해야 합니다.

auto: 특별한 정렬이 없습니다.

왼쪽: 콘텐츠가 왼쪽으로 정렬됩니다.

center: 콘텐츠를 중앙 정렬합니다.

right: 콘텐츠가 오른쪽으로 정렬되었습니다.

정의: 양쪽 끝의 콘텐츠를 정렬합니다.

start: 콘텐츠 정렬 시작 경계입니다.

end: 콘텐츠 정렬 끝 경계입니다.

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

text-indent: 개체에서 텍스트의 들여쓰기를 검색하거나 설정합니다.

인라인 개체에 이 속성을 사용하려면 먼저 개체가 블록 수준 또는 인라인 블록 수준으로 표시되도록 해야 합니다.

내어쓰기 및 각 줄 키워드는 들여쓰기 값을 따릅니다.

div{text-indent:2em Each-line;}

: 길이 값을 사용하여 텍스트 들여쓰기를 지정합니다. 부정적일 수 있습니다.

: 텍스트 들여쓰기를 백분율로 지정합니다. 부정적일 수 있습니다.

each-line: 블록 컨테이너의 첫 번째 줄이나 내부 강제 줄 바꿈의 첫 번째 줄에 적용할 들여쓰기를 정의합니다. (CSS3)

hanging: 들여쓰기된 줄을 모두 반대로 바꿉니다.

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

text-transform: 객체에서 텍스트의 대소문자를 검색하거나 설정합니다.

없음: 변환 없음

capitalize: 각 단어의 첫 글자를 대문자로 변환

uppercase: 각 단어를 대문자로 변환

소문자: 각 단어를 소문자로 변환합니다.

전각: 모든 문자를 전자 형식으로 변환합니다. 문자에 해당 전자 형식이 없으면 그대로 유지됩니다. 이 값은 일반적으로 라틴 문자 및 숫자와 같은 표의 문자 기호를 조판하는 데 사용됩니다.

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

vertical-align: 라인 상자 내 인라인 요소의 수직 정렬을 설정하거나 검색합니다. .

baseline: valign 기능을 지원하는 객체의 내용을 기준선에 맞춰 정렬

sub: 텍스트의 아래 첨자를 세로로 정렬

super : 텍스트 위쪽 첨자 수직 정렬

top: valign 기능을 지원하는 개체의 내용을 개체의 위쪽에 정렬

text-top: valign 기능을 지원하는 개체의 텍스트 정렬 valign 기능을 개체의 상단에 정렬

middle: valign 기능을 지원하는 개체의 내용을 개체의 중앙에 정렬

bottom: valign 기능을 지원하는 개체의 텍스트를 정렬 개체 하단에 대한 valign 기능

text-bottom: valign 기능 지원 개체의 텍스트를 개체 상단에 정렬

: 기준선으로부터의 오프셋을 백분율로 지정합니다. 부정적일 수 있습니다. 백분율의 기준은 0%입니다.

: 길이 값을 사용하여 기준선으로부터의 오프셋을 지정합니다. 부정적일 수 있습니다. 숫자 값의 기준선은 0입니다.

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

단어 분리: 개체 내 텍스트의 단어 분리 동작을 설정하거나 검색합니다.

페이지에 연속된 의미 없는 긴 문자가 레이아웃을 깨뜨리는 문제를 해결하려면 break-all을 사용해야 합니다.

IE, IE5.5 나중에 w3c에서 표준 속성으로 채택한 word-break를 최초로 구현했습니다.

normal: 아시아 언어의 텍스트 규칙에 따름 ​​아시아 이외의 언어에서는 단어 내에서 줄 바꿈이 허용됩니다.

모두 유지: 아시아 이외의 모든 언어에 대해 일반과 동일합니다. 중국어, 한국어, 일본어의 경우 단어 구분이 허용되지 않습니다. 소량의 아시아 텍스트가 포함된 비아시아 텍스트에 적합합니다.

break-all: 이 동작은 아시아 언어의 일반적인 동작과 동일합니다. 비아시아 언어 텍스트 줄의 모든 단어 내에서의 구분도 허용됩니다. 이 값은 연속된 영어 문자 분리와 같이 일부 비아시아 텍스트가 포함된 아시아 텍스트에 적합합니다.

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

word-wrap: 내용이 경계를 초과할 때 줄 바꿈 여부를 설정하거나 검색합니다. 지정된 컨테이너의

일반: 콘텐츠가 지정된 컨테이너 경계를 밀거나 오버플로하는 것을 허용합니다.

break-word: 콘텐츠가 경계 내에서 중단됩니다. 필요한 경우 단어 내에서 줄 바꿈이 허용됩니다.

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

위는 일반적인 CSS 속성 3가지를 요약한 내용입니다. 더 많은 관련 내용을 주목해주세요. PHP 중국어 홈페이지(www.php.cn)!