HTML+CSS basics

HTML+CSS Basics

In CSS, tag elements in html are generally divided into three different types: block elements, inline elements (also called inline elements) and inline block elements.

Commonly used block elements are:

,

,

...

,

,

,

, ,

,

,

Commonly used inline elements are:

, ,
, , , , , , , ,

Commonly used inline block elements are:

,

Features of block-level elements:

1. Each block-level element starts from scratch starts on a new line, and the elements after it also start on a new line. (Really overbearing, a block-level element occupies one row)

2. The height, width, line height, and top and bottom margins of the element can be set.

3. When not set, the width of an element is 100% of its parent container (the same as the width of the parent element), unless a width is set.

Characteristics of inline elements:

1. On the same line as other elements;

2. The height, width, and top and bottom margins of the element cannot be set;

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

inline-block element features:

1. It is on the same line as other elements;

2. The height, width, line height, top and bottom margins of the element can be set.

CSS contains 3 basic layout models, summarized in English as: Flow, Layer and Float.
In web pages, there are three layout models for elements:
1. Flow model (Flow)
2. Float model (Float)
3. Layer model (Layer)

Let’s talk about the flow model first. Flow is The default web page layout mode. That is to say, the HTML web elements of the web page in the default state distribute the web page content according to the flow model.

The fluid layout model has two typical characteristics:

First, block elements will be vertically extended and distributed in order from top to bottom within the containing element, because in the default state, block elements The width is all 100%. In fact, block elements all occupy positions in the form of rows.

Second point, under the flow model, inline elements will be displayed horizontally from left to right within the containing element.

The layer layout model is like the very popular layer editing function in the image software PhotoShop. Each layer can be accurately positioned and operated. However, in the field of web design, layer layout has not been popular due to the mobility of web page sizes. . However, there are still conveniences in using layer layout locally on a web page.


How to accurately position html elements in web pages, just like the layers in the image software PhotoShop, each layer can be accurately positioned and operated. CSS defines a set of positioning properties to support the layer layout model.

The layer model has three forms:

1. Absolute positioning (position: absolute)

2. Relative positioning (position: relative)

3. Fixed positioning (position: fixed)

Layer model - absolute positioning:

If you want to set the absolute positioning in the layer model for an element, you need to set position:absolute (indicating absolute positioning). The function of this statement is to drag the element out of the document flow, and then use the left, right, top, and bottom attributes to relative Absolutely position the block to its nearest parent containing block that has a positioning attribute. If no such containing block exists, it is relative to the body element, that is, relative to the browser window.


Layer model - relative positioning:

If you want to set the relative positioning in the layer model for an element, you need to set position: relative (indicating relative positioning), which determines the position of the element in the normal document through the left, right, top, and bottom attributes. Offset position in the stream. The process of relative positioning is to first generate an element in static (float) mode (and the element floats like a layer), and then moves relative to the previous position. The direction and amplitude of the movement are determined by the left, right, top, and bottom attributes. , the position before offset remains unchanged.


Side model - fixed positioning:

fixed: indicates fixed positioning, similar to the absolute positioning type, but its relative movement coordinates are the view (web page window within the screen) itself. Since the view itself is fixed, it will not change as the scroll bar of the browser window scrolls, unless you move the screen position of the browser window on the screen, or change the display size of the browser window, so fixedly positioned elements will always be in A certain position of the view within the browser window that will not be affected by the flow of the document. This has the same function as the background-attachment:fixed; attribute.



There are three ways to center block elements of variable width (these three methods are currently used a lot):

Add the table tag

Set the display: inline method: similar to the first one, set the display type to Inline elements, set attributes of variable-width elements

Set position:relative and left:50%: Use relative positioning to shift the element 50% to the left, that is, to achieve the purpose of centering.

The vertical centering method of a single line of text determined by the height of the parent element is to set the parent element This is achieved by making the element's height and line-height highly consistent. (height: the height of the element, line-height: as the name implies, line height (line spacing) refers to the distance between the baselines between lines in text). In chrome, firefox and IE8 or above browsers, you can set the display of block-level elements to table-cell (set to table cell display) and activate the vertical-align attribute, but note that IE6 and 7 do not support this style. Compatibility comparison Difference.