시각적 표상 이론 지식 입문

비주얼 퍼포먼스를 하나씩 구현하는 게 아닌, 드디어 페이지의 전체적인 레이아웃을 파악할 수 있게 된 것 같아요.

다음은 자신의 경험이 너무 적다는 사실을 문득 깨달은 여자 남자의 포효입니다

아아, 너비가 콘텐츠 영역의 너비로 설정되어 있다는 것을 방금 알았습니다. 패딩이나 여백을 추가하면 전체 너비가 늘어납니다

아아아아, 콘텐츠 영역과 왼쪽, 오른쪽 여백만 자동으로 설정할 수 있다는 걸 오늘에서야 알았네요! ! ! !

1 관련 용어

• 흐름: 페이지가 표시될 때 요소가 하나씩 화면으로 흘러가는 경우도 있습니다. 흐름. 요소가 부동 또는 위치 인 경우 흐름에서 분리됩니다

• 대체되지 않는 요소: 단락과 같은 예제를 사용하는 것이 좋습니다

• 대체 요소: 그림과 같은

• 블록 레벨 요소: 단락, 제목, p 등은 유입된 후 줄 바꿈을 생성합니다. display: block을 사용하면 요소가 줄 바꿈 없이 블록 수준 상자

• 인라인 요소(strong,span 등)를 생성할 수 있습니다. display: inline을 사용하여 요소가 상자를 생성하도록 합니다

• root 요소: html
  

2 auto

2.1 가로: 콘텐츠 영역 너비와 왼쪽 및 오른쪽 여백만 auto

• 로 설정할 수 있습니다.

  자동: 남은 공간을 모두 차지합니다

• 자동 2개: 일반적으로 여백이 사용되고 콘텐츠 영역이 중앙에 배치됩니다.

• 자동 3개: 여백이 0이면 콘텐츠 영역이 차지하려고 합니다. 가장 넓은 공간

2.2 세로: 콘텐츠 영역의 높이와 위쪽 및 아래쪽 여백만 자동으로 설정할 수 있습니다.

• 일반 흐름에서는 위쪽 및 아래쪽 여백이 자동으로 설정되어 자동으로 계산됩니다. 가로처럼 중앙에 위치하지 않고 0으로
  

3 margin

　padding에서는 margin과 border 중 margin만 음수값으로 설정할 수 있는데, margin을 a로 설정할 경우 주의할 점 음수 값인 경우 패딩 + 여백 + 테두리의 합은 상위 요소의 너비여야 합니다. 이는 매우 중요합니다.

맞아요. 예전에는 몰랐는데... 왜 이렇게 중요한 지식을 놓쳤는지 궁금하네요... 다행히 지금은 보충했네요, 권위있는 가이드 감사합니다~~

4 디스플레이 역할 변환

• 목록 요소를 세로선으로 구분된 가로 막대로 사용하고 싶습니다.

display: inline;

　 그런 다음 모든 목록 요소에 오른쪽 테두리를 추가하고 첫 번째 목록 요소에는 왼쪽 테두리를 추가하면 됩니다. 테두리

• 세로 사이드바로 배치하려면 p에 몇 개의 링크를 넣으세요

  display: block;

　몇 가지 스타일을 추가하여 아름다운 세로 탐색 바로 표시하세요

• 원하는 경우 행 블록 구조를 삽입하면

  display: inline-block;

수직 탐색 표시줄과 유사한 내용이 행에 삽입됩니다. 이 블록의 너비가 설정되지 않은 경우 행에 맞게 조정됩니다

• run-in

  display: run-in;

　물론, 이를 사용하는 데에는 제한이 있습니다. 다음 요소가 블록 수준 요소인 경우에만 해당 블록 수준 요소의 시작 부분에서 인라인 요소로 변환됩니다.

위 내용은 시각적 표상 이론 지식 입문의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!