Interesting CSS box model--"Beef brisket Press Release System"

Preface

The traditional table layout is to locate the content of the typesetting Web page by nesting tables and tables in different sizes, and then use CSS to compose the page by nesting the boxes and boxes of different sizes defined by CSS. CSS box model is the core of Div typesetting.

To put it bluntly, the CSS box model, HTML elements like a bunch of scattered apples, after the use of the whole box of apples into a stack together. This way the layout of the page, the code is simple, update convenient, easy to compatible with a variety of browsers.

CSS box model elements and calculations

control individual boxes and even entire HTML by defining a series of box-related attributes (content contents, fill padding, border border, margin margins) the performance and layout structure of the document, each of which includes top, right, bottom, and left (clockwise).

The following is a detailed detail of a standard box model:

By:

Box actual width: Margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

box actual height: margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-Bottom

Example

Here's a little demo,css code and Firebug is a validation of the above box model calculation. In Firefox, for example, the layout of the F12 corresponding to the HTML is the visual application of the box model.

Demo.aspx Code

<%@ page language= "C #" autoeventwireup= "true" codebehind= "DEMO.aspx.cs" inherits= "Beef brisket Press Release system Wm.demo"%><! DOCTYPE html><!---Creator: Wang Mei Creation time: 2015-02-25 11:25:35-->

COMMON.CSS Code
    /* Founder: Wang Mei    *//* experiment 1*/.box{   background:black;   Color:white;   width:100px;   height:100px;   padding:10px;   border:20px solid pink;   margin:30px;   Float:right;}

, Firebug



Conclusion
Some seemingly complex things, in our 1.1-point analysis and practice, become lively and interesting. Practice is the true truth, since ancient times.


Interesting CSS box model--"Beef brisket Press Release System"