div 및 css 레이아웃에 대한 기본 지식 공유-JS 튜토리얼-php.cn

CSS와 div는 모두 페이지 레이아웃과 분리할 수 없는 언어 코드입니다. 이 글은 모든 사람에게 도움이 되기를 바라며 주로 div와 CSS 레이아웃에 대한 기본 지식을 공유합니다.

1 p+css 레이아웃?
키워드: 상자 위치
여백
패딩
float
위치
무엇을 배웠나요? 기본적으로는 박스(p) 위치만 익히면 됩니다

2 박스모델?
width: width
height: height
border: border
margin: 외부 여백
padding: 내부 여백
기능: 내용을 배치하는 위치 고려

2.1 margin 외부 여백

규칙: 테두리 margin padding: 네 변 ( 위, 아래, 왼쪽, 오른쪽)
border-left
border-right
border-top
border-bottom

2.2 여백 간단한 메모:
본문에는 기본 여백이 있습니다: chrome 8px
위쪽 상자와 아래쪽 상자의 여백이 설정된 경우 두 상자 사이의 거리는 더 큰 여백을 기준으로 합니다(여백 붕괴)
상자 중심: 여백: 10px 자동;

3 패딩 내부 여백
기능: 상자 내부 콘텐츠의 위치를 조정하는 데 사용
참고: 패딩을 설정한 후 외부 상자가 전체적으로 확대되나요? 영향: 전체 웹페이지 레이아웃에 영향을 줍니다
상자의 총 너비: 300(너비) + 패딩 왼쪽/오른쪽(10+10) + 테두리 왼쪽/오른쪽(5+5) = 330

4 블록- 레벨 요소 및 인라인 요소
블록 레벨 요소: p h1 p li 등은 한 줄만 차지할 경우 너비와 높이를 설정할 수 있습니다.
인라인 요소:span i a img 등은 일반적으로 한 줄에 표시됩니다. 너비와 높이는 설정할 수 없습니다.
인라인 요소를 블록 수준 요소로 변환: 변환 후에 수행할 수 있습니다. 너비 및 높이

규칙 지원: p+css 레이아웃, 여백, 패딩, 부동 소수점, 위치는 모두 위치와 관련됩니다. 상자를 적절한 위치에 배치하세요

5 float float

일반 흐름: 위치 지정 및 플로팅과 같은 특수 CSS를 사용하지 않습니다. 규칙, 요소의 자연스러운 정렬 규칙
플로팅: 일반적인 흐름을 벗어나 요소가 왼쪽 및 오른쪽으로 이동할 수 있습니다.
float:left
float:right
기능: 상자의 왼쪽과 오른쪽 레이아웃을 만듭니다

플로팅으로 인한 문제: 다음 요소의 레이아웃에 영향을 미칠 수 있습니다
해결책: 플로팅된 요소 뒤의 플로트를 반드시 지워주세요

float: 왼쪽 및 오른쪽 레이아웃
margin: 상자 사이의 거리 조정
padding
position: 위치 고정 위치 기능 - 요소를 어디에나 배치할 수 있음 Position

6 상대 위치 지정
위치: 상대
참조 개체: 누가 했는지에 따라 포지셔닝을 사용하기 전의 초기 위치
위치를 변경하려면 오프셋이 필요합니다
왼쪽: 100px
아니요에 따르면 포지셔닝 전 위치는 오른쪽으로 100px만큼 오프셋됩니다

7 절대 위치 지정
위치:절대
참조 객체: 1 상위 요소에는 위치 지정 속성 2가 있고 위치 지정 속성이 있는 가장 가까운 상위가 발견됩니다. 레벨
오프셋: 왼쪽 위 오른쪽 아래

참조 객체를 찾는 순서: 먼저 상위 요소가 있으면 찾습니다. 위치 지정 속성(위치)을 찾으려면 이 상위 요소를 참조 개체로 사용하세요.
찾을 수 없으면 위치 속성이 있는 요소를 찾을 때까지 외부 레이어를 하나씩 검색합니다.

8 고정 위치 지정

참조 개체: 브라우저 표시 영역

9 연습

10 기타 선택기: 요소 선택 방법 id ==> # 클래스 ==> 태그 선택기 ==> 태그 이름

10.1 인접 선택기 ==> + 요소 뒤의 인접 요소 선택

10.2 다중 요소 선택기 ==>, 적용 시나리오: 동일한 속성(그리고 많은 코드가 반복되고 추출되어 공개될 수 있음)

10.3 하위 요소 선택자 ==> 공간, 응용 시나리오: 조건을 충족하는 하위 요소 선택

10.4 하위 요소 선택자==>gt; , 적용 시나리오: 조건을 충족하는 하위 요소 선택

참고: 하위 요소는 다음 수준 요소만 선택할 수 있습니다. 기능: 모두 편리하게 요소를 선택하는 데 사용됩니다. selector ==> 요소 [속성 = 속성 값] 적용 시나리오: 특정 속성을 선택합니다.

name

name = value
name ^= val

name $= val

은 필터링 조건

11로 이해될 수 있습니다. 클래스, 의사 요소

1 p+css 레이아웃?
키워드: 상자 위치

여백

패딩

float

위치
무엇을 배웠나요? 기본적으로는 박스(p) 위치만 익히면 됩니다

2 박스모델?
width: width
height: height
border: border

margin: 외부 여백

padding: 내부 여백
기능: 내용을 배치하는 위치 고려

2.1 margin 외부 여백

규칙: 테두리 margin padding: 네 변 ( 위, 아래, 왼쪽, 오른쪽)
border-left

border-right

border-top

border-bottom

2.2 여백에 관해 주의할 간단한 사항:
본문에는 기본 여백이 있습니다: chrome 8px
위쪽 상자와 아래쪽 상자의 여백이 설정된 경우 두 상자 사이의 거리는 더 큰 여백을 기준으로 합니다(여백 붕괴)
상자 중심: 여백: 10px 자동;

규칙 지원: p+css 레이아웃, 여백, 패딩, 부동 소수점, 위치는 모두 위치와 관련됩니다. 상자를 적절한 위치에 배치하세요

5 float float

일반 흐름: 위치 지정 및 플로팅과 같은 특수 CSS를 사용하지 않습니다. 규칙, 요소의 자연스러운 정렬 규칙
Float: 일반적인 흐름을 벗어나 요소가 왼쪽 및 오른쪽으로 이동할 수 있습니다.
float:left
float:right
기능: 상자의 왼쪽과 오른쪽 레이아웃을 만듭니다

플로팅으로 인한 문제: 다음 요소의 레이아웃에 영향을 미칠 수 있습니다
해결책: 플로팅된 요소 뒤의 플로트를 반드시 지워주세요

float: 왼쪽 및 오른쪽 레이아웃
margin: 상자 사이의 거리 조정
padding
position: 위치 고정 위치 기능 - 요소를 어디에나 배치할 수 있음 Position

6 상대 위치 지정
위치: 상대
참조 개체: 누가 했는지에 따라 포지셔닝을 사용하기 전 초기 위치
위치를 변경하려면 오프셋이 필요합니다
왼쪽: 100px
아니요에 따르면 포지셔닝 전 위치는 오른쪽으로 100px만큼 오프셋됩니다

7 절대 위치 지정
위치:절대
참고 객체: 1 상위 요소는 위치 지정 속성 2를 가지며 위치 지정 속성이 있는 가장 가까운 상위 요소를 찾습니다. 레벨
오프셋: 왼쪽 상단 오른쪽 하단

참조 객체를 찾는 순서: 먼저 위치 지정 속성이 있는 경우 상위 요소를 찾습니다. 속성(위치)을 참조 개체로 사용하여 오프셋합니다.
찾을 수 없는 경우 위치 속성이 있는 요소를 찾을 때까지 외부 레이어를 하나씩 검색합니다. 그런 다음 가장 바깥쪽의 html
요소는 오프셋을 위한 참조 개체로 사용됩니다.

8 고정 위치 지정
참조 개체: 브라우저 표시 영역

9 연습

10 기타 선택기: 요소 선택 방법 id ==> ==> 태그 선택기 ==> 태그 이름

10.1 인접 선택기 ==> + 요소에 인접한 요소 선택

10.2 다중 요소 선택기 ==> 적용 시나리오: 동일한 속성을 가진 요소가 여러 개 있습니다. (많은 코드가 반복되며 추출되어 공개될 수 있음)

10.3 하위 요소 선택자 ==> 공간, 응용 시나리오: 조건을 충족하는 하위 요소 선택

10.4 하위 요소 선택자 ==>gt; 시나리오: 조건을 충족하는 하위 요소 선택

참고: 하위 요소는 요소의 다음 레이어만 선택할 수 있습니다. 기능: 모두 요소를 편리하게 선택하는 데 사용됩니다. ==> 요소 [속성 = 속성 값] 적용 시나리오: 특정 속성을 선택합니다.

name
name = value

name ^= val

name $= val
은 필터링 조건으로 이해될 수 있습니다.

관련 권장 사항:

CSS 3열 레이아웃 방법의 6가지 예