[Dry goods] Html and CSS getting started study notes 9-11, study notes 9-11

[Dry goods] Html and CSS getting started study notes 9-11, study notes 9-11

9. close contact between box models and elements

1. Box Model

Css treats each element as a box, including the following attributes:

Content area: contains content. The content can be determined by size or width and height. The width attribute of the element specifies the content area width. You can specify the content area width by pixel or by the size of the percentage relative to the container where the element is located, such as the body div.

Padding: Transparent area outside the content area. It can be seen as a part of the element. Setting the background for the element will extend to the padding.

Border: border around the padding.

Margin: a transparent area outside the border that provides an interval between elements and elements. The element background does not extend to the margin. The left and right outer margins of an element (Inline, like) are added, and the upper and lower margins of an element (Block Element) are folded, so are the largest and nested margins. In addition, the margin of the floating element and the margin in the normal stream are not folded.

2. Others

Background image attributes background-image: url (images/background.gif)

Background Image position background-position: top left can be specified by pixel, percentage, and keyword. This is the meaning of the upper left corner.

Background Image duplication background-repeat: repeat already exists in the horizontal and vertical directions. Default Value. No-repeat is not repeated and is only displayed once. Repeat-x repeats horizontally. Repeat-y repeats in the vertical direction. Inherit inherits the parent element settings.

In addition to border-syle border-width border-color, the border can also be rounded, border-radius: 15px; or 3em; you can use pixels or proportions (relative to the element font size) to specify the radius of the rounded corner. You can also specify one side of the rounded corner, border-top-left-radius: 3em; upper left corner.

Id attribute: Add <p id = "footer"> </p> to html and set the style in css. # footer {color: red ;} or p # footer {color: red;} (the class uses ". ")

Multiple style sheets: add multiple links, with the lowest priority.

Style Sheet for media type: the browser determines the rules used by the media type, and ignores them if they do not match.

Add a media attribute to link, <link rel = "stylesheet" href = "loung-mobile.css" media = "screen and (max-device-width: 480px)">, the screen width cannot exceed PX.

You can also specify the @ media screen and (max-device-width: 480px) {} directly in css and add the rules for this media in this braces.

 

10. div and span advanced web construction

Div divides the logical zone and puts a bunch of related block elements together.

Descendant selector: # elixirs h2 Selects all H2. no matter whether it is directly descendant or subordinate, it will automatically select all layers regardless of the number of layers.

The attribute assignment can be abbreviated as font: normal/1.2em bold san-serif. The font size and line spacing are separated by spaces. The order does not matter.

Span divides the logical zone and puts a pile of related inline content together. <Span class = "cd"> </span>

1. pseudo

A pseudo-class is directly followed by ":". For example, a: hover can be directly used in css instead of being defined as a class in html, because it is pre-set by the browser.

The general sequence of a is: a: link {} unaccessed link.

A: visited {} accessed Link

A: hover {} status when hovering over

There are other pseudo classes, such as first-child corresponding to the first child element, last-child's last child element, even (2n) nth even child element, odd (2n + 1) the Nth child element.

 

11. layout and positioning of placement Elements

The browser starts from the top of the html file, from top to bottom, from left to right, and displays the elements one by one. Each block element has a line feed, which is the flow. Therefore, the block element is from top to bottom, and the inline element is from top left to bottom right.

1. Floating float

Set the float attribute for the element (the width of the element must be set first). the browser will delete the element from the stream, and other elements will be placed according to the stream as elements without this floating, however, the inline element of the block element follows the floating element.

If you set the clear attribute for an element, such as clear: right, the floating element cannot appear on the right of the element. If yes, move down until no floating element exists on the right.

2. Three la s

The Fluid layout liquid layout is a design that uses the stream and the width is not fixed. In this way, when the browser adjusts the width, the elements will expand and fill the browser.

Freeze the layout frozen layout and set the width of the entire content area div. When the browser adjusts the width, the content area will not change, but the white space on the right will increase.

Gel layout jello layout, set the width for the entire content area big div, and set margin-left, margin-right: auto; in this way, when the browser expands, the content area will remain the same size, but always center.

3. Four positioning positions

Property position: static; static positioning, which is the default method (when not set), that is, to place elements in a normal stream.

Position: absolute; absolute position, which is fixed relative to the page or the nearest parent element. The position is determined based on other left top attributes (pixels or percentages can be used. Deleted from the stream. Neither the block element nor the inline element knows the existence of the element, nor the inline element is placed around it.

Position: relative; relative positioning, placed in the stream, is the offset relative to the original position of the element in the stream, left top.

Position: fixed; fixed positioning. It is fixed relative to the browser window and is not in the stream. It has no effect on block and inline elements.

You can set the z-index attribute for absolute, relative, and fixed positioning elements. The larger the value is, the closer it is to you, and the higher it is to the upper layer.

4. Use table layout

Table cells contain block elements.

Set the div attribute of the outer box to display: table;

The row div property is set to display: table-row;

Set the cell div in the row to display: table-cell;

You can set border-spacing: 10px In the div attribute of the outer box. If you increase the border spacing by 10 pixels for each cell, you do not need to set the margin outer margin for the cell div. In addition, the border spacing will be added to the outer margin of the element outside the table, and will not be folded.

Set the vertical-align: top attribute in the cell div to ensure that the content of the cell is aligned with the content above.