CSS Layout model

The layout model is the same as the box model, which is the most basic and core concept of CSS. But the layout model is based on the box model and differs from the CSS layout style or CSS layout template that we often say. If the layout model is this, then the CSS layout template is the last, the external representation. In Web pages, elements have three layout models: 1, Flow model (flow) 2, floating model (float) 3, layer model (layers)

The flow layout model has 2 typical features: 1th, the block element will extend vertically from top to bottom in the containing element , because in the default state, the width of the block element is 100%. 2nd, in the flow model, the inline elements are displayed horizontally from left to right within the containing element in which they are located.

What is a layer layout model? The layer layout model is like the most popular layer editing feature in Photoshop, where each layer can be precisely positioned, but in the web design area, the layer layout is not hot because of the size of the Web page. However, it is convenient to use the layer layout locally on the Web page. Let's take a look at the layer layout in HTML.

How to position HTML elements precisely in a Web page, like a layer in the image software Photoshop, allows for precise positioning of each layer. CSS defines a set of positioning (positioning) properties to support the layer layout model.

There are three types of layer models:1, absolute positioning (position:absolute)2, relative positioning (position:relative) 3, fixed positioning (position:fixed)

The float of the box 1. Set float: Float:none left right2. Clear floating: Clear:none left right both.

CSS Layout model