CSS3 box-sizing 속성없이
CSS3 box-sizing 속성없이
기본적으로 요소의 너비와 높이는 다음과 같이 계산됩니다.
width + padding + border = 요소
높이 의 실제 폭 + 채우기 + 테두리 = 요소의 실제 높이
즉, 요소의 너비 / 높이를 설정하면 요소의 테두리와 채우기가 요소의 지정된 너비 / 높이에 추가되므로 요소가 설정 한 것보다 자주 표시됩니다.
다음 그림은 폭과 높이가 지정된 두 개의 <div> 요소를 보여줍니다.
위의 두 <div> 요소는 결과에서 다른 크기로 끝납니다 (div2에 패딩이 지정되었으므로).
예
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
그래서 오랫동안 웹 개발자는 패딩과 테두리를 빼야하기 때문에 원하는 것보다 더 작은 너비 값을 지정했습니다.
CSS3를 사용하면이 box-sizing속성이이 문제를 해결합니다.
게시판 목록
퍼블리셔팁
퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.
질문은 상단의 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 947 | CSS | 8년 전 | 1554 | ||
| 946 | CSS | 8년 전 | 2220 | ||
| 945 | CSS | 8년 전 | 1728 | ||
| 944 | CSS | 8년 전 | 2156 | ||
| 943 | CSS | 8년 전 | 2224 | ||
| 942 | CSS | 8년 전 | 2195 | ||
| 941 | CSS | 8년 전 | 2016 | ||
| 940 | CSS | 8년 전 | 1749 | ||
| 939 | CSS | 8년 전 | 2256 | ||
| 938 | CSS | 8년 전 | 1581 | ||
| 937 | CSS | 8년 전 | 1658 | ||
| 936 | CSS | 8년 전 | 1767 | ||
| 935 | CSS | 8년 전 | 2371 | ||
| 934 | CSS | 8년 전 | 2452 | ||
| 933 | CSS | 8년 전 | 1810 | ||
| 932 | CSS | 8년 전 | 2271 | ||
| 931 | CSS | 8년 전 | 1849 | ||
| 930 | CSS | 8년 전 | 1874 | ||
| 929 | CSS | 8년 전 | 1805 | ||
| 928 | CSS | 8년 전 | 1505 | ||
| 927 | CSS | 8년 전 | 1545 | ||
| 926 | CSS | 8년 전 | 3120 | ||
| 925 | CSS | 8년 전 | 2087 | ||
| 924 | CSS | 8년 전 | 1707 | ||
| 923 | CSS | 8년 전 | 2123 | ||
| 922 | CSS | 8년 전 | 2152 | ||
| 921 | CSS | 8년 전 | 2335 | ||
| 920 | CSS | 8년 전 | 1659 | ||
| 919 | CSS | 8년 전 | 2501 | ||
| 918 | CSS | 8년 전 | 1813 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기