Css_ Add CSS File method, box model and positioning

Learn to organize notes, not original.

Ways to add CSS

1. Linking external style sheets

<link Rel=stylesheet type=text/css href=style.css>

REL indicates the use of an external style sheet in the page. Type refers to the style sheet file, href refers to the location of the file.

1. Internal style sheet

<style type= "Text/css" >

<!-

Define Style

-

</style>

1. Import an external style sheet

<style type= "Text/css" >

<!-

@import style.css

Define other style

-

</style>

The path to an external style sheet when used is similar to the method of linking an external style sheet, but importing an external style sheet is a more advantageous approach. Essentially it is equivalent to being in an internal style sheet.

1. inline style

<table style=color:red;margin-right:220px>

The difference between link and import

In fact, the most fundamental difference between link and @import is that link is a tag of HTML, and @import is a tag of CSS,
Besides calling CSS, link can have other functions such as declaring page link properties, declaring directories, RSS, and so on, while @import can only
Call CSS.

When a page is loaded (when viewed by the browser), the CSS referenced by the link is loaded at the same time, and the CSS referenced by @import waits until the page has been downloaded and loaded.

One of the most important reasons for using link is that you can let users switch CSS styles. Modern browsers such as Firefox,opera,safari support rel= "Alternate stylesheet" attribute (you can choose the spirit of disagreement on the browser), Of course you can also use JavaScript to make IE also support users change style.

@import's small weaknesses

If your Web page Head tag is very simple, only the @import attribute, when the user browsing speed is slow, he will see a non-manly style of the page, and then the CSS file is downloaded to complete before you can see the proper spirit. To avoid such problems, You need to make sure that there is at least one script or link tag in the head.

04-11 Update: @import will make the CSS overall loading time longer. And in IE, the file download order is changed, for example, the script file placed behind @import will be downloaded before the CSS.

Box model

A separate box model consists of content (contents), padding (padding), Border (border), and margin (margin) 4 parts.

The content is the center of the box model, which presents the main information content of the box. Content is an essential part of the box model, and the other three parts are optional. The content area has three properties, width,height and overflow.

The padding is the space between the content area and the border. Can be considered as the background area of the content area. The padding has 5 properties, Padding-top,padding-bottom,padding-left,padding-right, and a fast padding attribute padding that combines the above four directions.

The properties of the border are border-style,border-bottom,border-width,border-color and combine the border properties of the above three properties.

The margin is the outermost of the box, which is not an edge but a space that is added outside the bounding rectangle. There are five properties for margin, margin-top,margin-bottom,margin-left,margin-right and combining margin of the above four properties.

Margin attribute margins can be set from 1 to 4 values, and if you set only 1, apply to all 4 boundaries. If you set 2 or 3 values, the omitted values are equal to the pair of edges. If you set 4 values, they correspond to their margins in the order of the upper and lower left and right.

Positioning properties

1. Positioning mode Position

Static,absolute,fixed,relative

Static: Default value

Absolute: absolute positioning. You need to use Left/right/top/bottom at the same time.

Absolute positioning is relative to the nearest positioned ancestor element, if there is no positioned ancestor element, then relative to the original containing block.

Fixed: stationary positioning. Indicates that the element does not scroll when the page scrolls.

The element box behaves like the position is set to absolute, but its containing block is the window itself.

Relative: relative positioning. Indicates that the object cannot be stacked with relative positioning. Relative positioning is relative to the initial position of the element in the document, which is the original position + offset of the element before it is positioned.

1. Stacking order

z-index:auto/Digital

Auto, it means to follow the orientation of its parent object.

The number representation layer. The large cover of the number is small.

1. Floating

The floating box can be moved left or right until its outer edge touches the border of the containing box or another floating box. 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.

Float can set the text around an element and can be applied to all elements.

Float:none|left|right

Left indicates that the text floats on the right side of the element, which indicates that the text floats over the element.

1. Clear

Clear:none|left|right|both

None means that both sides can have floating objects, which are the default values

Left: Indicates that floating objects are not allowed

Right: Indicates that floating objects are not allowed

Both: Indicates that floating objects are not allowed

To clear floating methods:

• Add an empty element below, and define the clear property.
• The bounding element (parent element) defines the clear property.

1. Overflow handling Overflow

Visible|auto|hidden|scroll

Visible: Default value. The size and contents of the presentation layer are automatically displayed.

Auto: Indicates that scroll bars are displayed only when the content is outside the bounds of the layer.

Hidden: Indicates that content beyond the layer's scope is hidden.

Scrool: Indicates that scroll bars are always displayed.