CSS3의 크기 조정 속성의 역할에 대한 자세한 설명(코드 포함)
- 藏色散人원래의
- 2018-11-05 09:35:053665검색
이 글에서는 주로 css3의 resize 속성의 기능에 대한 자세한 설명을 소개합니다.
웹페이지를 디자인할 때 우리 모두는 사용자 경험을 고려해야 합니다. 우리 모두는 CSS가 웹 페이지의 스타일과 레이아웃을 제어하는 데 사용된다는 것을 알고 있습니다. CSS3은 최신 CSS 표준입니다.
CSS3에서는 새로운 크기 조정 속성과 같이 사용자 경험을 크게 향상시키는 몇 가지 새로운 속성을 찾을 수 있습니다.
추천 참고자료 관련 영상 튜토리얼: "CSS3 Tutorial"
아래에서는 구체적인 코드 예시와 함께 CSS3를 자세히 소개하겠습니다. resize 속성 의 역할.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3中resize属性的用法示例</title>
<style>
div
{
border:3px solid #ff3844;
padding:10px 20px;
width:200px;
resize:both;
overflow:auto;
}
</style>
</head>
<body>
<div>css3中resize属性的作用：能够规定用户是否可以自由调整元素的尺寸！</div>
</body>
</html>브라우저를 통해 접속하면 최종 효과는 다음과 같습니다.
위 코드를 직접 복사하여 붙여넣으면 됩니다. 테스트를 위해 로컬에 resize 속성을 div에 추가하고 값을 둘 다로 설정합니다.
오른쪽 하단 모서리에 마우스를 드래그하면 테두리 요소와 텍스트 요소의 크기가 가로 또는 세로 방향으로 자유롭게 조정될 수 있으며 텍스트 필드 크기도 그에 따라 조정될 수 있습니다. 우리의 요구 사항에 따라. 이는 또한 resize 속성을 사용하여 요소의 크기를 변경할 수 있음을 보여줍니다.
동시에 이 div에 Overflow 속성을 추가하지 않으면 크기 조정 속성이 있어도 로컬에서 테스트할 수 없다는 점에 유의해야 합니다. . 따라서 크기 조정 속성은 오버플로 및 크기 조정 속성이 동시에 설정된 경우에만 효과가 있습니다. 물론 오버플로 값은 자동, 숨김 또는 스크롤이 될 수 있습니다.
크기 조정을 위한 선택적 값을 요약하겠습니다.
| 없음을 설정하면 사용자가 요소의 크기. |
| 두 가지 설정을 모두 설정하면 사용자가 요소의 높이와 너비를 조정할 수 있습니다. |
| 가로로 설정한다는 것은 사용자가 요소의 너비를 조정할 수 있다는 의미입니다. |
| 세로로 설정하면 사용자가 요소의 높이를 조정할 수 있습니다. |
이 글은 css3에서 resize 속성의 역할에 관한 글입니다자세한 설명이 매우 간단하고 이해하기 쉽습니다. 도움이 필요한 사람들에게 도움이 되기를 바랍니다. 친구의 도움!
위 내용은 CSS3의 크기 조정 속성의 역할에 대한 자세한 설명(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!