preface

The book is not back to see my written hand to hand teach you series of BASIC HTML hurry to have a look!! If we compare a web page to a person, then HTML is the skeleton of a person, and our CSS is the clothes of a person. Yes, CSS is designed to give web pages all sorts of beautiful styles, such as font color, size, background color and so on.Copy the code

The body of the

Block level elements

Common block elements include < H1 >~<h6>, < P >, <div>, <ul>, < OL >, <li>, etc., among which the <div> tag is the most typical block element.Copy the code
  • Characteristics of block-level elements

(1) More domineering, their own line

(2) Height, width, margins and margins can be controlled.

(3) The width defaults to 100% of the container’s parent width

(4) is a container and box that can release internal or block-level elements.

  • Note:
    • Only text can make a paragraph so you can’t put block elements in p, especially div
    • The same goes for the h1, H2, H3, H4, H5, H6, DT tags, which are literal block-level tags and cannot contain other block-level elements.

Inline elements

Common inline elements include < A >, <strong>, <b>, <em>, < I >, <del>, < S >, <ins>, <u>, < SPAN >, among which the < SPAN > tag is the most typical inline element. Some places are also inline elementsCopy the code
  • Characteristics of inline elements:

(1) The elements in adjacent rows are on one line, and multiple elements can be displayed in one line.

(2) The direct setting of height and width is invalid.

(3) The default width is the width of its own content.

(4) Inline elements can only contain text or other inline elements.

Note:Copy the code
  • You can’t put a link inside a link.
  • Special case A can have block-level elements, but it is safest to switch block-level mode for A.

Inline block elements

There are several special tags within inline elements -- <img />, <input />, < TD > -- on which you can set width, height, and alignment attributes. Some sources might call them inline block elements.Copy the code

Characteristics of inline block elements:

(1) and adjacent inline elements (inline blocks) are on a line, but there are gaps between them. More than one line can be displayed

(2) The default width is the width of its own content.

(3) Height, line height, margins and margins can be controlled.

Individual mode transitions

  • Block inline: display:inline;
  • Inline block: display:block;
  • Display: inline-block; display: inline-block;

Various selectors

  • Label selector

    h1 { color:red }

  • Class selectors

    .div1 { color:red; }

  • The id selector

    #div1 { color:red; }

  • Wildcard selector

    • { margin:0; padding:0;

    }

Selector priority

Weight stack

We often use intersection selectors, descendant selectors, etc., which are made up of multiple base selectors, and then the weight overlay occurs.

It’s just a simple addition

  • Div ul li ——> 0,0,0,3

  • Nav ul li ——> 0,0,1,2

  • A: hover — — — — — – > 0,0,1,1

  • The nav a — — — — — – > 0,0,1,1

    Note:

  1. There is no base between digits such as: 0,0,0,5 + 0,0,0,5 =0,0,0,10 instead of 0,0,1,0, so there is no case where 10 divs can catch up with a class selector.

3). The weight of inheritance is 0

It’s not hard, but it’s very confusing to ignore. In fact, we modify the style to see if the tag is selected.

1) If selected, use the formula above to calculate the weight. Who listens to who. 2) If not checked, then the weight is 0, because the inherited weight is 0.

Pseudo class selector

  • A :link /* Unaccessed link */
  • A: This is the first time that we have visited China
  • A :hover /* Mouse move to link */
  • A :active /* Selected link */

Line height

  • Text is centered vertically if the line height is equal
  • If the line height is greater than the height, the text will drift downward
  • If the line height is less than the height, the text will be slanted

background

The box model

The width of a box equals its width +padding+border.

The box is centered horizontally and the content is centered horizontally

text-align: center; /* margin: 10px auto; /* Block level box horizontal center left and right margin changed to auto wide, upper and lower margin can be */Copy the code

floating

div {
	float:left
}
Copy the code

Remove the floating

Clearing float is to solve when it is not convenient to give the parent box height. The child box floats causing the parent box to be zero in height, affecting the underlying block element.

.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {*zoom: 1; } <div class="clearfix"> <div></div> </div>Copy the code

positioning

Position the box somewhere

Selector {position: property value; }Copy the code

Relative positioning

Relative positioning is the position of an element relative to its original position in the standard flow. (Narcissistic)

Relative positioning features :(be sure to remember)

  • Moving relative to one’s original position in the standard flow
  • The original area of the standard stream continues to be occupied, and the box behind it still treats it like the standard stream.

Absolute positioning

Absolute positioning is when an element moves its position with a parent element with positioning.

  1. Completely off scale – completely out of position;
  2. If the parent element is not positioned, the browser is positioned (the Document Document).

Features of absolute positioning :(be sure to remember)

  • The location is definitely moved by the parent element with location (spelling). If neither parent has location, the browser document is used to move the location
  • Does not retain the original position, is completely off the mark.

Because the absolute positioning of the box is to fight the father, so it should be used together with the parent.

Positioning formula — the child must father phase

Just now we said that absolute positioning is used with the parent with positioning, so what positioning does the parent use?

Child absolute parent phase – the child is absolute positioning, the parent should use relative positioning.

The child must father phase is the use of absolute positioning formula, to firmly remember!

Fixed position

Fixed position is a special form of absolute position: if absolute position is a rectangle then fixed position is similar to a square

  1. Completely off scale – completely out of position;
  2. View only the browser’s viewable window – the browser viewable window + the edge offset property to set the element’s position;
    • It has nothing to do with the parent element; single-use
    • Does not scroll with the scroll bar.

Position changes the display property

As we said earlier, display is the display mode, and you can change the display mode in the following ways:

  • Inline-block can be converted to an inline block
  • You can convert a float to an inline block by default (similar, but not exactly the same, because floats are de-indexed)
  • Absolute and fixed positions are similar to floats in that the properties of the default transform are converted to inline blocks.

So, a box in a row, if you add float, fixed position and absolute position, the box can be directly set width and height, etc., without conversion.

Stack sequence (Z-index)

When using a positioning layout, it is possible to have overlapping boxes.

If the box is positioned, the latecomer will overtake the box in front by default.

The z-Index hierarchy property can be used to adjust the stacking order of boxes.

The z-index has the following features:

  1. Property value: positive integer, negative integer, or 0. The default value is 0. The higher the value, the closer the box is.
  2. If the attribute values are the same, they are written in the order of precedence.
  3. You can’t add units after numbers.

Note: Z-index can only be applied to relatively-positioned, absolutely positioned, and fixed-positioned elements. Other standard stream, float, and static positions are not valid.

Mouse style CURSOR

Outline the outline

Is a line drawn around an element, around the edge of the border, to highlight the element.

 outline : outline-color ||outline-style || outline-width 
Copy the code

But we don’t care how many can be set, we usually remove. li

The most direct way to write this is: 0; Or the outline: none;

<input type="text" style="outline: 0;" />Copy the code

Prevents dragging and dropping text field resize

<textarea style="resize: none;" ></textarea>Copy the code

Vertical-align Indicates the vertical alignment

Vertical-align does not affect content alignment within block-level elements, it only applies to inline elements or inline blocks,

Inline block elements, in particular, are often used to control the alignment of images/forms with text.

Remove gaps at the bottom of the image

  • To img vertical – align: middle | top | bottom, and so on. Keep the image out of line with the baseline.
  • Add display: block to img; Converting to block-level elements is no problem.

Overflow text ellipsis display

/*1. Force a line to display text */ white-space: nowrap; /* overflow: hidden; /* overflow: ellipsis; /* overflow: ellipsis;Copy the code

Center positioning level

div {
	width:100px;
	height:100px;
	position:absolute;
	left:50%;
	margin-left:-50px;
}
Copy the code

triangle

div { width: 0; height: 0; The line - height: 0; font-size: 0; border-top: 10px solid red; border-right: 10px solid green; border-bottom: 10px solid blue; border-left: 10px solid #000; }Copy the code
  1. We use CSS borders to simulate triangles
  2. Width height is 0
  3. We need to write all 4 borders, only keep the required border color, the rest can not be omitted, just change to transparent
  4. Font-size: 0; line-height: 0;

conclusion

Finished, because CSS to talk about a lot of things, here is divided into two parts, the next chapter will introduce the hand to hand to teach you series of CSS foundation – please look forward to!!