Boostrap 항목 준비 테두리 box_javascript 기술-JS 튜토리얼-php.cn

Boostrap 항목 준비 테두리 box_javascript 기술

WBOY

풀어 주다： 2016-05-16 15:01:28

원래의

2063명이 탐색했습니다.

부트스트랩을 배우는 과정에서 온갖 이상한 함정에 부딪혔습니다. 부트스트랩을 배우기 전에 미리 준비를 하면 어느 정도 함정을 피할 수 있습니다. 다음으로 편집자는 border-box 속성에 대한 지식을 소개하기 시작합니다.

Boostrap과 함께 제공되는 CSS 파일: Boostrap.css에는 다음 코드가 있습니다.

* { 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
}

로그인 후 복사

즉, 코드를 작성할 때 이 속성이 어디에나 있을 것이라는 의미입니다. 그렇다면 이 box-sizing:boder-box는 정확히 무엇입니까? 먼저 매우 일반적인 코드를 살펴보겠습니다.

<div class="outer" style="width:500px; height:500px; padding:100px; border:1px solid #000; background-color: yellow; "> 
<div class="inner" style="width:100%; height:100%; background-color:pink;"></div> 
</div>

로그인 후 복사

코드를 실행하면 다음과 같은 결과가 나옵니다. 바깥쪽 높이는 702px, 너비는 702px, 안쪽 너비는 500px, 높이는 500px입니다. 여기서는 의심할 여지가 없습니다. 지금 코드를 작성하세요:

* { 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
} 
<div class="outer" style="width:500px; height:500px; padding:100px; border:1px solid #000; background-color: yellow; "> 
<div class="inner" style="width:100%; height:100%; background-color:pink;"></div> 
</div>

로그인 후 복사

이 코드는 실제로 처음 두 개의 코드를 추가한 것입니다. 단순히 Boosttrap 프레임워크에서 코드 작성을 시작하는 것으로 이해하면 됩니다. 코드를 실행한 결과는 외부 너비가 500px이고 높이가 입니다. 500px; 내부 너비와 높이는 298px입니다.

이 결과가 나오는 이유는 다음과 같습니다. box-sizing: border-box는 요소의 너비와 높이가 패딩과 테두리의 영향을 받지 않도록 만듭니다. 예를 들어 위 코드에서 외부에 패딩과 테두리, 패딩이 있어도 마찬가지입니다. 테두리는 영향을 받지 않습니다. 여전히 500px인 바깥쪽의 너비와 높이에는 영향을 미치지만 패딩과 테두리는 어디로 가나요? 답 : 안으로 달려갔습니다! 브라우저의 디버깅 도구를 열고 외부 스타일 세부정보를 확인하세요.

padding과 border가 모두 유효하지만 바깥쪽의 내부 공간을 차지하고 있음을 확실히 알 수 있습니다. padding:100px는 바깥쪽의 200px 너비와 높이 값을 차지하고, border는 2px 너비와 높이 값을 차지합니다. , 따라서 내부는 298px의 너비와 높이 값만 얻을 수 있습니다.

IE에서 웹 개발 경험이 있다면 box-sizing: border-box가 IE 하위 버전의 이상한 모드라는 것을 알게 될 것입니다.

위 내용은 부스트랩을 시작하기 위해 에디터가 소개하는 테두리 상자에 대한 지식입니다. 다들 배우셨나요? 궁금한 점이 있으면 메시지를 남겨주시면 에디터가 답변해 드립니다. 시간에. 동시에 Script House 웹사이트에 대한 귀하의 지원에 진심으로 감사드립니다!

box-sizing border-box에 대한 이해를 소개해드리겠습니다

-webkit-box-sizing: border-box; 그러면 div에서 설정한 너비와 높이에 테두리와 패딩이 포함됩니다

<!DOCTYPE html>
<html>
<head>
<title>box-sizing</title>
<style type="text/css">
.testdiv{
padding: 10px;;
width:100px;
border: 10px solid
}
</style>
</head>
<body >
<div class="testdiv" > 普通</div>
<div class="testdiv" style=" -webkit-box-sizing: border-box;">
特殊
</div>
</body>
</html>

로그인 후 복사