CSS 너비:100%와 너비:자동의 차이점

CSS

의 width:100%와 width:auto의 차이 1. 문제

얼마 전 트리 구조를 조정하다가 노드 이름이 트리가 상대적으로 길기 때문에 IE6에서는 작동하지 않습니다. 외부 요소가 확장되지 않아 노드 이름의 절반만 표시되고 아이콘과 이름이 새 줄에 표시됩니다. 그러나 IE8에서는 정상적으로 표시됩니다. 그리고 IE9. 문제를 찾아낸 결과, 아래 그림에서 빨간색으로 표시된 것처럼 다음 속성으로 인해 발생한 것으로 확인되었습니다. 너비 값을 자동으로 설정하면 문제를 해결할 수 있습니다.

2. 결론

.TreeView,.TreeView ul{

padding:0px 0px 19px

list-style:none;

너비:100 %;/* 여기를 auto

*/로 변경하세요.

Background:url(./trstree-default-line.gif) Repeat-y 0px center ;

}

[1] width:100%에는 margin-left 및 margin-right

속성 값이 포함되지 않습니다. margin-left / margin-right를 포함하는 값입니다. 여백이 설정된 경우 새 너비 값은 컨테이너 너비에 여백 값을 더한 값입니다. (잘 관찰하세요) 여백을 추가하면 해당 변에 여백이 더 많아지는 것을 알 수 있습니다. 그리고 너비가 화면 범위를 초과했기 때문에 가로 스크롤 막대가 더 많아집니다. (이것은 상위 컨테이너를 기준으로 한 본문입니다.)

[2] width:auto에는 margin-left/margin-right 속성 값이 포함되어 있습니다. 해당 값에는 margin-left / margin-right 값이 포함됩니다. width:auto는 항상 전체 줄을 차지합니다! ! ! 여백 값은 이미 포함되어 있습니다(즉, 전체 행). 여백 값을 설정하려면 전체 행을 사용한 다음 여백 값을 빼서 현재 너비를 구합니다. 뺀 값은 해당 변의 공백입니다. 주목할만한 특징은 가로 스크롤바가 나타나지 않는다는 것, 즉 너비가 늘어나지 않는다는 것입니다.

[3] IE6에서는 표시가 정상이 아니지만 IE8 및 IE9에서는 정상적으로 표시됩니다. 이는 IE8 및 IE9의 width:100% 구문이 IE6과 다르기 때문일 수 있지만 두 가지 width 구문은 다음과 같습니다. 자동은 일관성이 있습니다.

위 내용은 CSS 너비:100%와 너비:자동의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!