지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > CSS 튜토리얼 > 너비:100%와 너비:자동의 차이

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

php中世界最好的语言
풀어 주다： 2018-03-22 15:21:00
원래의
2426명이 탐색했습니다.

이번에는 width:100%;와 width:auto의 차이점을 알려드리겠습니다. 

<p>
    <p>1111</p>
</p>
p{
　　width:980px;<br>　　background-color: #ccc;<br>　　height：300px;
}
p{
     width:100%;<br>　　/*width:auto;*/
    padding:10px;<br>　　background-color:#000;<br>
}
로그인 후 복사
p의 너비가 100%인 경우 p의 너비가 980px가 되어 이미 p 영역을 채우고 패딩이 있으므로 p를 초과한다는 의미입니다.

그리고 width:auto일 때 전체 너비(너비,

margin

, 패딩, 테두리 포함)는 상위 너비(너비, 상위 여백, 패딩, 테두리 제외)와 동일하므로 패딩이 왼쪽과 오른쪽이 10px 공간이면 너비로 주어진 값은 960px입니다. 그러나 width:100%이든 자동이든 계산 기준은 전체 너비 값이 아닌 상위 콘텐츠 영역 너비 값입니다.

이 기사의 사례를 읽으신 후 이 방법을 마스터하셨다고 믿습니다. 중국 사이트의 PHP 기타 관련 기사를 주목해 주세요!

추천 도서:

폭포 흐름 레이아웃 및 무한 로딩 사진 앨범 효과


CSS로 3D 버튼 효과 구현


투명을 사용하여 삼각형 만들기

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

관련 라벨：
100% auto width
원천：php.cn
이전 기사：폭포 흐름 레이아웃 및 무한 로딩 사진 앨범 효과 다음 기사：왼쪽은 고정, 오른쪽은 적응형 레이아웃
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
Width 속성을 추가하여 콘텐츠를 왼쪽으로 이동합니다. 나는 본문에 여백을 제공했습니다. main {left margin: 200px; right margin: 200px; text alignment: center} ...
에서 2024-04-06 22:01:35
0
3
816
다른 CSS 코드가 무엇이든 관계없이 Flexbox의 텍스트를 수직 중앙에 강제로 배치할 수 있는 방법이 있나요? 제가 개발 중인 웹사이트에 사용되는 더 큰 CSS 코드의 일부인 다음 CSS 코드가 있습니다. .cards-u{display:flex;flex-wrap:wrap;...
에서 2024-04-06 20:41:51
0
1
518
숨겨진 측면 패널 표시: 선택됨 애니메이션 햄버거 메뉴를 통해 보기로 전환할 수 있는 탐색 메뉴를 측면 패널에 갖고 싶습니다. JS 없이 CSS만 사용하여 만들고 싶습니다. :checked 의사...
에서 2024-04-06 15:49:33
0
1
319
Electron은 사전 로드 시 AppData를 가져옵니다. 사전 로드된 AppData 디렉터리를 얻는 방법은 무엇입니까? Background.js[...]asyncfunctioncreateWindow(){constwin=...
에서 2024-04-06 11:05:31
0
1
417
SASS 스타일은 미디어 쿼리보다 우선합니다. 미디어 쿼리를 사용하여 데스크톱 장치의 스타일을 재정의하려고 하는데 작동하지 않는 것 같습니다. 테두리 색상을 h2 요소로 설정하고 문제를 더 잘 시각화하기 위해...
에서 2024-04-05 15:03:00
0
1
3396
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿