CSS3 box-sizing Properties

Original: http://www.cnblogs.com/zhaoran/archive/2013/05/24/3097482.html

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

Padding-box,padding calculation into width inside

Border-box,border and padding calculation into the width, in fact, is a strange mode ~

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

CSS3 box-sizing Properties