An interesting CSS box model-[niuyun news publishing system] and css news publishing system

An interesting CSS box model-[niuyun news publishing system] and css news publishing system

Preface

Traditional table formatting uses the nesting of different sizes and tables to locate the content of typographical web pages. After css is used, the webpage is organized by nesting of boxes and boxes with different sizes defined by css. The css box model is the core of div layout.

To put it bluntly, no css box model is used in the past. Elements in html are like a pile of scattered apples. Once used, the whole box of apples is stacked together. Web pages in this way are simple, easy to update, and compatible with multiple browsers.

Css Box Model Elements and computing

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

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

We can see that:

Actual box width: margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

Actual box height: margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

Instance

The following is a small demo I made. css code and firebug are a verification of the above box model calculation. Take Firefox as an example.LayoutIs the visualization application of the box model.

DEMO. aspx code

<% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "DEMO. aspx. cs" Inherits = "niuyun news publishing system WM. DEMO" %> <! DOCTYPE html> <! --- Created by: Wang Mei Creation Time: 11:25:35 --> 

Common.css code



/* Created by: 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 complicated things will become vivid and interesting in our analysis and practice. This is the case since ancient times.