이전 width: auto에는 너비가 내용의 너비로 설정되어 있다고 가정했습니다 . 이제 부모의 전체 너비를 차지한다는 것을 알 수 있습니다.
누구든지 이들의 차이점을 설명해 주시겠습니까?
답변
너비 자동
div 또는 p와 같은 블록 레벨 요소의 초기 너비는 자동입니다. 이를 통해 컨테이너 블록 내에서 사용 가능한 모든 수평 공간을 차지하도록 확장됩니다. 가로 패딩이나 테두리가있는 경우 해당 너비가 요소의 전체 너비에 추가되지 않습니다.
너비 100 %
반면에 width : 100 %를 지정하면 요소의 전체 너비는 컨테이너 블록에 가로 여백, 패딩 및 테두리를 더한 100 %가됩니다 (box-sizing : border-box를 사용하지 않은 경우). 전체 너비가 계산되는 방식을 변경하기 위해 여백 만 100 %에 추가됩니다.) 이것은 당신이 원하는 것일 수도 있지만 그렇지 않을 가능성이 큽니다.
차이점을 시각화하려면 다음 그림을 참조하십시오.
답변
-
width: auto;여백, 패딩 또는 테두리에서 추가 공간이 추가 될 때 요소를 부모 컨테이너와 동일한 너비로 유지하기 위해 최대한 노력합니다. -
width: 100%;요소를 부모 컨테이너만큼 넓게 만듭니다. 부모에 관계없이 요소의 크기에 추가 간격이 추가됩니다. 이로 인해 일반적으로 문제가 발생합니다.
답변
여백과 테두리에 관한 것입니다. 을 사용 width: auto하고 테두리를 추가 하면 div가 컨테이너보다 커지지 않습니다. 반면에 width: 100%일부 테두리 를 사용 하면 요소의 너비가 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 %로 설정하여 사용 가능한 모든 너비를 차지하도록 할 때 실제로 원하는 것이 자동으로 설정되는지 고려하십시오.
답변
너비 100 % :
콘텐츠를 100 %로 만듭니다. 여백, 테두리, 패딩이이 너비에 추가되고 이러한 요소가 추가되면 요소가 오버플로됩니다.
너비 자동 :
여백, 테두리 및 패딩을 포함하여 사용 가능한 공간에 요소를 맞 춥니 다. 여백 + 패딩 + 테두리 조정 후 남은 공간은 너비 / 높이를 사용할 수 있습니다.
너비 100 % + 상자 크기 : 테두리 상자 :
테두리, 패딩을 포함하여 사용 가능한 공간의 요소도 맞 춥니 다 (여백은 컨테이너를 넘치게 만듭니다).
답변
너비 사용 : 자동; + 디스플레이 : 인라인 블록; CSS에서 멋진 효과를 제공합니다.
width : auto;
display: inline-block;