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>

제출하다 코드 재설정

자동운전

이전 섹션 다음 섹션

튜토리얼 목록

도움을 받다

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

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

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

회사 소개 부인 성명 Sitemap: PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！

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

CSS3 사용자 인터페이스

초등학교Imperial CMS 기업 모방 웹사이트 튜토리얼

초등학교WordPress에 기초가 전혀 없는 초보자는 개인 블로그와 기업 웹 사이트를 구축합니다.

초등학교궁극의 CMS 제로 기반 웹사이트 구축 지침 영상

초등학교프론트엔드 프로젝트 - Shangyou [HTML/CSS/JS 기술 종합실습]

중급Vue3.0 from 0을 통해 범용 백엔드 관리 시스템 프로젝트 실습 구축

초등학교제로 기반 프론트엔드 과정 [Vue 고급 학습 및 실무 적용]

초등학교웹 프론트엔드 튜토리얼 [HTML5+CSS3+JS]

초등학교apipost에 대한 빠른 소개

중급Vue3+TypeScript 실무 튜토리얼-엔터프라이즈 수준 프로젝트 실습

초등학교PHP로 사업을 시작하는 방법에 대해 간단히 이야기해 보겠습니다.

중급VUE 전자상거래 프로젝트(프론트엔드 & 백엔드 듀얼 프로젝트 실전)

초등학교Apipost 실무 응용 [api, 인터페이스, 자동화 테스트, 모의]