CSS3 user interface

The user interface module of CSS3 provides more effects and options for the UI performance of the page.

Added some new user interface features to adjust element size, box size and outer border.

resize attribute

Attribute definition and usage instructions

resize attribute specifies one Whether the element is resized by the user.

Note: The resize attribute is suitable for calculating whether the overflow value of other elements is "visible".

Default value: none

Inheritance: no

##Version: CSS3

JavaScript syntax: object.style.resize="both"

Browser support: Firefox 4 +, Chrome, and Safari support the resize attribute.

Syntax

resize: none|both|horizontal|vertical:

none: Does not allow the user to resize the element. Do not allow the user to resize the element.

both: The user can adjust the width and height of the element.

horizontal: The user can adjust the width of the element

vertical: The user can adjust the height of the element.

<!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 attributebox-sizing has two values: content-box and border-box.

box-sizing: content-box;

When box-sizing:content-box; is set, the browser's interpretation of the box model complies with the W3C standard. When it defines width and height, its Width does not include border and padding.

box-sizing: border-box;
When box-sizing:border-box; is set, the browser interprets the box model the same as pre-IE6 versions when it defines width and height. , border and padding are included in the width and height. The width and height of the content can be obtained by defining the width and height minus the width of the padding and border in the corresponding direction. The width and height of the content must be guaranteed not to be negative. If necessary, the size of the border box of the element will be automatically increased so that the width or height of the content is at least 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 attribute The outline-offset property offsets the outline and draws it beyond the edge of the border.

There are two differences between outlines and borders:

1. The outline does not take up space

2. The outline may be non-rectangular

Syntax:

outline-offset：<length> | inherit

<length>: Defines the value of the contour distance container.

inherit: Default inheritance.

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

Continuing Learning

new file

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

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]