CSS Basics-box model, floating, positioning

1 CSS Box Model

In the past, programmers used tables to lay out a Web page, that is, to locate the content of a typeset page by nesting tables and tables of varying sizes. Later, after the advent of CSS, in the page layout, in order to be able to make the pages of the various parts of the reasonable organization, the developers summed up a set of complete, effective principles and norms, that is, "box model." It is the use of CSS to define the size of boxes and boxes nested to organize Web pages.

Because in this way, the layout of the page code is simple, easy to update, compatible with more browsers.

All the elements in the page can be thought of as a box, a page consisting of a number of boxes that interact with each other, so mastering the box model needs to be understood in two ways.

1. Understand the internal structure of a single box;

1. Understand the interrelationships between multiple boxes;

1.1 the internal structure of a separate box

a separate box model consisting of four parts :

1. Content

1. padding: Inside margin, also has the data to translate it to fill;

1. border: border;

1. Margin: The margin, there is also data to be translated into Blank or blank edge;

1.1.1 Padding Inner margin

An empty area between the element's border and the element's content

Padding-top on padding-right right padding-bottom down Padding-left left

Note: No negative value, no effect

1.1.2 Margin outer margin

The margin refers to the distance between the box and the container, which is the distance between the element and the element.

Body itself is also a box, in the default case, the body will have a number of pixels of margin, the specific values due to different browsers and different.

margin Margin Properties:

Margin-top on margin-right right margin-bottom down Margin-left left

Simplified settings:

margin:1px 1px 1px 1px Upper right Lower left margin:1px 1px 1px Upper and Lower Ma rgin:1px 1px up or down margin:1px 4 directions

Note: Allow negative values to function in the opposite direction

margin The Center property:

margin:0 Auto;

Allows the block-level element to be centered horizontally.

1.1.3 Border Border

There are 3 main properties for a border:

Border Style (Border-style)

None borderless hidden with none dashed dashed solid solid line dotted point line double double line

Border Width (border-width)

1px, 2px ...

Border Color

Border-top-color Border-right-color Border-bottom-color Border-left-color

Transparent Border

Border-color:transparent

1.1.4 the difference between two kinds of box models

the Standard Box Model

element Space Height = content + padding + border + margin

IE Box Model

element Space Height = content + margin

1.2 the interrelationship between multiple boxes

1.2.1 DOM Tree

An HTML from the surface is a text file, logically, it has an intrinsic hierarchical relationship. A "tree" can represent a structure with hierarchical relationships.

Any HTML document corresponds to a DOM tree, and the body is the root node of all objects. How the node of the DOM tree behaves in the browser is determined by the CSS. That is, HTML controls the structure of Web pages, CSS controls the performance of Web pages.

1.2.2 General Flow Layout

A single box is not difficult to understand, in fact, the Web page is often very complex, a Web page may exist a large number of boxes, and they have a variety of relationships between each other.

In order to adapt to various typesetting requirements, the idea of CSS specification is: First determine a standard typesetting mode, this is the "regular flow."

element according to its The first place in the HTML layout, in this process, the inline elements are arranged horizontally until the line is filled and then wrapped, block-level elements will be rendered as a complete new row, unless otherwise specified, all the elements by default are normal flow positioning, it can be said, The position of an element in a normal stream is determined by the position of the element in the HTML document.

The document flows by dividing the form from top to bottom into rows and emitting elements from left to right in each row .

1.2.3 Floating

Floating properties:

Float:left,right,none,inherit (inherits the value of the floating property from the parent element)

1. The floating box can be moved left or right until its outer edge touches the border of the containing box or another floating box

1. Because the float box is not in the normal flow of the document, the Block box in the normal flow of the document behaves as if the floating box does not exist

1. Floating is leaving the box out of the document flow and moving in the direction you want

Characteristics of float:

1. The collapse of the height of the parent element, and when the parent element collapses, the subsequent elements will automatically top up, but the text will not. The text will automatically wrap around for four weeks.

1. and the position influence on the sibling elements;

1.2.4 Clear Floating

1. Overflow:hidden;

1. Clear floating Clear Property (Both,left,right,none)

3.. mian:after{

Content: "";

Display:block;

Clear:both;

}

1.2.5 Position positioning

Position This property determines how the element will be positioned. It has the following five kinds of values:

Position

Property value

Static

Relative

Absolute

Positioning method

The default value of the position. The element will be positioned to its normal position, which is actually equivalent to no positioning. Element occupies a position on the page. You cannot move an element position with the top right bottom left property.

Relative positioning. Positioned relative to the initial position of the element. After the element is moved, the initial position is retained and the page occupies position. While moving the position, the element is detached from the document stream and does not occupy the page space. You can use the top right bottom left property to move the element position.

Absolute positioning. Positioned relative to its own nearest ancestor element with a positional property that does not contain the default anchor static property. The element is detached from the document stream and does not occupy page space. You can use the top right bottom left property to move the element position.

Fixed positioning. Positioned relative to the browser window. The remaining features, like Absolute, are equivalent to a special absolute.

Inherit		Inherited. Inherits the value of the Position property from the parent element.

when an element's position Property value is Absolute or fixed , there are three things that happen:

1. The current element is detached from the document flow and no longer occupies space in the document flow;

1. The current element, if it is an inline element, becomes a block-level element, which is equivalent to setting the Display:block property for the element ;

1. If the element is a block-level element, the width of the element is from the original 100% (which occupies a whole row) and becomes auto.

Z-index stack of elements:

1. After placing one element on another, the default is 0, you can set positive and negative numbers, positive numbers are above the element, negative numbers are after the element (bottom)

2.z-index only works on positioned elements (e.g. position:absolute;)

Image Replacement Technology

Whether for the browser or search engine, the text is the best way to display the content of the page, but because of the limitations of the font and other reasons, the display of plain text is gradually unable to meet the requirements of the designer of beauty.

As a result, the use of CSS to achieve the replacement of text with the method, this method can not only achieve a variety of rich results on the page, but also to meet the needs of search engine optimization.

Principle:

the principle of image substitution technology is to use text in the HTML tag, and then cover the text with the corresponding image.

Significance:

Easy to do site optimization (SEO), text is the search engine to find the main object.

1.2.5 Display Properties

Change the properties of a box

None display (no placeholder, completely disappear) inline element block level element

Inline-block Inline block elements

1.2.6 Visibility Properties

Sets whether an element is visible

Visible default value. Element visible hidden element not visible (placeholder)

CSS Basics-box model, floating, positioning