요 CSS는 무슨 뜻인가요? -webkit-box-sizing:border-box;
본문
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
요거 삭제하니까 자꾸 에러나네요.
답변 5
해당 코드는 CSS의 box-sizing 속성을 전체 요소에 적용하는 코드입니다. box-sizing 속성은 요소의 크기 계산 방법을 변경하는 속성으로, border와 padding을 포함하여 요소의 전체 크기를 계산할 때 사용합니다.
위의 코드는 모든 요소에 대해 box-sizing 속성을 적용하고 있습니다. 일반적으로 이렇게 전체 요소에 적용하는 것은 CSS 스타일을 일관성 있게 유지하고 요소 크기 계산을 편리하게 하기 위한 방법입니다.
코드를 삭제했을 때 에러가 발생하는 이유는 해당 코드가 전체적인 스타일링에 영향을 주고 있기 때문입니다. 코드를 삭제하면 box-sizing 속성이 적용되지 않아서 기본값으로 동작하게 되고, 스타일 계산이 변경되어 예기치 않은 결과가 발생할 수 있습니다.
에러를 해결하려면, 해당 코드를 삭제하지 않고 유지하시는 것이 좋습니다.
* box-sizing이 border-box가 아닌경우
div { border:1px solid #000; padding:10px; width: 100px; height: 100px; }
해당 박스가 실제 확보되는 영역 크기가 122*122, 즉 border과 padding은 너비 높이 값외에서 추가됩니다.
box-sizing이 border-box로 설정된 경우
div { border:1px solid #000; padding:10px; width: 100px; height: 100px; box-sizing:border-box; }
해당 박스가 실제 확보되는 영역 크기가 100*100, 즉 border과 padding는 너비 높이 값에서 계산합니다.
감사합니다.
이런거 어떻게 보는거에요? 미리 보는 방법이 있나요?
어디서 찾아 보나요?
아래 코드를 html 파일로 저장하고 브라우저로 열어 개발자 도구를 확인하시면 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box1 { display:inline-block; width: 100px; height: 100px; padding: 10px; border:1px solid #ccc; }
.box2 { display:inline-block; width: 100px; height: 100px; padding: 10px; border:1px solid #ccc; box-sizing: border-box;}
</style>
</head>
<body>
<div class="box1">122X122</div>
<div class="box2">100X100</div>
</body>
</html>
답변을 작성하시기 전에 로그인 해주세요.