CSS3 사용자 인터페이스

CSS3 사용자 인터페이스

CSS3에는 요소 크기, 상자 크기 및 외부 테두리를 조정하는 몇 가지 새로운 사용자 인터페이스 기능이 추가되었습니다.

이 장에서는 다음 사용자 인터페이스 속성에 대해 배웁니다.

resize
box-sizing
outline-offset

CSS3 Resize

CSS3에서 에서 resize 속성은 사용자가 요소의 크기를 조정해야 하는지 여부를 지정합니다.

이 div 요소는 사용자가 크기를 조정합니다. (Firefox 4+, Chrome, Safari)

CSS 코드는 다음과 같습니다:

Instance

사용자가 지정한 div 요소 크기:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        div
        {
            border:2px solid;
            padding:10px 40px;
            width:300px;
            resize:both;
            overflow:auto;
        }
    </style>
</head>
<body>
<div>调整属性指定一个元素是否由用户可调整大小的。.</div>
</body>
</html>

프로그램을 실행하고 사용해 보세요

CSS3 Box Sizing

box-sizing 속성을 사용하면 콘텐츠가 특정 영역에 어떻게 맞는지 정확하게 정의할 수 있습니다. ㅋㅋㅋ

개요- offset 속성 윤곽선을 오프셋하고 테두리 가장자리 너머로 그립니다.

윤곽선은 두 가지 측면에서 테두리와 다릅니다.

윤곽선은 공간을 차지하지 않습니다. 윤곽선은 직사각형이 아닐 수 있습니다.

예

테두리 가장자리 바깥쪽 15픽셀에 윤곽선을 지정합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style> 
div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
border:1em solid red;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">这个div占据了左边的一半。.</div>
<div class="box">这个div占据了右边的一半。</div>
</div>
</body>
</html>

실행 시도해 볼 수 있는 프로그램

새로운 UI 기능

3 왼쪽 화살표 탐색 키를 사용하여 탐색할 위치 지정오른쪽 화살표 탐색 키를 사용하여 탐색할 위치 지정위쪽 화살표 탐색 키를 사용할 때 탐색할 위치를 지정하세요윤곽선 수정 및 테두리 너머의 가장자리 그리기요소 크기 조정 여부 지정 사용자지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> div { margin:20px; width:150px; padding:10px; height:70px; border:2px solid black; outline:2px solid red; outline-offset:15px; } </style> </head> <body> <p><b>注意:</b> Internet Explorer 不兼容 outline-offset属性.</p> <div>这个 div有一个轮廓边界15 px边境外的边缘。</div> </body> </html>

제출하다 코드 재설정

자동운전

이전 섹션 다음 섹션

튜토리얼 목록

도움을 받다

코스 추천
코스웨어 다운로드

현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~

이 강좌를 시청한 학생들도 학습하고 있습니다.

속성	설명	CSS
appearance	을 사용하면 요소를 표준 UI 요소처럼 보이게 만들 수 있습니다.	3
box-sizing	을 사용하면 영역에 맞게 특정 요소를 특정 방식으로 정의할 수 있습니다.	3
icon	은 제작자에게 요소를 해당 아이콘으로 설정할 수 있는 기능을 제공합니다.	nav-left
3		nav-right
3		nav-up
3		outline-offset
3		resize
3

CSS3 사용자 인터페이스

초등학교CSS3 시작하기 튜토리얼

초등학교Firebug 시작하기 튜토리얼

초등학교SOAP 시작하기 튜토리얼

초등학교jQuery 시작하기 튜토리얼

초등학교AJAX 시작하기 튜토리얼

초등학교SQL 시작하기 튜토리얼 매뉴얼

초등학교Git 시작하기 비디오 튜토리얼

중급Webpack 시작하기 비디오 튜토리얼

중급Gulp 시작하기 비디오 튜토리얼

중급Sass 마스터리 시작하기 비디오 튜토리얼

고급의Laravel 4 시작하기 비디오 튜토리얼

초등학교jQuery를 시작하기 위한 기본 비디오 튜토리얼