CSS3 상자 크기

CSS3 box size

CSS3 box-sizing 속성은 padding(패딩)과 border(테두리)를 포함하는 너비와 높이 속성을 설정할 수 있습니다.

CSS3 상자 크기 조정 속성을 사용하지 않습니다

기본적으로 요소의 너비와 높이는 다음과 같이 계산됩니다.

너비(너비) + 패딩(패딩) + 테두리(테두리) = 요소의 실제 너비 요소

높이 + 패딩 + 테두리 = 요소의 실제 높이

즉, 요소의 너비/높이를 설정할 때 요소의 실제 표시 높이와 너비가 더 커집니다(테두리와 패딩이 더 크기 때문). 너비/높이로도 계산됨)

     
  
这个是个较小的框 (width 为 300px ，height 为 100px)。
 
 
这个是个较大的框 (width 为 300px ，height 为 100px)。
  

이 방법을 사용하여 패딩이 포함된 더 작은 상자를 얻으려면 테두리의 너비와 패딩을 고려해야 합니다.

CSS3의 상자 크기 조정 속성은 이 문제를 매우 잘 해결합니다.

---

CSS3 box-sizing 속성 사용

CSS3 box-sizing 속성에는 요소의 너비와 높이에 패딩(padding)과 테두리(border)가 포함됩니다.

요소에 box-sizing: border-box;가 설정된 경우 패딩(내부 여백)과 테두리(테두리)도 너비와 높이에 포함됩니다.

     
  
两个 div 现在是一样大小的!
 
 
php中文网!
  

결과에서 box-sizing: border-box ; 효과가 더 좋습니다. 이는 바로 많은 개발자에게 필요한 것입니다.

다음 코드는 모든 요소의 크기를 보다 직관적인 방식으로 표시할 수 있습니다. 많은 브라우저는 이미 box-sizing: border-box; 를 지원합니다. (그러나 전부는 아닙니다. 그렇기 때문에 width: 100%인 입력 요소와 텍스트 요소의 너비가 다릅니다.)

     
  
 用户名:
 
 邮箱:
 
 评论:
   

  
 
提示： 可以尝试移除样式中的 box-sizing 属性，看看会发生什么。注意移除后部分浏览器 input, textarea, 和 submit 按钮的宽度不一致。