Home >Web Front-end >HTML Tutorial >Interesting CSS box model--[Beef Brisket Press Release System]_html/css_WEB-ITnose
Interesting CSS box model--[Beef Brisket Press Release System]_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:49:031058browse
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.
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
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>
/* 创建人：王美 *//*实验1*/.box{ background:black; color:white ; width:100px; height:100px; padding :10px; border:20px solid pink; margin:30px; float:right ;}
Renderings, firebug renderings
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.