CSS3 box-sizing Properties

Personal Summary:

If you need compatible IE6 IE7, use Content-box. Now popular BOOTSTRAP3, it is necessary to note that it uses Border-box.

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;Width100px;Height100px;Padding20px;Border5px solid #E6A43F;BackgroundBlue }. padding-box{Box-sizing:Padding-box;-moz-box-sizing:Padding-box;Width100px;Height100px;Padding 20px;  Border: 5px solid #186645;  Red;}  box-sizing: border-box; -moz-box-sizing:border-box; Width: 100px; Height: 100px;  Padding: 20px; border:  5px solid #3DA3EF;  Background: Yellow;} </STYLE>             

(FF):

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

CSS3 box-sizing Properties