CSS의 auto 속성 사용에 대한 자세한 설명

—자동이란 무엇인가요?

+auto는 적응형을 의미합니다. 자동은 브라우저에서 자동으로 계산되는 다양한 크기 값의 기본값입니다.

+ 블록 수준 요소 의 여백, 테두리, 패딩 및 콘텐츠 너비의 합은 상위 요소의 너비를 구성합니다.

auto 속성을 사용한 후 상위 요소의 너비가 변경되면 요소의 너비도 그에 따라 변경됩니다.

아래 그림에서 auto 값은 margin, border, padding, content 너비의 합입니다

+

그러나 요소가 float로 설정되면 요소의 너비는 너비가 됩니다. 소위 캡슐화인 콘텐츠에서 지원됩니다.

오버플로 | 위치:절대 | 부동:왼쪽/오른쪽은 모두 래핑 속성을 생성할 수 있으며 교체 요소에도 래핑 속성이 있습니다.

*|position:relavtive|상대 위치 지정은 원래 위치를 차지하고 모드 변환을 달성할 수 없습니다. 즉, 래핑 속성이 없습니다.

따라서 요소 너비를 브라우저 너비에 맞게 조정하기 위해 래핑된 요소에 width: auto;를 사용할 수 없습니다. 아래 그림과 같이

— 가끔 margin:0 auto 설정이 작동하지 않나요?

+maigin: 0 auto; 요소의 위쪽 및 아래쪽 여백이 0이고 왼쪽 및 오른쪽 여백이 상위 요소(본문)의 너비에 따라 적응된다는 의미입니다. 즉 왼쪽과 오른쪽이 가로입니다. 중심. 이 설정이 작동하지 않는 경우 기본적으로 두 가지 이유가 있습니다.

+ (1) p에 너비가 설정되지 않았습니다. p에 너비가 있는 경우 자체 자동을 수행하기 위해 상위 요소의 너비를 참조할 수 없습니다.

+ (2) p는 래핑됩니다. 즉, 상위 개체가 위치한 표준 흐름을 지구 표면에 비유한 것처럼 래핑 요소는 이미 표준 흐름을 벗어났습니다. 하늘. 자동 수행을 위해 참조할 상위 요소 너비가 없습니다.

위 내용은 CSS의 auto 속성 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!