Examples of CSS box-sizing

Reprinted from Http://www.cnblogs.com/zhaoran/archive/2013/05/24/3097482.html

CSS3 box-sizing Properties

The Box-sizing property can be one of three values: Content-box (Default), Border-box,padding-box.

Content-box,border and padding do not count into width//Because the content box contains only the width of the content padding and border-box so it becomes very large

Padding-box,padding calculation into width within//padding not included

Border-box,border and padding calculated into the width, in fact, is the strange mode ~//border and padding are counted inside what box is the largest side of the front (memory)

ie8+ Browser supports Content-box and Border-box;

The FF supports all three values.

When used:

-webkit-box-sizing:100px; For Ios-safari, Android

-moz-box-sizing:100px; For FF

box-sizing:100px; For other

Chestnuts:

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

(FF):

Examples of CSS box-sizing