CSS layout, css layout tutorial

CSS layout, css layout tutorial

Before explaining CSS layout, we need to know some knowledge in advance. In CSS, tag elements in html are generally divided into three different types:

Block Elements,Inline element (also called intra-Row Element)AndInline Block Element.

Common block elements include:

<Div>, <p>,

Common inline elements include:

<A>, <span>, <br>, <I>, <em>, <strong>, <label>, <q>, <var>, <cite>, <code>

CommonInline Block ElementInclude:

, <input>

Element classification-block-level elements

What is a block-level element? In html, <div>, <p>, display:blockDisplays the element as a block-level element. The following codeInline elementConvertBlock ElementsSo that element a hasBlock ElementsFeatures.

a{display:block;}

Block-level element features:

1. Each block-level element starts from a new row, and the subsequent element also starts from another row. (A block-level element excludes one row)

2. You can set the height, width, row height, and top and bottom margins of an element.

3. If the element width is not set, it is 100% of its parent container (consistent with the width of the parent element) unless a width is set.

Element classification-inline Element

In html, <span>, <a>, <label>, <strong>, and <em> are typicalInline Element(Line Element) (Inline) element. Of courseBlock ElementsYou can also use the codedisplay:inlineSet the elementInline Element. The following codeBlock Element divConvertInline ElementSo that the div element hasInline ElementFeatures.

Div {display: inline;} ...... <div> I want to become an inline element </div>

Inline element features:

1. and other elements are on one row;

2. The height, width, and top and bottom margin of the element.Not AllowedSettings;

3. The width of an element is the width of the text or image it contains and cannot be changed.

Element classification-inline block elements

Inline block elements (Inline-block)Is to have the characteristics of inline elements, block elements at the same time, codedisplay:inline-blockSet the element to an inline block element. (Added in css2.1). The and <input> labels are inline block labels.

Features of inline-block elements:

1. and other elements are on one row;

2. You can set the height, width, row height, and top and bottom margins of an element.

Box Model

 

Css layout model

After understanding the basic concepts and types of the CSS box model, we can thoroughly explore the basic model of web page layout. Like the box model, the layout model is the most basic and core concept of CSS. However, the layout model is based on the box model, which is different from the CSS layout style or CSS layout template that we often call. If the layout model is local, the CSS layout template is the end and an external representation.
CSS contains three basic layout models: Flow, Layer, and Float.
On a webpage, there are three layout models for elements:
1. Flow Model)
2. Float Model)
3. Layer Model)

 

Flow Model

Let's talk about it first.Flow ModelFlow is the default webpage Layout mode. That is to say, by default, the HTML web page elements of a webpage are distributed based on the flow model.

The flow layout model has two typical features:

First,Block ElementsWill be inIncluded ElementVertical vertical distribution from top to bottom, because by default, the width of block elements is100%. In fact, block elements occupy positions in the form of rows. For example, the width of the three block element labels (div, h1, p) in the code editor on the right is 100%.

 

Second, under the flow model,Inline ElementIt is displayed in the left-to-right horizontal distribution of contained elements. (An inline element is not as overbearing as a block element)

 

Inline element labels a, span, em, and strong in the code editor on the right are all inline elements.

Floating Model

A block element is an exclusive line. What if we want two block elements to be displayed side by side? Don't worry, set the element floating to achieve this desire.

By default, no element can be floating, but can be defined as floating by CSS, such as div, p, table, img and other elements can be defined as floating. The following code displays two div elements in one row.

div{    width:200px;    height:200px;    border:2px red solid;    float:left;}<div id="div1"></div><div id="div2"></div>

 

Layer Model-absolute positioning

If you want to set absolute positioning in the layer model for the element, you need to setPosition: absolute(Absolute positioning), the role of this statement will drag elements out of the Document Stream, then, use the left, right, top, and bottom attributes to locate the parent inclusion block with the positioning attribute closest to it. If such a block does not existBrowser window.

The following code moves the div element Px to the right of the browser window and 50 PX down.

div{    width:200px;    height:200px;    border:2px red solid;    position:absolute;    left:100px;    top:50px;}<div id="div1"></div>

Layer Model-relative positioning

If you want to set relative positioning in the layer model for the element, you need to set position: relative (indicating relative positioning), which determines the element inNormal document flow. The relative positioning process is to generate an element (and the element floats like a layer) in the static (float) mode, and thenPreviously moved,The direction and amplitude of the movement are determined by the left, right, top, and bottom attributes, and the positions before the offset remain unchanged.

The following code moves 50px down from the previous position and 100px to the right;

 

#div1{    width:200px;    height:200px;    border:2px red solid;    position:relative;    left:100px;    top:50px;}<div id="div1"></div>

Layer Model-fixed Positioning

Fixed: fixed positioning, similar to the absolute positioning type, but its relative moving coordinates are views (Webpage window in the screen. Because the view itself is fixed, it does not change with the scroll bar of the browser window, unless you move the position of the browser window on the screen, or change the display size of the browser window, therefore, fixed positioning elements are always located at a certain position in the browser window and are not affected by the flow of documents. This is the same as the background-attachment: fixed attributes attribute. The following code comparesBrowser ViewMove 100px to the right and 50px down. The position remains unchanged when you drag the scroll bar.

# Div1 {width: 200px; height: 200px; border: 2px red solid; position: fixed; left: 100px; top: 50px ;} <p> text. </P>

Implicitly changing the display type

One interesting phenomenon is that when one of the following two sentences is set for an element (no matter what type element is previously, except display: none:

1. position: absolute

2. float: left or float: right

Simply put, as long as one of the preceding two sentences appears in the html code, the display type of the element will automatically change to display in the form of display: inline-block (block element, of course, you can set the width and height of the element, and the default width does not fill the parent element.

As you can see in the following code, label a is a row element, so setting its width is ineffective, but after setting it to position: absolute, you can.

<Div class = "container"> <a href = "#" title = ""> click here to enter the course </a> </div> css Code <style>. container a {position: absolute; width: 200px; background: # ccc ;}</style>