집 > 기사 > 웹 프론트엔드 > DIV가 너비를 설정하고 상위 요소를 초과한 후 문제를 해결하는 방법

DIV가 너비를 설정하고 상위 요소를 초과한 후 문제를 해결하는 방법

php中世界最好的语言원래의: 2018-01-20 09:24:363106검색

이번에는 너비를 설정한 후 DIV가 상위 요소를 초과하는 문제를 해결하는 방법을 보여 드리겠습니다. 너비를 설정한 후 DIV가 상위 요소를 초과하는 문제를 해결하기 위한 주의 사항은 무엇입니까? , 살펴 보겠습니다.

머리말

이 글에서는 도움이 필요한 친구를 넘어서 padding 또는 margin을 설정하기 전에 div 너비를 width:100%로 설정하는 문제를 해결하기 위해 CSS3의 새로운 속성 상자 크기를 사용하는 방법을 소개합니다. 그것을 참조할 수 있습니다.

Syntax

box-sizing: content-box|border-box|inherit;

값 1, 콘텐츠 상자

이것은 CSS2.1에서 지정한 너비와 높이 동작입니다.

너비와 높이는 각각 요소의 콘텐츠 상자에 적용됩니다.

요소의 padding과 테두리를 너비와 높이 바깥쪽에 그립니다.

값 2, 테두리 상자

요소에 설정된 너비와 높이에 따라 요소의 테두리 상자가 결정됩니다.

즉, 요소에 지정된 패딩과 테두리는 설정된 너비와 높이 내에서 그려집니다.

콘텐츠의 너비와 높이는 설정된 너비와 높이에서 각각 테두리와 패딩을 빼면 얻을 수 있습니다.

값 3, 상속

은 상자 크기 속성 값이 상위 요소 에서 상속되어야 함을 지정합니다.

<!DOCTYPE html>
<html>
<head>
<style>
div.container
{
width:100%;
border:1em solid;
padding:15px;
box-sizing:border-box;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:100%;
border:1em solid red;
float:left;
padding:15px;
}
</style>
</head>
<body>
 
<div class="container">
<div class="box">这个 div 占据左半部分。</div>
</div>
 
</body>
</html>

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!