Write front-end code fixed format

<! DOCTYPEhtml>
<html>
  <head>
    <title> </title>
  </head>

  <body></body>
</html>
Copy the code

<! DOCTYPE> declaration is not an HTML tag; It is an instruction to the Web browser about which HTML version of the page to write. Browsers render web pages in “quirk mode” if they don’t write

  • This declaration has no closing tag and is case insensitive
  • In HTML5, the declaration of a pair is only

SGML,XMLHTML relationship

  • SGML:Standard Generalized Markup Language;
  • XML:Extensible Markup Language;
  • HTML:HyperText Markup Language

SGML is the highest level standard for hypertext formatting in common use today, and it is a meta-language that can define markup languages, even in general ways that do not require < >.

XML is used to transmit and carry data, not to represent or display data. HTML is used to represent data. XML was simplified and modified from SGML.

That said,SGML is the parent of XML and HTML. SGML provides a way to define a markup language, telling its children what they can and can’t do, what elements they must include, such as tags, and the basic structure of the language.

HTML is the Youngest son of SGML, the markup language for creating the form and look of a page, and additional functionality can be added through javascript

So using SGML, you created the HTML reference and must-follow DTD (Document Type Definition), and you’ll often find the “DOCTYPE” attribute in the header of an HTML page that defines the target DTD for parsing

And XML is SGML’s Eldest Child, which has different functions than HTML,XML has permissions that HTML doesn’t,XML can define its own application, etc

(the author: magical young link: www.jianshu.com/p/f4a8bf70a… Source: Jane Book)

Why are HTML5 document headers so concise?

Html5 is not based on SGML, so there is no need to reference DTDS, but docTypes are needed to regulate browser behavior (to make browsers behave the way they should)

HTML4.01 is based on SGML, so you need to reference a DTD to tell the browser what type of document the document is using.

Ps :SGML is the standard generic markup language, which is simply an older standard than HTML and XML, both of which were developed from SGML. BUT HTML5 is not.

html

  • The HTML element tells the browser that it is an HTML document
  • The HTML element is the root element of the document

HTML comments and JavaScript comments

  • HTML comments: <! — Comment content –>

  • JavaScript comments: // The following content will be commented out,

    /* Comment the content */

title

  • The contents of the title element are displayed in the browser’s title bar
  • The tag is the only thing required in the tag.

Relative path and absolute path

Relative paths

  • ./ : represents the directory where the file is currently located.

  • . / : indicates the parent directory of the file

  • . /.. / : indicates the parent directory of the file’s parent directory

  • / : represents the root directory of the file, which can be understood as the absolute path inside the project

An absolute path

The absolute path refers to the complete url. Assume that the domain name of the project in Figure 1 is www.test.com, then the absolute path of 000. CSS should be www.test.com/HelloHBuild…

Learn the differences between the I, EM, B, and strong elements from the HTML5 specification

  • The I: I element represents a piece of text that has a different voice or mood in ordinary text, indicating to some extent a piece of text with different characteristics, such as a taxonomic name, a technical term, a foreign idiom, a transliteration, an idea, or the name of a ship in western text.
  • Em: The em element represents an emphasis on its content.
  • B: B is used to convey meaning traditionally expressed in bold: such as a key word in a text summary, the name of a product under review, an executable statement in text-driven software, or the lead to an article.
  • Strong: The strong element represents the strong importance, severity, or urgency of the content, more so than em.

Difference between <b> and <strong>

B belongs to the physical tag (entity tag), which is only a visual effect that tells the browser what format to display text in. Strong is a logical tag that emphasizes the importance of the text in the browser

The difference between < I > and <em> : Similar to B and strong, I is a physical element, em is a logical element, I just makes the browser look italic, and em emphasizes the browser that the text has some importance. The use of <b> and < I > is discouraged in the current system, as they are only in bold and italic and do not have any semantic meaning. Also, <strong> and <em> are more important to search engines than <b>< I >, so both are often replaced by <strong><em>. <strong> is a little more emphatic than <em>.

CSS

Style format writing

Label selector:

.p {
  color: red;
}
Copy the code

At this point, all p text in the document is red;

Class selector: A class selector is defined with a., followed by a custom class name

.my-class {
  color: red;
  background-color: pink;
}
Copy the code

The content inside curly braces is the style declaration, and there is space between the selector and curly braces, and space between the property and the value of the property. To ensure code specification, class selectors are called class selectors, and label selectors are called label selectors.

A tag can specify multiple class names such as:

<div class="div div1">I have two classes!</div>
<div class="div div2">I also have two classes oh!</div>
Copy the code

We usually put the common attributes of the tags in the same class, and put the different attributes in their own classes, so as to avoid code redundancy and easy to modify the code.

When the same attribute exists in both the shared class and in its own class and the value of the attribute is different, the system will use the CSS code to write the attribute sequentially (when the weight is the same) as the final value. Such as:

.pink-div {
  width: 120px;
  background-color: pink;
}
.deep-pink-div {
  background-color: deeppink;
}
.box {
  width: 100px;
  height: 100px;
}
Copy the code
<div class="box pinkDiv">123</div>
<div class="box deepPinkDiv">123</div>
<div class="pinkDiv box">123</div>
Copy the code

Pink-div and box declare different widths, but the browser page shows the first and third div to be 100px wide, because box comes after pink-div in the CSS code.

Id selector: Style defined with #, structure ID called, can only be called once

Wildcard selector, style defined with *

* {
  color: red;
}
Copy the code

Here all labels agree to modify the style. Used to:

* {
  margin: 0;
  padding: 0;
}
Copy the code

font-family

Font-family Defines a font family that can be composed of multiple attribute values, with descending precedence from left to right. If an attribute value consists of two or more words, the attribute value is enclosed in single quotation marks (‘ Attribute value ‘), separated by commas (,)

.box {
  width: 100px;
  height: 100px;
}
Copy the code

font-size

Font size Specifies the font size. Different browsers have different default values for fonts, so it is best to customize the font size for web pages.

font-weight

Font-weight Defines the font size. Common attributes include bold, normal, and digits. For example:

h3 {
  font-weight: 400;
  Font weight:normal; Here h3 has been removed from the bold effect and is now normal font size */
}
p {
  font-weight: 700;
  Font weight: bold; * /
}
Copy the code

font-style

Font-size: normal/italic Controls the font tilt or not

Font is the sum of the font properties

Font format:

div {
  font: font-style font-weight font-size/line-height font-family;
  /* Attributes must be separated by Spaces. Size and family must be reserved. */ is not used for other attributes
}
Copy the code

Font color

Color can be defined in three different attribute values:

  • Predefined color values: Red, green, etc
  • Hex: #ff0000, # FFFFFF, etc
  • RGB (0, 255), etc

text-decoration

 .t{
     text-decoration: none; /* Delete the underline */

     text-decoration: underline;/* Add an underscore */

 }
Copy the code

text-indent

Indent the first line of a text paragraph with a custom distance. The units are px and EM. Px is an absolute unit of size, while em is a relative unit, with 1em referring to the current size of one text and 2em referring to two text.

.t {
  text-indent: 2em; /* Indents the distance between the two characters */ for the current text
}
Copy the code

line-hight

Line spacing includes top spacing and text height and bottom spacing. Since the height of the text is fixed, when line-hight changes, the space between the top and bottom changes. Can be used to center text vertically, when the defined line-height is the same as the predetermined height, i.e. line-height=height, height can be omitted, and the text is vertically centered

Three styles of CSS

  1. <p style=”width:200px; >111</p>

  2. Internal Style Sheet (embedded) : Put all styles in the HTML page <style> tag

  3. External stylesheets (linked style) : Write styles to files with a CSS suffix and import them into HTML pages via the <link> tag. Such as:

Emmet grammar

  1. To generate a tag you can just type in the name of the tag and hit TAB like div and then TAB, you can generate
  2. If you want to generate multiple identical tags, add *, such as div*3, to quickly generate three divs
  3. If you have parent-child tags, you can use >, such as ul>li to generate:
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
Copy the code
  1. If you have a sibling tag, you can just use a + like div+p, you can generate it
<div></div>
<p></p>
Copy the code
  1. If you’re generating a class name or an ID name, just write demo or #two TAB
  2. If the generated div class names are sequential, use the increment symbol $
  3. If you want to write inside the generated tag, you can use {}

CSS composite selector

Descendant selector

Syntax: element 1 element 2 {style declaration}, element 2 is a descendant of element 1, as in:

ul li {
  color: pink;
} /* This is the ul li font color changed to pink. * /
.my div a {
  color: green;
} /* The color of a under div with class name my changes to green*/
Copy the code

(Note that offspring can refer to sons. Grandchildren, great grandchildren, etc…)

Child selector (important)

The child selector selects all the children of the nearest level (only its children).

Syntax: Element 1> Element 2{style declaration}

All elements 2 at the nearest level below element 1. Such as:

<div>
  <p>Ha ha ha ha</p>
  <h3>
    <p>Oh roar</p>
  </h3>
</div>
Copy the code
div > p {
  color: blanchedalmond;
}
Copy the code

Only the children of div are selected, and the p of the lower children is not selected

Union selector

Two or more selectors declare styles together

<div class="big">
  <span>Big bear<span>
  <p>Two bears</p>
  <div>
    <span>Baldheaded stronger</span>
  </div>
</div>

<ul class="pig">
  <li>page</li>
  <li>George</li>
  <li>A mother pig</li>
</ul>
Copy the code
.pig li..big p..big span {
  background-color: pink;
}
Copy the code

Effect: Li under PIG, Xiong Da and Xiong 2 under Big change their background color to pink

Note:

  • Union selectors are usually written vertically, separated by commas. The last selector does not need to be followed by a comma

Pseudo class selector

Pseudo-class selectors are used to add special effects to certain selectors. The best feature of pseudo-class selectors is the colon: symbol, such as a: hover, which is a link pseudo-class selector.

Link pseudo-class selectors

  • A :link /* Select all unaccessed links */
  • A: Visited /* Select all the links that have been visited */
  • A :hover /* Select the link over which the mouse pointer is located */
  • A: Active /* Select the active link (mouse down does not pop up) */

The order cannot be changed, i.e., the order of LVAH, otherwise it may not work

In actual development, it is often used directly:

a {
  color: grey;
  text-decoration: none;
}
a:hover {
  color: aquamarine;
  text-decoration: underline;
}
Copy the code

:focus pseudo-class selector

The :focus pseudo-class selector is used to select the focus of the form element, which is the cursor. The focus is usually obtained by <input> form elements, so this selector is also used for form elements. Ex. :

input:focus {
  background-color: yellow;
  outline: none; /* Remove the input border */
}
Copy the code

When input gets focus, that is, when the mouse clicks on the input, the background color turns yellow.

CSS element display mode

HTML elements are typically divided into block elements (div, P, li…). And inline elements (e.g. Span, a).

Block elements:

  • Block elements have a single row
  • You can customize width, height, inner margin (default is 100% of parent if width is not defined)
  • It can pass internal or block-level elements
  • You can’t use block-level elements inside literal elements. For example, p tags can’t nest block-level elements, or you’ll get an error

Inline elements:

  • A line can display multiple inline elements
  • You cannot customize the width and height; the default width is the width of its content
  • Inline elements can only hold text or other inline elements
  • In special cases links can be converted to block-level mode

Inline block elements: Within inline elements there are several special tags — <img/>, <input/>, and < TD >, which have the characteristics of both block and inline elements

  • There is spacing between adjacent inline block elements on the same line.
  • The default width is the width of its own content
  • Customize height, width and inside margin

display

Properties: block, inline, inline-block.

  • The block attribute converts inline elements to block-level elements, such as
a {
  display: block;
}
Copy the code

Now you can set the width and height for the A tag.

  • The inline attribute converts a block-level element to an inline element, as in:
div {
  display: inline;
}
Copy the code

Div can be displayed on the same line, but you cannot set width and height for div.

  • inline-block
span {
  display: inline-block;
}
Copy the code

You can display it on the same line, and you can set its width and height. Note, however, that elements set to inline-block are allocated according to the document flow, so margin: 0 auto does not apply to them. And there is some space between the elements.

The CSS background

The background color

Background-color: specifies the color. The default value is transparent.

The background image

The background-image attribute describes the background image of an element. In practical development, it is often used for logo or some decorative small images or oversized background images. The advantage is that it is very easy to control the position. Background – image: none | url;

Background tile

Tiling means that when the background image is smaller than the size of the label, the background image is repeated to cover the entire label. Background-repeat, which defines whether the background is tiled. The attributes include repeat (tiled), no-repeat (not tiled), repeat-x (tiled along the X-axis), and repeat-y (tiled along the Y-axis).

Background position

Use the background-position property to change the position of an image in the background. Background – position: x y;

  1. Parameter is azimuth noun
  • Horizontal directions :left, center and right, vertical directions :top, center and bottom.
  • When there is only one property value, the browser defaults to the second value to Center. ;

When we want to use a large image (larger than the screen size) as the background, and want the most central content of the image to be accurately displayed in the center of the page, we often use background-position: center;

  1. Background-position: 20px 50px; background-position: 20px;
  • When the parameter time is in exact units, the first one must be the x coordinate and the second one must be the y coordinate
  • If only one value is specified, that value must be the x coordinate, and the other is vertically centered by default.
  1. Parameters can also be mixed units (exact value and azimuth noun)

CSS background image fixed

background-attachment: fixed || scrool;

  • Fixed: The background image is displayed on our screen
  • Scrool: The background image moves away from the view area as the object content scrolls

Background composition

Background: Color Background image address Background tiled background image Scroll position of the background image

Order substitutable

Background color translucency

Background: RGBA (0,0,0,.3), the last parameter is alpha transparency, the value is between 0 and 1,0 is 100% transparent.

Three features of CSS

Cascading sex

When there are attribute conflicts, such as:

div {
  color: red;
  width: 100px;
}
div {
  color: pink;
}
Copy the code

Color: pink overwrites the top color: red, but width is still 100px;

inheritance

The child tag inherits some of the styles of the parent tag, such as the color and size of the text directly related to the text (text-, font-, line-), as well as the color attribute, such as:

<div>
  <p>123</p>
</div>
Copy the code

When we define literal attributes such as color for div, the color attribute of the P tag under that tag inherits those attributes.

CSS priority

  • If the selectors are the same, perform cascading (next up)
  • Selectors are different, depending on the weight of the selectors:
The selector Selector weight
Inheritance or wildcard selector (*) 0，0，0，0
Label selector 0，0，0，1
Class selector, pseudo class selector 0，0，1，0
The ID selector 0，1，0，0
Inline style=”” 1，0，0，0
! important Up infinity 
div {
  color: pink ! important; /* it has the highest weight */
}
Copy the code

The more specific the designation, the higher the weight

Inheritance weight is zero!!

.father {
  color: red;
}
p {
  color: pink;
}
Copy the code
<div class="father">
  <p>Ha ha</p>
</div>
Copy the code

In this case, although the class selector has more weight than the label selector, the font color of the P label is pink because the inherited weight is 0.

Stacking of compound selectors

ul li {
  color: green;
}
li {
  color: pink;
}
.nav li {
  color: red;
}
Copy the code

Because the selectors’ weights stack, the first style has two labels, and one label selector has a weight of “0,0,0,1”, so the first style has a weight of “0,0,0,1 + 0,0,0,1”, and the second style has a weight of 1. The weight of the class selector is “0,0,1,0”, so the weight of the third style is “0,0,1,0 + 0,0,0,1”, so the final color of the li font is red.

CSS box model

Border border

The attributes of border are:

  • Boeder-width Indicates the width of the border, usually in px
  • Border-style border style (solid: implement border; Bootstrap: dashed border; Dotted outline…)
  • Border-color Specifies the border color
  • Border: width style color (compound attribute), no order.

Borders can also be written separately: border-top, border-bottom, border-left, border-right

Border collapse: collapse when a border is set in a table and borders overlap between adjacent cells, border collapse can be resolved with border-collapse: collapse

Border affects the size of the box because the pixels of border are added outside the box.

Padding Inner margin (distance between the border and the content)

  • padding-left
  • padding-right
  • padding-top
  • padding-bottom
padding:5px 1 value, representing a 5 pixel inner margin up, down, left, and right
padding:5px 10px Two values, representing a top and bottom margin of 5 pixels and a left and right margin of 10 pixels
padding:5px 10px 20px Three values, representing a top inner margin of 5 pixels, a left and right inner margin of 10 pixels, and a bottom inner margin of 20 pixels
Padding-right: 5px 10px 20px 30px Four values, top, right, bottom, left clockwise

If the box has a width defined, the padding affects the width of the box when specifying an inner margin, as does the height. If the width or height is not defined, it does not affect the width or height of the box.

The padding of the inline elements is visually increased, but the top and bottom values do not affect the alignment.

Both span elements overlap the top and bottom divs, and the overlapping portions are the padding-top and padding-bottom of the span, respectively. Because the padding-top and padding-bottom values of inline elements do not affect the arrangement of other elements.

The text – align:

Valid for inline elements or children of inline block elements

Margin (the distance between boxes)

  • margin-left
  • margin-right
  • margin-top
  • margin-bottom

(Upper, lower, inner and outer margins for inline elements are invalid)

Margin values are distributed exactly as padding. Margins can center a block-level box horizontally, but only if two conditions are met:

  • The box must have a width. (Horizontal center only works for block elements. To set horizontal center for block elements, add text-align:center to block elements.)
  • The margins on the left and right sides of the box are set to Auto

Margin: 0,auto (just set it to auto to center)

Collapse of the margin of a nested block element

For two nested block elements, when both parent and child elements have a top margin, the margin of the parent element will be the value with the highest top margin of the two elements, as in:

<div>
  <div><div></div></div>
</div>
Copy the code

Note that there is no margin collapse for inline block elements

If the top margin of the outer div is 20px and the top margin of the inner div is 30px, the outer div will be displayed on the page with a top margin of 30px and the top margin of the inner div is 0.

There are three solutions:

  • You can define a border for the parent element, such as: border: 1px solid transparent;

  • You can define an inner margin for the parent element, such as padding-top: 1px; (This can be separated as long as there is an inner margin. This inner margin does not define the distance between the parent element and the child element, and the box of the parent element will be larger accordingly.)

  • You can add overflow: Hidden to the parent element

    Floating elements do not suffer from margin collapse

Clear the inner and outer margins

Since different tags may have different default margins in different browsers, we often first clear the margins (also known as formatting) of all tags

* {
  margin: 0;
  padding: 0;
}
Copy the code

Rounded corner border (emphasis)

Border – the radius: length; You can use pixels or percentages. When the box wants to turn a square box into a circle, in pixels, that pixel should be half the width of the box, and in percentages, 50% becomes a circle.

Border-radius: top left, top right, bottom right, bottom left (clockwise);

If the border-radius has only two values, the two values are diagonal lines. You can also set border-top-left-radius, border-bottom-right-radius…

Box-shadow (emphasis)

value instructions
h-shadow Required. Position of horizontal shadows. Allow the negative
v-shadow Required. Position of vertical shadows. Allow the negative
blur Optional. Blur distance (the degree of shade)
spread Optional. Size of shadow
color Optional. Shadow color. Find the complete list of color values in CSS Color Values
inset Optional. Change the inner shadow from the outer shadow (at the beginning)

Shadows don’t take up space

Text-shadow Indicates the text shadow

value instructions
h-shadow Required. Position of horizontal shadows. Allow the negative
v-shadow Required. Position of vertical shadows. Allow the negative
blur Optional. Blur distance (the degree of shade)
color Optional. Shadow color. Find the complete list of color values in CSS Color Values

Standard flow (normal flow/document flow)

Standard flow: labels are arranged in a specified default way.

  1. Block-level elements have an exclusive row, arranged from top to bottom.
  • Common elements: div, HR, P, H1 ~ H6, ul, OL, DL, form, table
  1. The elements in the line are arranged in order, from left to right, and wrap when the parent element’s edge is touched.
  • Common elements: span, A, I, em and other inline elements

Standard flow is the most basic layout.

Float float

  1. Why float

The most typical use of float: you can display multiple block-level elements in a row, with no spacing between block-level elements. The first rule of web layout: multiple block-level elements are arranged vertically to find a standard flow, and multiple block-level elements are arranged horizontally to find a float

The original intention of floating was to solve the problem of text wrapping around images

  1. What is floating

The float property is used to create a float box that is moved aside until the left or right edge touches the edge that contains the block or another float box. For example, if you first define a div to float to the left, there is only one floating block-level element, so the div floats to the edge of the body. When another div is defined to float to the left, that div floats to the left until the last one floats to the left.

Floating features (Difficult and important)

The most important feature of a float element:

  1. The movement of control (float) out of the standard normal flow to a specified position (move), commonly known as de-scaling
  2. Floating boxes no longer remain in their original positions.

Example: When you have two normal divs, each occupies the upper and lower positions. When the upper div is floated, the element floats like the interface, so its original position is empty, and the lower div occupies the original position of the upper div

  1. Floating boxes are aligned with the top of the parent element and arranged in a row, with overflow breaking lines.
  2. There is no spacing between floating elements
  3. Floating elements have the properties of inline block elements
  4. When a block-level element is set to float, if the element is not set to width, the width of the element is the area occupied by the content
  5. Floating elements only overwrite the following standard flow and do not affect the preceding standard flow. For example, when there are three div elements, the first and third div elements are not set to float, and the second div element is set to float, the three elements in a row become the first div element. The second div element suppresses the third behind the first
  6. Floating elements weigh down the bottom box, but not the standard flow of text and images. Such as

No float added to the box:

After adding a float:

As you can see, the pink div element overwhelms the P element, but the text is completely exposed.

The reason floats don’t overwhelm text is because they were originally created to surround text, so text surrounds the floating element

Out of document flow, content is empty (float collapse)

When an undefined height box is filled with floating elements, the height of the box is 0, and the following elements overlap with the child elements. Because the floating elements detach from the document flow, as shown.

And the child box will be off scale, because the parent box has no height, so the child box will not stretch the box. So you need to clear the float.

Remove the floating

The essence of clearing floats is to remove floating elements from the standard flow

  1. The extra tag method adds an empty block-level tag to the end of the float element that adds the clear: both attribute. But this method adds a lot of meaningless tags and is poorly structured.
  2. Parent add overflow: hidden, auto, scroll (but cannot show the overflow part)
  3. Add :after pseudo-elements to the parent element, such as:

The parent box calls the ClearFix class. 4. Add a double pseudo-element to clear the float

Note: clear: both needs to be used on the next tag, not the parent tag of the current floating element. Overflow: hidden can be used on the next tag, or on the parent tag of the current floating element. The pseudo-element tag in the figure above is added to the parent element of the floating element

Writing order of CSS properties (emphasis)

  1. Layout positioning properties: the display/position/float/clear/visibility/overflow (suggest that display first write)
  2. Their properties: width/height/margin/padding/border/background
  3. Text attribute: color/font/text-decoration/text-align/vertical-align/white-space/break-word
  4. Other attributes CSS3

Nav navigation bar creation

The practice of li+ A is commonly used in the actual development. If the direct use of a search engine is easy to identify as suspected of stacking keywords (deliberately stacking keywords is easy to be reduced by the search engine risk), it will be considered as malicious drainage.

Locate the position

Position = position mode + edge offset.

Edge offset: top, left, right, bottom

Positioning mode: 1. Position: static Static positioning

Default positioning, rimless offset

B: I’m in a relative position

The element occupies its original position even if it has an edge offset relative to its original position

3. Position: Absolute

If there is no parent element or the parent element is not located, the browser is used as a reference to the ancestor element. If the ancestor element has a location, it will take the parent element as the reference and move the location with the nearest level of the location of the ancestor element as the reference point. The absolute location does not occupy any position after edge offset (the following element will overlap with the absolute location element).

Child absolute parent phase: the child element uses absolute positioning, and the parent element must use relative positioning.

Because absolute positioning does not occupy position, the parent element needs position to constrain it.

4. Position: fixed

Relative to the position of the viewable area of the browser, the main usage scenario: the position of the element can not change when the browser page scrolls.

Fixed positioning is special absolute positioning fixed positioning tips: fixed in the right position of the type center, as shown in the figure:

Leave the fixed position of the box left: 50%. Go halfway to the viewable area of the browser and make margin-left: half the width of the screen

5. Position: sticky

Sticky positioning can be thought of as a mixture of relative positioning and fixed positioning, moving elements around the browser’s visual window as a reference point and occupying the original position, which must be top, left, right, or bottom to be effective. The specific scenario is as follows: Elements with sticky positioning first stay in their original position (like standard flow). When the visual area changes, elements with sticky positioning do not scroll as fixed positioning elements (IE does not support this).

The cascading order of positioning

Z-index: greater than 0, 0, less than 0 (no units, and only positioned boxes have this property) The higher the value, the closer the box is. If the values of the attributes are the same, they are written in the order of precedence.

Positioning to expand

  1. Boxes with absolute positioning are not horizontally centered by margin: auto, but by: left:50%,margin-left: negative half of the width of the box

  2. Inline elements with absolute positioning can be directly set to width and height.

  3. Block-level elements with absolute positioning whose width and height are not set are the width and height of their content.

  4. Float elements and absolutely positioned and fixed positioned elements do not cause margin merging problems.

Unlike floating elements that do not overwhelm text and images in the standard stream, absolute and fixed positions overwhelm all content in the standard stream below.

Show and hide the parent element

  1. display

Display: none Hides the object and no longer occupies its original position;

Display: Block converts to block level elements and displays elements

  1. The visibility of visibility

Visibility: Visible elements

Visibility: hidden, the element is hidden, and the original location continues to be occupied

  1. Overflow spill

An object is an inner content or its child element content that exceeds its height or width relative to the element that owns the attribute.

Overflow: visible (default)

overflow: hidden

Overflow: Scroll bars are displayed even if the content does not overflow.

Overflow: Auto If the content does not overflow, it is normally displayed. If the content overflows, a scroll bar is displayed

The elves figure

  1. Why do I need sprites?

A web page often applies a lot of small background images as decoration, when there are too many images in the web page, the server will frequently accept and send request images, resulting in server request pressure is too large, which will greatly reduce the page loading speed.

Therefore, in order to effectively reduce the number of server to receive and send requests, improve the speed of page loading, CSS Sprites technology (also known as CSS Sprites, CSS Sprite diagram)

The core principle: to combine small background images in a web page into a larger image, so that the server only needs one request.

  1. Use of sprites

Using Sprite core:

1). Sprite technology is mainly for the use of background images. It is a combination of several small background images into one large image.

2). Use the Sprite image mainly by moving the background image (background-position)

3). The distance moved is the x and y coordinates of the target picture

4). It is necessary to accurately measure the size and position of each small background picture

When we add Sprite, the Sprite is aligned to the top left corner of the box by default

However, sprites also have a big disadvantage, that is, changing part of the icon can be very troublesome, and you need to accurately measure the size of the icon position.

Therefore, there is a font icon, the characteristics of the font icon: lightweight, flexibility, compatibility.

Use font ICONS for simple styles and structures, and Sprite ICONS for those that aren’t.

Font ICONS can be downloaded directly from the web.

CSS triangle

Such as wechat chat box information bubble in the small triangle

Core: set the border value, width and height are 0;

Set the color of the rest of the border to transparent. The size of the triangle can be changed by setting the border value, for example:

The effect is as follows:

Note: Border is the height of the triangle, and border *2 is the length of the triangle.

Mouse style CURSOR

Cancel the form outline

outline: none

The default border appears when we click on the input or Textarea form boxes, and we need to set Outline: None to cancel the form outline.

For textarea tags, the text field can be dragged to make it larger or smaller, but we don’t need this effect in real development, so we can use resize: None to make it undraggable. In addition, the start and end tags of a textarea need to be on the same line, otherwise a blank line is automatically added to the text field

The vertical alignment

The vertical-align property is used to set the vertical alignment of images or forms (inline block elements) with text. (Applies only to inline elements and inline block elements)

Vertical-align: top, bottom, base, bottom

The top line, middle line, baseline and bottom line are shown as follows:

Text aligns the text baseline by default.

Fixed the default gap at the bottom of the image

Since the image is aligned with the text baseline by default, there is a gap at the bottom of the image for the text baseline. There are two ways to remove this gap:

  1. To add to the picture vertical – align: middlie | top | bottom properties, as long as not aligned baseline (advocated)
  2. You can convert images to block-level elements because only inline elements and inline block elements have vertical-align attributes.

Overflow text is shown with an ellipsis

  1. Single line text overflow

First, white-space:nowrap does not wrap text. Second, hide the overflow part; Text-overflow :ellipsis; text-overflow:ellipsis;

  1. Multiple lines overflow

Works with WebKit browsers or mobile devices

.xxx {
  overflow: hidden;
  text-overflow: ellipsis;
  /* Elastic telescopic box model display */
  display: -webkit-box;
  /* Limits the number of lines of text displayed in a block element */
  -webkit-line-clamp: 2;
  /* Sets or retrieves the arrangement of the children of the flex box object */
  -webkit-box-orient: vertical;
}
Copy the code

Common Layout Tips

  1. In many cases we need to have a row of border elements displayed horizontally, as shown here:

But when we frame it, the borders of the two elements close together will make the middle border thicker.

In this case we can use the negative value of margin to solve this problem

Margin-left: Negative margin value

However, if the hover attribute needs to be added to display different colored borders when the mouse passes over an element, the border of this element will be squeezed by other elements’ borders due to merging and cannot be displayed. In this case, we can solve the problem through the following code

.li:hover {
  position: relative; /* Absolute position cannot be used, because absolute position does not occupy position */
  z-index: 1;
  border-color: red;
}
Copy the code

But this code only applies if the element itself is not positioned, if the element itself is positioned, then simply set z-index to raise the level.

New HTML5 features

(Only Internet Explorer 9+ or later is supported) Added semantic labels

<header> Header tag; <nav> navigation TAB; <article> Content tag; <section> defines an area of the document; <aside> Sidebar tag; <footer> tail tag

This semantic standard is mainly for search engines. In IE9, these elements need to be converted into block-level elements. There are no compatibility issues on the mobile side, so it is mostly used for mobile development.

HTML5 new multimedia tags

  1. <video SRC =”controls” =”controls”></video>

    They make it easy to embed audio and video in a page without using Flash or other plug-ins.

    However, the video TAB only supports videos in MP4, WebM and Ogg formats. Different browsers have different compatibility with different formats.

However, we can see that video in MP4 format is supported by most browsers, so when inserting video into the browser, try to use MP4 format

Video attributes :(note that Google browser requires a “muted” attribute to automatically play)

  1. The input type

  1. New form attributes for HTML5

Note: The new input type and form attributes need to be implemented in the form field (<form></form>).

New features of CSS3

The new CSS3 feature is supported only by compatible Internet Explorer 9+

1. Property selector

Attr stands for attribute, and val is the value of attribute

The second example:

  input[type="text"]/* Select the input tag where type="text" */
  div[class^="ico"] /* Select the element */ of the class in the div tag that begins with the class name ico
Copy the code

The weight of the property selector is (0,0,1,0)

In the above code, input is the tag selector and [type=”text”] is the attribute selector, so the combined weight is 11.

2. Structure pseudo-class selector

Nth-child (n) selects the number of children of the parent element, where n can be a number, a keyword (even even children, odd odd children), or a formula (counting from 0).

Such as:

ul :nth-child(3) /* Select the first child of ul element */
ul li:nth-child(3) /* Select the third li element under ul */
ul li:nth-child(even)/* Select the odd li element under ul */
ul li:nth-child(n) /* Select count from 0 to the last element */
Copy the code

The first three pseudo-class selectors are used in the same way as the last three, but there are essential differences.

In our nTH-Child selector, all tags in the code are numbered

<section>
  <p>1</p>
  <div>2</div>
  <div>3</div>
</section>
Copy the code

When we use section div: nth-Child (1), the browser does not select either element. Because in this code, the browser recognizes nth-Child (1) and finds that the section’s first child is not a div, it doesn’t match.

In section div:nth-of-type(1), look at the div and select the first child element in the div.

The weight of the structure pseudo-class selector is (0,0,1,0)

Pseudoelement selector (emphasis)

Pseudo-element selectors can simplify HTML structure by helping you create new tag elements using CSS without the need for HTML tags

::before inserts content inside the parent element ::after inserts content inside the parent element

  • Before and after create an element, but are inline elements
  • The newly created element is not found in the document tree, so we call it a pseudo-element
  • Syntax: element::before ()
  • Before and after must have content attributes
  • Before creates the element before the parent element content, and after inserts the element after the parent element content
  • Pseudo-element selectors, like label selectors, have a weight of 1

Pseudo-element cleanup float

CSS3 box model border-box

Box-sizing: content-box default (width+padding+border). Adding padding and border values will make the box larger.

Box-sizing: border-box the final box width is width. Adding padding and border values does not make the box bigger

We can initialize the document as follows:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
Copy the code

Filter filter

The filter: the blur (num); Blur is a blur function. The larger the num, the more blurred it is

Calc functions can be used for + (addition), – (subtraction), * (multiplication), / (division) calculations, such as:

.son {
  width: calc(100%-30px); /* The son element is always 30px less than the parent element
}
Copy the code

CSS Transitions (emphasis)

Transition animation, the gradual transition from one state to another

Transition: Attributes to be transitioned take time when the motion curve begins

  1. Properties: CSS properties that you want to change, width, height, background color, inside and outside margins. If you want all properties to transition, you can write all.
  2. Time spent: in seconds (must be written in units) such as 0.5 seconds
  3. Motion curve: The default is ease (can be omitted)
  4. When to start: unit is second (must write unit) Delay trigger time can be set. Default is 0s (can be omitted)

Who will change who will add.

.tran {
  width: 100px;
  height: 100px;
  color: pink;
  transition: width 0.5 s; /* Add the transition attribute directly to this class, not to hover */
}
.tran:hover {
  width: 400px;
}
Copy the code

If you need to change two or more attributes at the same time, separate them with commas (all for all attributes).

.tran {
  width: 100px;
  height: 100px;
  color: pink;
  transition: width 0.5 s, height 0.5 s;
}
.tran:hover {
  width: 400px;
  height: 200px;
}
Copy the code

The broad term HTML5 refers to HTML5 itself +CSS3+JavaScript