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에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 1007 | CSS | 8년 전 | 1833 | ||
| 1006 | CSS | 8년 전 | 2540 | ||
| 1005 | CSS | 8년 전 | 1994 | ||
| 1004 | HTML | 8년 전 | 2415 | ||
| 1003 | HTML | 8년 전 | 2849 | ||
| 1002 | HTML | 8년 전 | 3224 | ||
| 1001 | HTML | 8년 전 | 3692 | ||
| 1000 | HTML | 8년 전 | 2165 | ||
| 999 | HTML | 8년 전 | 2395 | ||
| 998 | HTML | 8년 전 | 2323 | ||
| 997 | HTML | 8년 전 | 1943 | ||
| 996 | HTML | 8년 전 | 2221 | ||
| 995 | 기타 | 8년 전 | 2085 | ||
| 994 | 기타 | 8년 전 | 2365 | ||
| 993 | 기타 | 8년 전 | 3230 | ||
| 992 | 반응형 | 8년 전 | 2754 | ||
| 991 | 반응형 | 8년 전 | 1977 | ||
| 990 | 반응형 | 8년 전 | 1947 | ||
| 989 | 반응형 | 8년 전 | 2252 | ||
| 988 | 반응형 | 8년 전 | 2412 | ||
| 987 | 반응형 | 8년 전 | 2506 | ||
| 986 | CSS | 8년 전 | 2647 | ||
| 985 | CSS | 8년 전 | 2708 | ||
| 984 | CSS | 8년 전 | 2673 | ||
| 983 | CSS | 8년 전 | 2357 | ||
| 982 | CSS | 8년 전 | 2020 | ||
| 981 | CSS | 8년 전 | 2143 | ||
| 980 | CSS | 8년 전 | 3634 | ||
| 979 | CSS | 8년 전 | 2926 | ||
| 978 | CSS | 8년 전 | 2163 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기