CSS+div의 공통 속성에 대한 자세한 소개-CSS 튜토리얼-php.cn

CSS+div의 공통 속성에 대한 자세한 소개

高洛峰

풀어 주다： 2017-03-17 10:40:51

원래의

1637명이 탐색했습니다.

이 문서에서는 일반적으로 사용되는 CSS+div 속성에 대한 자세한 소개를 공유합니다.

css

와일드카드 선택기 *{}

태그 선택기 p{}

ID 선택기 #ID{}

클래스 선택기.class{}

그룹에 선택기 p a{}　a 태그가 포함되어 있습니다. 선택기 p, p{} p 태그 및 p 태그

display 요소 상자 유형을 지정합니다. 블록 블록 수준 요소, 없음 요소는 표시되지 않음, inine인라인 요소 즉, 인라인 요소, 인라인-블랙 인라인 블록 요소입니다.

visibility 요소가 표시되는지 여부를 지정합니다. 숨김은 표시되지 않으며 상속은 상위 요소를 상속합니다.

표시와 표시의 차이점은 다음과 같습니다. hide는 표시입니다.

overflow 숨긴 후 공간을 차지하지 않습니다. 콘텐츠 오버플로가 표시되고 잘리지 않고 요소 창 외부에 표시되고 콘텐츠가 숨겨진 경우 발생합니다. 스크롤은 항상 스크롤 막대를 추가하고, 자동은 자동으로, 트림은 스크롤 막대를 추가하고, 상속은 상위 요소를 상속합니다.

커서 커서 모양

float 블록-float

자간 자간

line-height 줄 높이 높이는 전체 블록의 높이를 정의하고, 줄 높이는 텍스트의 줄 높이를 정의합니다. 줄을 30px로 설정하면 텍스트는 세로 기준이 됩니다. 이 30px 중심으로.

border-collapse 표 테두리 겹침

font-weight 텍스트 두께 설정

text- 장식 텍스트 수정

font-family 요소의 글꼴을 지정합니다.

text-align 요소에 블록 텍스트 정렬이 설정됩니다. 텍스트 및 이미지와 같은 인라인 요소를 기다릴 때 text-align:center를 상위 요소로 설정하여 가로 가운데 정렬이 이루어집니다.

clear 가능한 값은 left, right, 둘 다입니다. 개체의 왼쪽과 오른쪽에는 플로팅 개체가 허용되지 않습니다.

z -index 가능한 값은 auto/number 이며, 숫자가 클수록 앞으로 나아가며, 음수도 가능합니다.

값은 상대 위치 지정을 나타내며 문서 스트림에서 현재 객체의 위치를 지정하여 위치 지정 후 창에 고정됩니다. 스크롤 막대로 스크롤하지 않음ol　Ordered

ul　Unordered

list-style-type　none은 글머리 기호를 표시하지 않습니다

목록 스타일 이미지 URL 목록 이미지

: 링크 방문하지 않은 링크

: 방문함 방문한 링크

: hover 마우스가 가리키고 있는 요소

: active 활성화된 요소(즉, , 클릭한 요소)

css3

border-radius　Border 둥근 모서리 Border-radius:5px 10px 15px 20px; 각각 왼쪽 위 모서리, 오른쪽 위 모서리, 오른쪽 아래 모서리, 왼쪽 아래 모서리의 반경을 나타냅니다. border-radius에 두 개의 값을 지정한 경우 첫 번째 값은 왼쪽 위 모서리와 오른쪽 아래 모서리이고 두 번째 값은 오른쪽 위 모서리와 왼쪽 아래 모서리입니다. 세 개의 값을 지정하는 경우 첫 번째 값은 왼쪽 위 모서리, 두 번째 값은 오른쪽 위 및 왼쪽 아래 모서리, 세 번째 값은 오른쪽 아래 모서리입니다.

box-shadow 그림자를 추가하는 데 사용됩니다. box-shadow: 10px 10px 5px blue; 첫 번째는 수평 이동 거리, 두 번째는 수직 이동 거리, 세 번째는 흐림 거리, 네 번째는 흐림 거리입니다. 그림자의 색.

테두리 이미지　

배경 이미지

배경 크기　 이미지 크기 설정 시 p의 높이와 너비를 설정해야 합니다. 그렇지 않으면 이미지가 인쇄되지 않습니다. 표시됨, background-size:50px 100px는 백분율일 수 있으며 이는 상위 요소의 백분율을 의미합니다.

backgrond-origin 배경 이미지의 위치를 기본적으로 padding-box로 설정합니다. border-box는 가장 바깥쪽 레이어에서 시작합니다. content-box는 내부에서 시작합니다.

background-clip　배경을 자릅니다. 이전 것의 지정된 위치에서 box-shadow는

linear-gradient와 동일합니다. 선형 그라데이션 색상 배경:-moz-linear-gradient(red,blue); webkit-linear-gradient(right,red,blue) ;왼쪽에서 오른쪽으로 오른쪽으로 45도는 오른쪽 상단 모서리를 가리키고, 90도는 오른쪽 배경을 가리킵니다.-o-linear-gradient(50deg, red, blue); 각도를 지정하세요.

선형 그라데이션 색상 투명도 rgba(255,0,0,0.7) rgba의 마지막 값은 불투명도를 나타냅니다. 0은 완전히 투명함을 의미하고 1은 완전히 불투명함을 의미합니다.

text-shadow 텍스트에 그림자를 추가하는 것은 box-shadow 사용법과 동일합니다.

white-space 요소 내의 공백 처리 방법을 지정합니다. 일반(기본값)은 공백을 압축하고, 사전에는 모든 공백을 유지하고 줄을 나누지 않음, nowrap은 공백 압축, 줄 바꿈 안 함, pre-wrap은 공백 유지, 정상적으로 줄 바꿈, pre-line은 공백 압축, 줄 바꿈, 상속.

text-overflow　텍스트가 넘칠 때 내용을 표시하는 방법

word-wrap　단어가 너무 길면 줄바꿈 허용 word-wrap:break-word;

word- break　Function 위와 같이 속성값이 keep-all이면 모든 단어가 완성되고, 속성값이 break-all이면 경계를 넘는 모든 단어가 깨집니다.

박스 모델p는 매우 중요하므로(말도 안되는 소리) 다음은 매우 중요합니다(사진은 온라인에서 찾았습니다)

CSS+div의 공통 속성에 대한 자세한 소개