전에는 부트 스트랩을 학습 할 때 다양한 이상한 함정을 만났습니다. 부트 스트랩을 배우기 전에 준비 작업을 수행하면 약간의 함정을 피할 수 있습니다. 아래에서 편집자는 테두리 박스 속성에 대한 지식을 소개합니다.
Boostrap의 자체 CSS 파일 : boostrap.css에는 코드가 있습니다.
* {-webkit-box-sizing : Border-Box; -모임 박스 크기 : 국경 박스; 박스 사이징 : 국경 박스; }이것은 코드를 작성할 때이 속성이 어디에나있을 것임을 의미합니다. 대체 상자 크기는 무엇입니까? Boder-Box? 먼저 매우 일반적인 코드를 살펴 보겠습니다.
<div> <div> </div> </div>
찾기 위해 코드를 실행합니다. 외부 높이는 702px, 내부 너비는 500px이고 높이는 500px입니다. 모두 여기에 의심의 여지가 없어야합니다. 이제 다른 코드를 살펴 보겠습니다.
* {-webkit-box-sizing : Border-Box; -모임 박스 크기 : 국경 박스; 박스 사이징 : 국경 박스; } <div> <div> </div> </div>이 코드는 실제로 처음 두 코드를 추가 한 것입니다. 이제 Boostrap의 프레임 워크에서 코드를 작성하기 시작한다는 것을 간단히 이해할 수 있습니다. 코드 실행 결과는 다음과 같습니다. 외부의 너비는 500px이고 내부의 높이는 298px입니다.
이 결과의 이유는 다음과 같습니다. 박스 크기 : 테두리 박스를 통해 요소의 너비와 높이가 패딩 및 테두리의 영향을받지 않습니다. 예를 들어, 위 코드에서 외부에 패딩과 테두리가 있더라도 패딩 및 테두리는 외부의 너비와 높이에 영향을 미치지 않으며 외부의 너비와 높이는 여전히 500px입니다. 그러나 패딩과 국경은 어디로 갔습니까? 답 : 안으로 들어가! 브라우저의 디버깅 도구를 열고 외부의 스타일 세부 사항을 확인하십시오.
우리는 패딩과 테두리가 모두 유효하다는 것을 분명히 알 수 있지만 외부의 내부 공간을 차지합니다. 패딩 : 100px는 외부의 200px 너비와 높이 값을 차지하고 국경은 내부의 2px 너비와 높이 값을 차지하므로 내부는 외부의 298px 너비와 높이 값 만 얻을 수 있습니다.
IE에 따라 웹 개발에 대한 경험이 있다면 Box-Sizing : Border-Box는 IE의 하위 버전의 이상한 모드입니다.
위는 편집자가 소개 한 BOOSTRAP 준비에 대한 관련 지식입니다. 배웠습니까? 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. 동시에 Wulin.com 웹 사이트에 대한 지원에 감사드립니다!
아래는 박스 사이징 테두리 박스에 대한 이해에 대한 간략한 소개입니다.
-webkit- 박스 크기 : 국경 박스; DIV가 설정 한 너비와 높이에는 경계와 패딩이 포함됩니다.
<! docType html> <html> <head> <title> box-sizing </title> <style type = "text/css">. testdiv {padding : 10px ;; width : 100px; border : 10px solit} </style> </head> <body> <div> 정상 </div> <divy style = "-Wewbbox-sigiing : Border-Box; "> Special </div> </body> </html>