CSS 철저한 조사 (2)

CSS 철저한 조사(2)

Github 페이지 블로그 게시물

1. CSS 박스 모델

1. 마진 -border- 패딩 구조 + 콘텐츠는 상자 모델을 형성합니다.

참고

너비와 높이는 패딩 테두리 여백을 제외하고 콘텐츠 영역의 너비와 높이를 사용하지만 상자의 실제 높이는 외부 3개(여백 테두리 여백)를 포함해야 합니다

할당 순서, 시계 방향, 위쪽(위)->오른쪽(오른쪽)->아래(아래)->왼쪽(왼쪽)

- ---위(1)---->|| |왼쪽(4) |오른쪽(2) |

할당, 하나의 값, 4개의 값이 모두 있습니다. 예를 들어 margin: 10px; 할당, 두 개의 값, 두 개의 값은 오른쪽 상단에 할당됩니다. 즉, 처음 두 개는 하단 = 위쪽, 왼쪽 = 오른쪽 할당, 3개 값, 위쪽, 오른쪽, 아래쪽에 각각 값을 할당, 즉 처음 3개, 그 다음 왼쪽 = 오른쪽 할당, 4개 값, 말할 필요도 없이...

는 각 브라우저에서 html

로 표시됩니다. -equiv="Content-Type" content="text/ html; charset=utf-8" /> 브라우저 개발자 도구의 표현                           } 10px; 테두리: 5px 점선; 배경색: 빨간색 }

div>

Chrome의 여백은 붉은색이고 테두리는 xx 색상(무슨 색상인지 알 수 없음)이며 패딩은 청록색과 파란색입니다. content

IE10, win8.1 브라우저 오프셋, stackoverflow 질문 참조, 상대 절대값 사용 후 오프셋이 변경된다고 합니다. 위치와 동일

2.border

border: 너비(2px) 색상(녹색) 스타일(점선/점선)

border-width/color/style 특정 속성을 설정합니다. border-left: 너비 색상 스타일 한쪽의 속성을 다음과 같이 설정합니다. border- left-style: dotted;

IE의 경우 배경 = 콘텐츠 + 패딩, FF의 경우 배경 = 콘텐츠 + 패딩 + 테두리

3.padding 및 margin

할당 규칙은 위에서 언급한 것처럼 다음과 같이 요약할 수 있습니다. 위에서부터 시작하여 시계 방향으로 첫 번째 N에 N 값을 할당하고 나머지는 다음에 따라 복사하면 됩니다. 상하좌우 페어링의 원리는 4개가 모두 같다는 뜻입니다

본문은 기본적으로 수픽셀의 여백을 갖게 됩니다. 본문의 배경은 브라우징에 가까운 여백 부분으로 확장됩니다. 이는 background-image 및 background-color의 경우이며 다른 상자의 배경은 테두리(FF 아래)에만 갈 수 있습니다.

2. 표준 문서 흐름

1. 줄여서 표준 흐름

은 배열 및 위치 지정과 관련된 다른 특수 CSS 규칙을 사용하지 않는 경우의 다양한 요소의 배열 규칙을 나타냅니다.

블록 수준 요소 블록(일반적으로 div ul li)은 항상 블록 형태로 표현되며 동일한 수준의 형제 블록과 수직으로 순서대로 배열되며 전체 왼쪽과 오른쪽이 포함됩니다.

인라인 요소는 일반적으로 태그에 걸쳐 있습니다. 가로로 정렬되면 맨 오른쪽 끝이 자동으로

래핑됩니다. div는 스팬 스타일을 포함할 수 있지만 그 반대는 아닙니다. 즉, 스팬은 div를 포함할 수 없습니다.

2. 블록 간격

인라인 요소의 가로 간격 = 왼쪽 요소의 오른쪽 여백 + 오른쪽 요소의 왼쪽 여백

세로 블록 수준 요소의 간격 수직 간격 = 최대(상위 요소의 margin-bottom, 하위 요소의 margin-top) 이것이 소위 축소 원리입니다. 작은 여백이 큰 여백으로 축소됩니다

중첩된 div의 여백과 하위 div의 여백은 상위 div의 콘텐츠 영역에 배치됩니다. 합리적이고 이상적인 상황에서는

margin이 실제로 음수 값으로 설정됩니다. 테두리와 외부 테두리 사이의 거리. margin-left를 - 50px로 설정합니다. 전체 상자를 왼쪽으로 50px 이동합니다.

위 내용은 CSS 철저한 조사 내용입니다. 2) 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.