Interesting CSS box model--[Beef Brisket Press Release System]_html/css

Interesting CSS box model--[Beef Brisket Press Release System]_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:49:03

Original

1048 people have browsed it

Foreword

Traditional table layout uses tables of different sizes and nested tables to position and layout web page content. After typesetting with CSS, the web page is arranged through boxes and box nesting of different sizes defined by CSS. The css box model is the core of div layout.

To put it bluntly, before using the CSS box model, the elements in the HTML were like a bunch of scattered apples; after using it, they turned into boxes of apples stacked together. Web pages typed in this way have concise code, are easy to update, and are easily compatible with multiple browsers.

css box model elements and calculations

By defining a series of box-related attributes (content, padding, border, border margin) to control the performance and layout structure of each box and even the entire HTML document, each attribute includes top, right, Down, left (clockwise).

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

From the above picture we can see:

The actual width of the box: margin-left border-left padding-left width padding-right border-right margin-right

The actual height of the box: margin-top border-top padding-top height padding-bottom border-bottom margin-bottom

Example

Below is a small DEMO I made. The css code and firebug renderings are a verification of the calculation of the box model above. Taking Firefox as an example, the layout under HTML corresponding to F12 is a visual application of the box model.

DEMO.aspx code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DEMO.aspx.cs" Inherits="牛腩新闻发布系统WM.DEMO" %><!DOCTYPE html><!---	创建人：王美	创建时间：2015-02-25 11:25:35--><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <link href="css/common.css" rel="stylesheet" /></head><body>    <form id="form1" runat="server">    <div>        <div class="box">nice to meet you!</div>                             </div>    </form></body></html>

Copy after login

common.css code

/*    创建人：王美    *//*实验1*/.box{   background:black;   color:white ;   width:100px;   height:100px;   padding :10px;   border:20px solid pink;   margin:30px;   float:right ;}

Copy after login

Renderings, firebug renderings

Conclusion

Some seemingly complicated things will become vivid and interesting as we analyze and practice them bit by bit. Practice brings true knowledge, and this has been the case since ancient times.