너비 자동과 너비의 차이 100%

너비 자동과 너비의 차이 100%

이전에 나의 가정은width: auto너비가 내용물의 너비로 설정되어 있습니다.이제는 부모의 전폭을 필요로 한다는 것을 알 수 있습니다.

이것들 사이의 차이점을 설명해 줄 수 있는 사람이 있습니까?

폭 자동

div 또는 p와 같은 블록 수준 요소의 초기 너비는 auto입니다.이렇게 하면 포함 블록 내에서 사용 가능한 모든 수평 공간을 차지하도록 확장됩니다.수평 패딩 또는 테두리가 있는 경우 이러한 너비는 요소의 전체 너비에 추가되지 않습니다.

폭 100%

반면에 너비:100%를 지정하면 요소의 전체 너비는 포함 블록의 100%에 수평 여백, 패딩 및 테두리가 됩니다(박스 크기:보더 상자를 사용한 적이 없는 경우, 여백만 100%에 추가하여 전체 너비를 계산하는 방법을 변경합니다).이것이 당신이 원하는 것일 수도 있지만, 대부분 그렇지 않습니다.

차이를 시각화하려면 이 그림을 참조하십시오.

원천

• width: auto;에서는 여백, 패딩 또는 테두리에서 추가 공간을 추가할 때 요소의 너비를 상위 컨테이너와 동일하게 유지하려고 최대한 노력합니다.

• width: 100%;요소를 상위 컨테이너만큼 넓게 만듭니다.상위 항목에 관계없이 요소의 크기에 추가 간격이 추가됩니다.일반적으로 문제가 발생합니다.

너비 100% : 내용 너비를 100%로 만듭니다.여백, 테두리, 패딩이 이 너비에 추가되고 요소가 오버플로우됩니다.

Width auto : 여백, 테두리, 패딩을 포함한 사용 가능한 공간에 요소를 맞춥니다. 여백 + 패딩 + 테두리를 조정한 후 남은 공간은 너비/높이를 사용할 수 있습니다.

너비 100% + 상자 크기: 테두리 상자 : 테두리, 패딩을 포함한 사용 가능한 공간에 요소를 맞춥니다(마진으로 인해 용기가 오버플로됨).

여백과 테두리에 관한 것입니다.사용하는 경우width: auto그러면 경계를 추가하면, 당신의 디브는 컨테이너보다 크지 않을 것입니다.반면에, 만약 당신이 사용한다면.width: 100%요소의 너비는 100% + 테두리 또는 여백이 됩니다.자세한 내용은 다음을 참조하십시오.

너비 값이 자동인 한 요소는 컨테이너보다 넓어지는 일 없이 수평 여백, 패딩 및 테두리를 가질 수 있습니다(물론 여백-왼쪽 + 테두리-왼쪽-폭 + 패딩-오른쪽 + 테두리-오른쪽 + 테두리-오른쪽의 합이 컨테이너보다 큰 경우는 제외).내용 상자의 너비는 용기 너비에서 여백, 패딩 및 테두리를 뺀 경우 남은 너비가 됩니다.

반면에 너비:100%를 지정하면 요소의 전체 너비는 포함 블록의 100%에 수평 여백, 패딩 및 테두리가 됩니다(박스 크기:보더 상자를 사용한 적이 없는 경우, 여백만 100%에 추가하여 전체 너비를 계산하는 방법을 변경합니다).이것이 당신이 원하는 것일 수도 있지만, 대부분 그렇지 않습니다.

출처:

http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

div 또는 p와 같은 블록 수준 요소의 초기 너비는 auto입니다.

width:auto를 사용하여 명시적으로 지정된 너비를 실행 취소합니다.

너비:100%를 지정하면 요소의 전체 너비는 포함 블록의 100%와 수평 여백, 패딩 및 테두리가 됩니다.

따라서 다음 번에 블록 레벨 요소의 너비를 100%로 설정하여 사용 가능한 모든 너비를 차지하도록 할 때는 블록 레벨 요소를 자동으로 설정하는 것이 정말 필요한지 고려해 보십시오.

우리가 말할 때

width:auto;

너비는 상위 요소의 전체 너비를 초과하지 않습니다.최대 너비는 상위 너비입니다.테두리, 패딩 및 여백을 추가하더라도 테두리, 패딩 및 여백을 위한 공간을 제공하기 위해 요소의 내용 자체가 작아집니다.테두리 + 패딩 + 여백에 필요한 공간이 상위 요소의 전체 너비보다 클 경우 내용 너비는 0이 됩니다.

우리가 말할 때

width:100%;

요소의 내용 너비는 부모 요소의 100%가 되며 지금부터 테두리, 패딩 또는 여백을 추가하면 자식 요소가 부모 요소의 너비를 초과하고 부모 요소 밖으로 오버플로우되기 시작합니다.

위치 지정 요소의 경우 너비: 100%, 상위 요소에 대한 상대적이 아니라 가장 가까운 위치에 있는 요소입니다.

모두 정적으로 배치된 경우 가장 가까운 상위 요소입니다.

width:auto; + display:inline-block; css를 사용하여 멋진 효과를 냅니다.

• width : auto; 다른 객체와의 조정을 위해 요소 너비를 자동으로 설정합니다. 예를 들어, div 요소가 있고 다른 div 요소와 div 요소도 블록 레벨 요소이므로 한 줄에 함께 표시합니다. auto; 및 display : div-block

언급URL : https://stackoverflow.com/questions/17468733/difference-between-width-auto-and-width-100-percent