CSS3 사용자 인터페이스 모듈은 페이지의 UI 성능을 위한 더 많은 효과와 옵션을 제공합니다.
요소 크기, 상자 크기 및 외부 테두리를 조정하는 몇 가지 새로운 사용자 인터페이스 기능을 추가했습니다.
resize 속성
속성 정의 및 사용 지침
resize 속성은 사용자가 요소의 크기를 조정할지 여부를 지정합니다.
Note: resize 속성은 다른 요소의 오버플로 값이 "표시"되는지 여부를 계산하는 데 적합합니다.
기본값: 없음
상속: no
버전: CSS3
JavaScript 구문: object.style.resize="both"
찾아보기 지원: Firefox 4+, Chrome 및 Safari는 크기 조정 속성을 지원합니다.
Syntax
resize: none|both|horizontal|vertical:
none: 사용자가 요소의 크기를 조정하는 것을 허용하지 않습니다. 사용자가 요소의 크기를 조정하는 것을 허용하지 마세요.
모두: 사용자는 요소의 너비와 높이를 조정할 수 있습니다.
horizontal: 사용자가 요소의 너비를 조정할 수 있습니다.
vertical: 사용자가 요소의 높이를 조정할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
width: 600px;
height: 300px;
border: 1px solid #000;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<p>请注意观察方框右下角</p>
<div class="box"></div>
</body>
</html>
box-sizing 속성
box-sizing에는 콘텐츠 상자와 테두리 상자라는 두 가지 값이 있습니다.
box-sizing:content-box;
box-sizing:content-box;가 설정되면 브라우저의 상자 모델 해석은 W3C 표준을 따르며 너비와 높이를 정의할 때 너비에는 테두리와 패딩이 포함되지 않습니다. .
box-sizing: border-box;
box-sizing: border-box;가 설정되면 브라우저는 너비와 높이를 정의할 때 상자 모델을 너비와 높이에 포함시킵니다. 키. 콘텐츠의 너비와 높이는 해당 방향의 너비와 높이에서 패딩과 테두리의 너비를 뺀 값을 정의하여 구할 수 있습니다. 콘텐츠의 너비와 높이는 음수가 되지 않도록 보장해야 합니다. 필요한 경우 콘텐츠의 너비나 높이가 0 이상이 되도록 요소의 테두리 상자 크기가 자동으로 커집니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.content-box{
box-sizing:content-box;
-moz-box-sizing:content-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #E6A43F;
background: blue;
}
.padding-box{
box-sizing:padding-box;
-moz-box-sizing:padding-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #186645;
background: red;
}
.border-box{
box-sizing:border-box;
-moz-box-sizing:border-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #3DA3EF;
background: yellow;
}
</style>
</head>
<body>
<div class="content-box"></div>
<div class="padding-box"></div>
<div class="border-box"></div>
</body>
</html>outline-offset 속성
outline-offset 속성은 윤곽선을 오프셋하고 테두리 가장자리 너머로 그립니다.
윤곽선과 테두리에는 두 가지 차이점이 있습니다.
1. 윤곽선은 공간을 차지하지 않습니다.
2 윤곽선은 직사각형이 아닐 수 있습니다.
구문:
outline-offset: <length> | 상속
<length>: 윤곽선 거리 컨테이너의 값을 정의합니다.
inherit: 기본적으로 상속됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
height: 100px;
width: 100px;
margin: 50px auto;
outline: 10px solid rgba(255,255,0,9);
background: black;
outline-offset: 10px;
border:5px solid blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>