First, HTML + CSS basics

1-1

Html and CSS

Learning the basic technology of Web front-end development needs to master: HTML, CSS, JavaScript language. Here’s a look at what all three technologies are used to achieve:

1. HTML is the carrier of web content. Content is the information that web creators put on a page to be viewed by users. It can include text, pictures, videos, etc.

2. CSS styles are presentation. It’s like the coat of a web page. For example, title fonts, color changes, or add background images, borders, etc. All this stuff that changes the look of content is called presentation.

3. JavaScript is used to implement special effects on web pages. Such as: mouse slide pop-up drop-down menu. Or mouse over the table to change the background color. There is also the rotation of focus news (news pictures). You can think of it this way, animated things, interactive things are usually done in JavaScript.

1 to 2

1. HTML tags are case insensitive. <h1> is the same as <h1>, but lower case is recommended because most programmers use lower case.

1-3

An HTML file has its own fixed structure.

<html>

</html>

Code explanation:

1. < HTML ></ HTML > is called the root tag, and all the page tags are in < HTML ></ HTML >.

2. The <head> tag is used to define the header of the document, which is the container for all the header elements. Header elements have tags such as <title>, <script>, <style>, <link>, <meta>, etc. Header tags are described in the next section.

3. The content between the <body> and </body> tags is the main content of the web page, such as < H1 >, < P >, <a>, < IMG > and other web content tags. The content in the tag here will be displayed in the browser.

1-4

1. The following tags can be used in the head section:

<head>

<meta>

<link>

</head>

2, code annotation is not only convenient for programmers to recall the use of the previous code, but also can help other programmers to quickly understand the function of your program, which is convenient for many people to cooperate in the development of web code.

Grammar:

<! — Comment text –>

3. CSS comment code

Just as in Html, there are comment statements in CSS: the /* comment statement */ is used to indicate (in Html, <! — Comment statement –>

From 1 to 5

1, semantic: the popular point is: understand the purpose of each label (in what case I can use this label is reasonable), for example, the title of the article on the web page will use the title tag, the column name of each column on the web page can also use the title tag.

2. The role of semantics

1). Easier to be indexed by search engines.

2). Make web pages easier to read by screen readers.

2. Recognize labels (Part 1)

2-1

If you want to display an article on a web page, then you need the <p> tag. Put the paragraph of the article in the <p> tag.

Grammar:

<p> Paragraph text </p>

2-2

The < hX > tag makes the title of the article.

There are altogether 6 title tags, h1, H2, H3, H4, H5 and H6 are level 1, level 2, level 3, level 4, level 5 and level 6 respectively. And diminishing in importance. < H1 > is the highest level.

Grammar:

<hx> Title text </hx> (x is 1-6)

As mentioned above, title tags can be used for article titles, and they can also be used for column titles on web pages

2-3

Now that you have paragraphs and headings, you can use <em> or <strong> tags if you want to emphasize a few words in a paragraph.

But there are differences in the tone of emphasis :<em> for emphasis, <strong> for stronger emphasis. By default, <em> is in italics and <strong> is in bold. Compared with the two tags, domestic front-end programmers prefer to use <strong> for emphasis

2-4

1. The <em> and <strong> tags are used to emphasize keywords in a paragraph.

2. The <span> tag has no semantics, it is used to set individual styles, circle a paragraph and style it with CSS.

2-5

Q tags, short text references

For example, if you want to quote a poem from a certain writer in your article, it will make your article more interesting, then the <q> tag is what you need.

Grammar:

<q> Quotes text </q>

1. Note that the text to be quoted does not need double quotation marks. The browser automatically adds double quotation marks to the Q label.

2. Note that the real point of using the <q> tag here is not its default style of double quotes (we might as well type double quotes ourselves on the keyboard), but its semantics: to quote someone else

Blockquote tag, long text reference

<blockquote> is also used to quote someone else’s text. But it’s a reference to a long text

A <q> tag is a reference to short text, such as a sentence.

Grammar:

<blockquote> Quotes text </blockquote>

Browsers parse < blockQuote > tags in indent style

2-6

Newline tag <br/>

The <br/> tag acts like a carriage return in a Word document.

Splitter label < HR />

The <hr/> tag, like the <br/> tag, is an empty tag, so there is only a start tag and no end tag.

The default style of the <hr/> tag in the browser is thick and gray, which some people may think is not beautiful. It doesn’t matter, these external styles can be changed after we learn CSS style sheets.

2-7

HTML special characters

Space: (; Semicolons are essential)

2-8 –

The address tag adds address information to a web page

Grammar:

<address> Address </address>

Such as:

No.10 dewai Dajie, Xicheng District, Beijing, China

If you don’t like italics, by all means, you can change the default style of its <address> tag using CSS styles later in the lesson

2-9

When the code is a line of code, you can use the <code> tag, as in the following example:

Grammar:

<code> Code language </code>

Note: the <code> tag is generally not used in articles when inserting multiple lines of code, but the <pre> tag is used when inserting multiple lines of code.

The main purpose of the <pre> tag: preformatted text. Text enclosed within a Pre element is usually reserved for Spaces and newlines. If you use the previous method, enter the <br> TAB and enter the space TAB.

Note: the <pre> tag is not just for displaying the computer’s source code, it can be used whenever you need to pre-display formatting on a web page, but a common use of the <pre> tag is to display the computer’s source code.

3. Recognize labels (Part 2)

3-1

1. Unordered lists

Ul-li is a sequential list of information.

Grammar:

<ul>

< li > information < / li >

</ul>

For example:

<ul>

<li> Beauty suddenly appears </li>

<li> Touch the heart </li>

</ul>

The default display style of UL-LI on web pages is: Each li item is preceded by a dot

2. Ordered lists

Grammar:

<ol>

< li > information < / li >

</ol>

For example:

Here’s a list of the most downloaded courses:

<ol>

<li> Front-end development interview method </li>

<li> Learning HTML </li>

</ol>

The default style of < OL > displayed on the web page is generally: each item <li> is preceded by a serial number, which starts from 1 by default

3-2

<div> Container tag

In the process of creating a web page, you can divide some separate logical parts into a <div> tag, which acts as a container.

Grammar:

The < div >… </div>

Determine the logical part:

What is the logical part? It is a set of interrelated elements on a page. A typical logical section, for example, is a separate section in a web page. As shown below: The part of the diagram marked with a red border is a logical part, and you can use the <div> tag as a container

Note: <div> is a block-level element, which means that browsers usually place a newline character before and after the div element.

3-3

Create the table with five elements:

Table, Tbody, TR, th, TD

1, the < table >… </ TABLE > : The entire table starts with a <table> tag and ends with a </table> tag.

2, < tbody >… </tbody> : When the table content is very large, the table will be loaded and displayed, but with the <tbody> tag, the table will not be displayed until the table content has been downloaded. As in the code editor on the right. (This label is hardly used anymore.)

3, < tr >… </tr> : one row of the table, so there are several rows for as many pairs of tr tables.

4, < td >… </ TD > : a cell in a table containing several pairs of < TD > in a row… <td/>, indicating that there are several columns in a row.

5, the < th >… </th> : a cell in the table header, the table header.

The number of columns in a table depends on the number of data cells in a row.

The table still needs to be optimized by adding some tags, including titles and summaries

<caption> Inventory records from 2012 to 2013 </ Caption >

3-4

1. Use the <a> tag to link to another page

The use of <a> tags can achieve hyperlinks, it can be said to be everywhere in the production of web pages, as long as there is a link, there will be this label.

Grammar:

Such as:

<a href = “http://www.imooc.com”>click here! </a>

The above example works by clicking Click here! Text, web links to http://www.imooc.com this web page.

3-5

Recognize the <img> tag and insert the image for the page

In the production of the web page in order to make the web page dazzling beautiful, is certainly the lack of pictures, you can use < IMG > tag to insert pictures.

Grammar:

For example:

Explanation:

1. SRC: mark the position of the image;

2. Alt: Specify the descriptive text of the image. When the image is not visible (when the download fails), the text specified by this attribute can be seen;

3. Title: Provides the description of the image when the image is visible (the text displayed when the mouse slides over the image);

4, the image can be GIF, PNG, JPEG format image files.

4. Form tags (interacting with the user)

4-1

A form is a form that sends data from the viewer to the server so that the server program can process the data from the form.

Grammar:

Explanation:

1.<form> : The <form> tags come in pairs, starting with <form> and ending with </form>.

2. Action: Where the data entered by the viewer is sent, such as a PHP page (save.php).

3. Method: Data transfer method (GET/POST).

4-2

The < input > input box

Text input box, password input box

Text fields are used when a user wants to type letters, numbers, and so on into a form. A text box can also be converted to a password entry box.

Grammar:

<form>

</form>

1, type:

When type=”text”, the input box is the text input box.

When type=”password”, the input box is the password input box.

2. Name: Name the text box for use by background programs ASP and PHP.

3. Value: Sets the default value for the text input field. (Usually serves as a reminder)

4-3

A text field that supports multi-line text input

Text entry fields are used when the user needs to enter large blocks of text in a form.

Grammar:

</textarea> </textarea>

1. The <textarea> tags come in pairs, starting with <textarea> and ending with </textarea>.

2. Cols: the number of columns in the multi-line input field.

3, rows: the number of rows in the multi-row input field.

4-4

Single box, check box

Grammar:

1, type:

When type=”radio”, the control is an optional box

When type=”checkbox”, the control is a checkbox

Value: the value of the data submitted to the server (used by daemon PHP)

3, name: for the control name, for the background program ASP, PHP use

4. Checked: This option is checked by default when checked=”checked”

Note: For the same group of radio buttons, the value of name must be the same, so that the same group of radio buttons can play the role of radio.

4 to 5

Drop down list box to save space

Dropdown lists are often used in web pages, which can effectively save web space. It can be single or multiple.

Syntax: <option value=” submit value “> options </option>

The submitted values are the values submitted to the server, and the options are the values displayed.

< label > interest: < / label >

</option> </option>

<option value=” movement “> Movement </option>

<option value=” shopping “> Shopping </option>

</select>

</form>

4 to 6

Use the drop-down list box to select multiple items

You can also select multiple items from the drop-down list by setting multiple=”multiple” in the <select> tag,

You can select multiple options by pressing Ctrl to select multiple options.

The following code:

< label > interest: < / label >

</option> </option>

<option value=” travel “> Travel </option>

<option value=” movement “> Movement </option>

<option value=” shopping “> Shopping </option>

</select>

</form>

4 to 7

There are two types of buttons available in the form: Submit button and Reset button.

1. Submit button: When the user needs to submit form information to the server, the submit button is needed.

Grammar:

< form =”submit” value=” submit” >

Type: The button can submit only if type is set to submit

Value: indicates the text displayed on the button

2. Reset button to reset the form information

If you need to reset the form information to the original state, for example, you can use the reset button to restore the input box to the original state. Just set type to “reset”.

Grammar:

Type: The button can be reset only when type is set to reset

Value: indicates the text displayed on the button

Five, CSS styles

5-1

Understanding CSS styles

Cascading Style Sheets (CSS) is used to define how HTML content should be displayed in the browser, such as text size, color, font boldness, etc.

Such as the following code:

font-size:12px;

color:red;

font-weight:bold;

}

One advantage of using CSS styles is that by defining a style, you can have the same font, size, or color for text in different web sites.

5-2

CSS Code syntax

CSS styles consist of selectors and declarations, which in turn consist of properties and values

Selector {property: value}

p{color:red; }

Selectors: Also known as selectors, indicate that the elements in the page to which the style rule is applied, such as in this case all sections of the page (p) text will turn blue, while other elements (such as OL) will not be affected.

Declaration: Declarations are in curly braces “{}”. Properties and values are separated by colons (:). If there are multiple statements, use a semicolon (;) between them. Delimit, as shown below:

p{font-size:12px; color:red; }

5-3

From the form of CSS style code insertion can be basically divided into the following three:

Inline, embedded and external three types

1. Inline CSS styles

Add CSS code directly to an existing HTML tag, such as the following:

The CSS style codes must be enclosed in double quotation marks (” > “). If there are multiple CSS style codes, separate them with semicolons (;). The following code:

2. Embedded CSS styles

span{

color:red;

}

</style>

Embedded CSS styles must be written between <style></style>, and typically embedded CSS styles are written between <head></head>.

3. External CSS styles

Write it in a separate file

An external CSS style (also known as an external CSS style) is a separate external CSS style file with a “. CSS “extension that links the CSS style file to the HTML file using the <link> tag inside the <head> (not inside the <style> tag), as shown in the following code:

Note:

1. Name the CSS style file with a meaningful letter, such as main.css.

2, rel=”stylesheet” type=”text/ CSS “is fixed and cannot be modified.

3, the <link> tag position is usually written within the <head> tag.

CSS selector

Each CSS style definition consists of two parts, as follows:

The selector {

Style;

}

The part before {} is the “selector”, which specifies the object on which the “style” in {} applies, that is, which elements in the page the “style” applies

6-1, label selector

Tag selectors are simply tags in HTML code. Such as < HTML >, <body>, < H1 >, < P >, < IMG > in the right code editor. For example:

p{font-size:12px; The line – height: 1.6 em. }

The CSS style code above does what it does: set the p label size to 12px and the line spacing to 1.6em.

6-2, class selector

Class selectors are most commonly used in CSS style coding, such as the code in the code editor on the right: can be implemented as “timid” and “brave” font set to red.

Grammar:

.class selector name {CSS style code; }

Note:

1, English dot beginning

2, the class selector name can be arbitrarily named (but not in Chinese oh)

Usage:

Step 1: Mark the content you want to modify with appropriate tags, as follows:

Step 2: Set a class for the tag using class=” Class selector name “as follows:

Step 3: Set the class selector CSS style as follows:

.stress{color:red; }/* class is preceded by an English dot */

6-3, ID selector

ID selectors are similar to class selectors in many ways, but there are some important differences:

1, set tag id=” id name “instead of class=” class name”.

2, the ID selector is preceded by a hash mark (#) instead of an English dot (.) .

6-4, the difference between classes and ID selectors

Similarities: Can be applied to any element

Difference:

The ID selector can only be used once in a document. Unlike class selectors, ID selectors can only be used once, and only once, in an HTML document. Class selectors can be used multiple times.

The following code is correct:

< P > When I was in third grade, I was a <span class=” span “> timid little girl who never dared to answer the teacher’s questions in class for fear that the teacher would criticize me if I gave the wrong answer. I have never had the <span class=”stress”> courage </span> to answer the teacher’s questions. </p>

The following code is incorrect:

<p> When I was in third grade, I was a little girl of <span id=”stress”>. I never dared to answer the teacher’s questions in class for fear that the teacher would criticize me if I gave the wrong answer. I haven’t had the courage </span> to answer the teacher’s questions. </p>

You can use the class selector word list method to set multiple styles for an element at the same time. We can have multiple styles for an element at the same time, but only with the method of a class selector, not an ID selector (you can’t use a list of ID words).

The following code is correct (see code editor on right for full code)

.stress{

color:red;

}

.bigsize{

font-size:25px;

}

< P > <span class=”stress bigsize”> </span> In the next semester, our class had an open lesson… </p>

The above code sets the text color to red and size to 25px for the “third grade” text

The following code is incorrect (see code editor on right for full code)

#stressid{

color:red;

}

#bigsizeid{

font-size:25px;

}

<p> When <span id=”stressid bigsizeid”> </span> the next term, our class held an open class… </p>

The above code cannot set the text color to red and font size to 25px for “grade 3” text.

Six minus five, child selector

A more useful selector child selector, the greater than symbol (>), is used to select the children of the specified tag element. The following code:

.food>li{border:1px solid red; }

This line of code places a solid red border around the child element li under the name food.

6-6, including (descendant) selectors

Contains a selector that adds a space to select a descendant element under the specified tag element. As in the code editor on the right:

.first span{color:red; }

Notice the difference between this selector and child selectors

1. A child selector is just its immediate descendants, or you can think of it as the first generation of children that it’s acting on

2. Descendant selectors are applied to all descendant elements. Descendant selectors are selected by whitespace, while child selectors are selected by >.

Summary: > applies to the first generation of the element, and whitespace to all the element’s descendants.

6-7, universal selector

The universal selector is the most powerful selector. It is specified with an (*) sign. It matches any tag element in HTML.

* {color:red; }

6-8, pseudo-class selector

More interesting, pseudo-class selectors (why they are called pseudo-class selectors) allow styles to be set for tags that do not exist in HTML. For example, we can set the font color to the mouse-over state of a tag element in HTML:

a:hover{color:red; }

This line of code causes the “Timid Mouse” font color in the text content wrapped around the <a></a> tag to turn red over the mouse.

6-9, group selector

When you want to style multiple tag elements in HTML, you can use the group selector (,) and set the font color to red for the H1 and SPAN tags in the code editor on the right:

h1,span{color:red; }

It is equivalent to the following two lines of code:

h1{color:red; }

span{color:red; }

Seven, CSS inheritance, cascade and particularity.

7-1

Some styles of CSS are inheritable, but what is inheritance? Inheritance is a rule that allows styles to be applied not only to a particular HTML tag element, but also to its descendants. For example, if a color is applied to the P tag, the color setting applies not only to the P tag, but also to the text of all the child elements in the P tag, which in this case is the SPAN tag.

But note that some CSS styles are not inheritable. Such as border: 1 px solid red;

7-2

Determine which CSS style to use based on weights

The browser determines which CSS style to use based on the weight, and the CSS style with the highest weight will be used.

Here are the rules for weights:

Tags have a weight of 1, class selectors have a weight of 10, and ID selectors have a weight of up to 100. For example:

p{color:red; } /* the weight is 1*/

p span{color:green; } /* Weight is 1+1=2*/

.warning{color:white; } /* the weight is 10*/

p span.warning{color:purple; } /* The weight is 1+1+10=12*/

#footer .note p{color:yellow; } /* The weight is 100+10+1=111*/

Note: there is another special weight — inheritance also has a weight value but it is very low. Some literatures suggest that it is only 0.1, so it can be understood as inheritance has the lowest weight

7-3, cascade

Let’s consider a question: what if there could be multiple CSS styles for the same element in an HTML file and all of them had the same weight? Well, layering in this section helps you solve this problem.

Cascading means that multiple CSS styles can exist for the same element in an HTML file. When styles with the same weight exist, they are determined by the order in which they are placed. The CSS styles at the bottom are applied.

Such as the following code:

p{color:red; }

p{color:green; }

<p class=”first”> When I was in the third grade, I was a little girl as timid as a mouse. </p>

Finally, the text in p will be set to green, and this cascade is easy to understand, meaning that the later styles will overwrite the previous ones.

So it’s not hard to understand the previous CSS style priorities:

Inline style Sheet (inside tag) > Embedded style Sheet (in current file) > External style Sheet (in external file).

7-4, importance

The importance of

When we make web code, some special cases need to set the highest weight for certain styles, what to do? This is when we can use it! Important to solve.

The following code:

p{color:red! important; }

p{color:green; }

<p class=”first”> When I was in the third grade, I was a little girl as timid as a mouse. </p>

The text in the P paragraph will appear red.

Note: it is! Important is written before the semicolon

Eight, CSS formatting typesetting

8-1

typography

1, text typesetting — font

We can use CSS styles to set style properties such as font, size and color for text on a web page. Let’s look at an example of the following code: set the font for the text in the web page to Song Typeface.

Body {the font-family: “tahoma”; }

Be careful not to set unusual fonts here, because if the user does not have your font installed on their local computer, the browser’s default font will be displayed. (Whether the user can see the font style you set depends on whether the font is installed on the user’s local computer.)

2. Text typesetting — size and color

You can use the following code to set the font size of the page to 12 pixels and set the font color to #666(gray) :

body{font-size:12px; color:#666}

3, text typesetting – bold

We can also use CSS styles to change the style of the text: bold, italic, underline, strikeout, you can use the following code to set the text to appear in bold.

p span{font-weight:bold; }

4. Text typesetting — italic

The following code makes the text appear in italics in the browser:

p a{font-style:italic; }

<p> In third grade, I was a < A > timid </a> little girl. </p>

5, text typesetting – underline

In some cases, you might want to set the text to underline to give visual emphasis to the text. This can be done using the following code:

p a{text-decoration:underline; }

<p> In third grade, I was a < A > timid </a> little girl. </p>

Delete lines, often seen on e-commerce sites.

p a{text-decoration:line-through; }

8-2

Paragraph layout

1, paragraph typesetting – indent

It is customary to leave two characters blank before a paragraph in Chinese text. This special style can be implemented with the following code:

p{text-indent:2em; }

Note: 2em means twice the size of the text.

2. Paragraph layout — line spacing

In this section we will look at another important property in paragraph layout, line-height. This code sets the spacing of paragraphs to 1.5 times.

P {line – height: 1.5 em. }

3, paragraph layout — word spacing, letter spacing

Text interval and letter interval Settings:

If you want to set spacing between text and letters in web layout, you can use letter-spacing as shown in the following code:

h1{

letter-spacing:50px;

}

<h1> Great Gatsby </h1>

Note: This style is used with English words to set the spacing between letters.

Word spacing Settings:

What if I want to set the spacing between English words? Word-spacing can be implemented using spacing. The following code:

h1{

word-spacing:50px;

}

<h1>welcome to imooc! </h1>

CSS box model

9-1

Element classification

Before we go into CSS layout, we need to know that in CSS, tag elements in HTML are generally divided into three different types: block elements, inline elements, and inline block elements.

Common block elements are:

Common inline elements are:

< a >, < span >, < br >, < I >, < em >, < strong >, < label >, < q >, < var >, < cite >, < code >

Common inline block elements are:

The < img >, < input >

9-2

Element classification – block level elements

What are block-level elements? In HTML, <div>, <p>, <h1>, <form>, <ul>, and <li> are block-level elements. Setting display:block displays the element as a block-level element. The following code converts the inline element A to a block element. Using the a element from the page has block element characteristics.

a{display:block; }

Block-level element features:

1. Each block-level element starts on a new line, and the elements that follow it start on another line. (Really overbearing, one block level element occupies a row)

2. The height, width, line height, and top and bottom margins of the element can be set.

3. The width of the element is 100% of its parent unless a width is specified.

9-3

Element classification – inline elements

In HTML, <span>, <a>, <label>, <input>, <img>, <strong>, and <em> are typical inline elements. Of course block elements can also be set to inline with the display:inline code.

Features of inline elements:

1, and other elements on the same line;

2. The height, width, line height and top and bottom margins of elements cannot be set;

3. The width of an element is the unchangeable width of the text or image it contains.

9-4

Element classification – Inline block elements

Display: Inline-block sets the element to be an inline block element. (new in CSS2.1), <img>, <input> tags are such inline block tags.

Inline-block element features:

1, and other elements on the same line;

2. The height, width, line height, and top and bottom margins of the element can be set.

9 to 5

Box Model — Border (1)

The border of the box model is the line around the content and padding. You can set the thickness, style and color of the line (the border properties).

For example, the following code for div will set the border thickness to 2px, style to solid, and color to red:

div{

border:2px solid red;

}

Above is the abbreviation of the border code, which can be written separately:

div{

border-width:2px;

border-style:solid;

border-color:red;

}

Note:

1, border-style (border-style)

Dashed (dashed line) | dotted line (point) | solid (solid line).

2, the color in the border-color can be set to hexadecimal, for example:

border-color:#888; // Don’t forget the pound sign.

9-6

Box Model — Border (2)

Now I have a question, what if I want to set the border for the P tag separately, but do not set the border style for the other three sides? CSS styles allow you to style borders in only one direction:

div{border-bottom:1px solid red; }

You can also use the following code to set the other three edges, right and left:

border-top:1px solid red;

border-right:1px solid red;

border-left:1px solid red;

9-7

Box model — boundaries

The distance between elements and other elements can be set using margins. Boundaries can also be divided into up, right, down and left. The following code:

div{margin:20px 10px 15px 30px; }

You can also write them separately:

div{

margin-top:20px;

margin-right:10px;

margin-bottom:15px;

margin-left:30px;

}

If the top, bottom, left, and right boundaries are 10px; It could be written like this:

div{ margin:10px; }

If the top and bottom boundaries are both 10px and the left and right boundaries are both 20px, you could write it like this:

div{ margin:10px 20px; }

To summarize: the difference between padding and margin, padding is inside the border, and margin is outside the border.

9-8 –

Box model — Fill

The distance between the content of an element and the border can be set, called padding. Padding can also be divided into top, right, bottom and left. The following code:

div{padding:20px 10px15px 30px; }

The order must not be confused. You can write the above code separately:

div{

padding-top:20px;

padding-right:10px;

padding-bottom:15px;

padding-left:30px;

}

Fill the top, right, bottom, and left with 10px; You could write it this way

div{padding:10px; }

If the top and bottom fill is 10px and the left and right fill is 20px, you can write:

div{padding:10px 20px; }

9-9

Box model code shorthand

Remember that in the box model, margin, padding and border are set clockwise: top right, bottom left. Margin and padding examples are as follows:

margin:10px 15px 12px 14px; /* Set top to 10px, right to 15px, bottom to 12px, left to 14px*/

There are usually three abbreviations:

If top, right, bottom, left are the same, as in the following code:

margin:10px 10px 10px 10px;

Can be abbreviated as:

margin:10px;

Top and bottom values are the same, left and right values are the same, as in the following code:

margin:10px 20px 10px 20px;

Can be abbreviated as:

margin:10px 20px;

3. If the left and right values are the same, as follows:

margin:10px 20px 30px 20px;

Can be abbreviated as:

margin:10px 20px 30px;

Note: the padding, border and margin abbreviations are the same.

9-10

Color value abbreviation

CSS styles for colors can also be abbreviated. When you set the color to a hexadecimal color value, you can abbreviate half of it if the values of each two digits are the same.

Example 1:

p{color:#000000; }

Can be abbreviated to:

p{color: #000; }

Example 2:

p{color: #336699; }

Can be abbreviated to:

p{color: #369; }

CSS layout model

10-1

CSS layout model

With the basic concepts and types of CSS box models clear, we can delve into the basic model of web layout. The layout model, like the box model, is the most basic and core concept of CSS. However, the layout model is based on the box model, which is different from the CSS layout style or CSS layout template. If the layout model is the first, then CSS layout template is the last, is the external form of expression.

CSS consists of three basic layout models: Flow, Layer, and Float.

In a web page, there are three layout models for elements:

1. Flow Model

2. Float model

3. Layer Model

10-2

Flow Model (1)

Flow: top-down.

Let’s start with the Flow model. Flow is the default web layout. This means that the default HTML elements of a web page are distributed according to a flow model.

The flow layout model has two typical characteristics:

First, block elements are distributed vertically from top to bottom within the contained element, because block elements are 100% wide by default. In fact, block elements take place in rows. For example, the three block element labels (div, H1, P) in the code editor on the right are 100% wide.

Second, under the flow model, inline elements are displayed horizontally from left to right within the contained element at hand. (Inline elements don’t dominate a line like block elements.)

The inline element tags A, SPAN, em, and strong in the code editor on the right are all inline elements.

10-3 Floating model

Block elements are so domineering that they occupy a single line. Now what if we want to display two block elements side by side? Don’t worry, just set the element float to do it. Elements such as div, P, table, img, etc. can be defined as floating. The following code can display two div elements in a row.

div{

width:200px;

height:200px;

border:2px red solid;

float:left;

}

Note: The width of the block element must be set first, and the width of the elements to float must be smaller than the width of the container element.

10-4 What is the Layer model?

What is the layer layout model? Layer layout models are similar to the layer editing feature popular in PhotoShop, where each layer can be precisely positioned and manipulated, but in the web design world, layer layouts have failed to catch on because of the size of web pages. But there are advantages to using layer layouts locally on a web page. Let’s take a look at the layout of layers in HTML.

How to accurately position HTML elements in a web page, just like layers in PhotoShop can accurately position each layer. The CSS defines a set of positioning attributes to support the layer layout model.

Layer models come in three forms:

1. Position: Absolute

2, The position is relative.

3. Position: Fixed

1. Layer model — Absolute positioning (relative to parent class)

If you want to set the absolute position of an element in the layer model, you need to set position: Absolute. This statement drags the element out of the document flow. The left, right, top, and bottom attributes are then used for absolute positioning relative to the nearest parent containing block with the positioning attribute. If no such include block exists, relative to the body element, that is, relative to the browser window.

The following code moves the div element 100px to the right and 50px to the bottom relative to the browser window.

div{

width:200px;

height:200px;

border:2px red solid;

position:absolute;

left:100px;

top:50px;

}

2. Layer model — Relative positioning (relative to previous)

If you want to set the relative positioning of an element in the layer model, you need to set position:relative, which determines the element’s offset within the normal document flow using the left, right, top, and bottom attributes. Relative positioning is done by first generating an element static(and floating it like a layer) and then moving it relative to its previous position. The direction and magnitude of the move are determined by the left, right, top, and bottom attributes. The position before the offset remains unchanged.

The following code moves 50px down and 100px to the right.

#div1{

width:200px;

height:200px;

border:2px red solid;

position:relative;

left:100px;

top:50px;

}

3. Layer model — Fixed positioning (relative to web window)

Fixed a coordinate.

Fixed: Indicates a fixed position, similar to absolute position, but its relative moving coordinate is the view (the web page window in the screen) itself. As the view itself is fixed, it will not change along with the scroll bar of the browser window scroll, unless you are moving across the screen the screen position of the browser window, or change the display size of the browser window, so the fixed position of element is located in a certain position of the view within the browser window, will not be affected by the document flow, With the background – attachment: fixed? Property has the same function. The following code moves 100px to the right and 50px down relative to the browser view. And the position is fixed when you drag the scroll bar.

#div1{

width:200px;

height:200px;

border:2px red solid;

position:fixed;

left:100px;

top:50px;

}

10-5relative is used in combination with Absolute

Position: Absolute Can be used to position the set element relative to the browser (body). Have you ever wondered whether it is possible to position the set element relative to other elements? The answer is yes, of course you can. Use position:relative to help, but the following specifications must be followed:

1. The referenced element must be the predecessor of the referenced element:

<div id=”box2″> Position relative to reference element </div><! — Relative positioning element –>

</div>

As you can see from the code above, box1 is the parent of Box2.

2. The reference element must be added position:relative;

#box1{

width:200px;

height:200px;

position:relative;

}

3. Add position: Absolute to position and use top, bottom, left and right to offset the position.

#box2{

position:absolute;

top:20px;

left:30px;

}

This allows box2 to be positioned relative to its parent box1 (note that the reference is not the browser, but can be set freely).

If you have any questions about programming, please send me a private message and I will answer them in time.

Programming small stones, born to share dry goods! It is said that every young aspirant, high appearance level of Internet people are concerned about programming small stone.

History of the most complete HTML, CSS knowledge summary, easy to understand. Suitable for beginners

First, HTML + CSS basics

1-1

1 to 2

1-3

1-4

From 1 to 5

2-1

2-2

2-3

2-4

2-5

2-6

2-7

2-8 –

2-9

3-1

3-2

3-3

3-4

3-5

4-1

4-2

4-3

4-4

4 to 5

4 to 6

4 to 7

5-1

5-2

5-3

Note:

6-1, label selector

6-2, class selector

6-3, ID selector

6-4, the difference between classes and ID selectors

Six minus five, child selector

6-6, including (descendant) selectors

6-7, universal selector

6-8, pseudo-class selector

6-9, group selector

7-1

7-2

7-3, cascade

7-4, importance

8-1

8-2

9-1

9-2

9-3

9-4

9 to 5

Note:

9-6

9-7

9-8 –

9-9

9-10

10-1

10-2

10-3 Floating model

10-4 What is the Layer model?

10-5relative is used in combination with Absolute

If you have any questions about programming, please send me a private message and I will answer them in time.

Related Posts

A pass-through technique that cured me of my severe code cleanliness

React hooks Basic use

RequestAnimationFrame execution mechanism exploration