CSS3 user interface

CSS3 User Interface

In CSS3, some new user interface features have been added to adjust element size, box size and outer border.

In this chapter, you will learn about the following user interface properties:

resizebox-sizingoutline-offset

##CSS3 Resizing

In CSS3, the resize attribute specifies whether an element should be resized by the user.

This div element is resized by the user. (In Firefox 4+, Chrome, and Safari)

<!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>
<p><b>注意:</b> Firefox, Safari,和 Chrome 兼容 resize 属性.</p>
<div>调整属性指定一个元素是否由用户可调整大小的。.</div>
</body>
</html>

CSS3 Box Sizing

box-sizing property Allows you to define exactly what is appropriate for a zone.

<!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>

CSS3 outline modification (outline-offset)

The outline-offset property offsets the outline and draws the outline beyond the edge of the border.

Outlines differ from borders in two ways:

Outlines take up no space Outlines may be non-rectangular

This div has an outline 15 pixels outside the border.

The CSS code is as follows:

<!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>

New user interface features

Attributes Standard user interface elements 3

box-sizing allows you to adapt The area defines certain elements in some way 3

# icon to provide the creator with the ability to set the element to an icon equivalent object. 3

nav-down Specify where to navigate using the arrow down navigation key 3

nav-index Specify the order of tabs for an element 3

nav-left Specify where to use the left arrow navigation keys to navigate 3

nav-right Specify where to use the right arrow navigation keys to navigate 3

nav-right Specify where to use the right arrow navigation keys to navigate Navigate using the arrow up navigation key 3 Resizing

Continuing Learning

new file

<!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> <p><b>注意:</b> Firefox, Safari,和 Chrome 兼容 resize 属性.</p> <div>调整属性指定一个元素是否由用户可调整大小的。.</div> </body> </html>

submit Reset Code

Automatic operation

CSS3 user interface

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]