CSS Box model

Source: Internet
Author: User

    • Box model

{width: 200px; height: 200px; border: 2px solid red;}

The width, height, which is usually set, refers only to the content area, not including border, padding, and so on. However, you can specify a box model area by setting the Box-sizing property, and the box-sizing has two values: Content-box and Border-box. By default, when the current box model box-sizing value is Content-box, the width height of the box model is set to the content width.

When manually setting the Box-sizing value to Boxder-box, the width height of the current box model represents the overall width and height of the content +padding value +border.

The following box all the width of the same, the difference is the left side set Box-sizing:border-box.

You can see the difference, the width of the left setting is 200px = content width (186px) + padding (5px * 2) +border;

The box-sizing is not set on the right, the default is Content-box, and the width is set to only 200px of the height of the content.

    • Box-shadow box Shadows: Shadows are just decorations and don't occupy space

Blur Radius: Sets the range of content blur, the larger the value, the greater the range of the border blur,

Shadow Size: Sets the range of extra blur, the larger the value, the greater the blur range, and the number of negative values you can set

Color: Blur color, if not set will take font color

    • Outline: Box border, decoration, do not occupy space

CSS Box model

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.