CSS3 's Box-sizing Property graphic tutorial

This time to bring you CSS3 box-sizing Property Graphics tutorial, use CSS3 box-sizing attribute notice what, the following is the actual case, together to see.

Brief introduction

The Box-sizing property includes Content-box (default), Border-box,padding-box.

1, Content-box,border and padding do not count into width

2, padding-box,padding calculation into the width inside

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

Attention:

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

Examples are as follows:

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

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

How to deal with the disappearance of CSS boundary lines

Enabling multi-background simulation of dynamic borders