자동 너비와 너비 100 %의 차이
답변:
너비 자동
div 또는 p와 같은 블록 레벨 요소의 초기 너비는 자동입니다. 이를 통해 컨테이너 블록 내에서 사용 가능한 모든 수평 공간을 차지하도록 확장됩니다. 가로 패딩이나 테두리가있는 경우 해당 너비가 요소의 전체 너비에 추가되지 않습니다.
너비 100 %
반면에 width : 100 %를 지정하면 요소의 전체 너비는 컨테이너 블록에 가로 여백, 패딩 및 테두리를 더한 100 %가됩니다 (box-sizing : border-box를 사용하지 않은 경우). 전체 너비가 계산되는 방식을 변경하기 위해 여백 만 100 %에 추가됩니다.) 이것은 당신이 원하는 것일 수도 있지만 그렇지 않을 가능성이 큽니다.
차이점을 시각화하려면 다음 그림을 참조하십시오.
width: auto동작합니다 방법이 : stackoverflow.com/questions/28353625/...
auto같은 작업을 수행fill-available
width: auto;여백, 패딩 또는 테두리에서 추가 공간이 추가 될 때 요소를 부모 컨테이너와 동일한 너비로 유지하기 위해 최대한 노력합니다.width: 100%;요소를 부모 컨테이너만큼 넓게 만듭니다. 부모에 관계없이 요소의 크기에 추가 간격이 추가됩니다. 이로 인해 일반적으로 문제가 발생합니다.
width 값이 auto 인 한 요소는 컨테이너보다 넓어지지 않고 가로 여백, 패딩 및 테두리를 가질 수 있습니다 (물론 margin-left + border-left-width + padding-left + padding-right의 합이 아닌 경우) + border-right-width + margin-right는 컨테이너보다 큽니다). 콘텐츠 상자의 너비는 컨테이너 너비에서 여백, 패딩 및 테두리를 뺀 값이됩니다.
반면에 width : 100 %를 지정하면 요소의 전체 너비는 컨테이너 블록에 가로 여백, 패딩 및 테두리를 더한 100 %가됩니다 (box-sizing : border-box를 사용하지 않은 경우). 전체 너비가 계산되는 방식을 변경하기 위해 여백 만 100 %에 추가됩니다.) 이것은 당신이 원하는 것일 수도 있지만 그렇지 않을 가능성이 큽니다.
출처:
http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/
div 또는 p와 같은 블록 레벨 요소의 초기 너비는 자동입니다.
width : auto를 사용하여 명시 적으로 지정된 너비를 실행 취소합니다.
width : 100 %를 지정하면 요소의 총 너비는 컨테이너 블록의 100 %와 가로 여백, 패딩 및 테두리가됩니다.
따라서 다음에 블록 수준 요소의 너비를 100 %로 설정하여 사용 가능한 모든 너비를 차지하도록 할 때 실제로 원하는 것이 자동으로 설정되는지 고려하십시오.
우리가 말할 때
width:auto;너비는 상위 요소의 총 너비를 초과하지 않습니다. 최대 너비는 부모 너비입니다. 테두리, 여백, 여백을 추가해도 테두리, 여백, 여백을위한 공간을 확보하기 위해 요소 자체의 내용이 작아집니다. 테두리 + 여백 + 여백에 필요한 공간이 부모 요소의 전체 너비보다 클 경우 콘텐츠 너비는 0이됩니다.
우리가 말할 때
width:100%;요소 내용의 너비는 부모 요소의 100 %가되며 이제부터 테두리, 패딩 또는 여백을 추가하면 자식 요소가 부모 요소의 너비를 초과하여 부모 요소 밖으로 넘쳐 나오기 시작합니다.