Home > Article > Web Front-end > The most comprehensive summary of HTML and CSS knowledge points in history, easy to understand. _html/css_WEB-ITnose

The most comprehensive summary of HTML and CSS knowledge points in history, easy to understand. _html/css_WEB-ITnose

WBOYOriginal: 2016-06-24 11:56:012158browse

1. Basics of html css
1-1
The relationship between Html and CSS
Learning the basic technologies of web front-end development requires mastering: HTML, CSS, and JavaScript languages. Let’s take a look at what these three technologies are used to achieve:
1. HTML is the carrier of web content. Content is the information that web page creators put on the page for users to browse, and can include text, pictures, videos, etc.
2. CSS style is performance. It's like a coat for a web page. For example, title font, color changes, or adding background images, borders, etc. to the title. All these things used to change the appearance of content are called presentations.
3. JavaScript is used to implement special effects on web pages. For example: the drop-down menu pops up when the mouse slides over it. Or the background color of the table changes when the mouse rolls over it. There is also a rotation of hot news (news pictures). It can be understood that animation and interaction are generally implemented using JavaScript.
1-2
1. HTML tags are not case-sensitive.

and

are the same, but lowercase is recommended because most programmers use lowercase.

1-3
An HTML file has its own fixed structure.

...
...

Code explanation :
1. is called the root tag, and all web page tags are in .
2. The tag is used to define the head of the document, which is a container for all head elements. Header elements include , <script>, <style>, <link>, <meta> and other tags. Header tags will be introduced in detail in the next section. 3. The content between the <body> and </body> tags is the main content of the webpage, such as <h1>, , <a>, <img> and other webpage content tag, 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> <title>...</title> <meta> ; <link> ; <style>...</style> ; <script>...</script> </head> 2. Code comments not only make it easier for programmers to recall the purpose of previous codes, but also help other programmers quickly understand the functions of your program, making it easier for multiple people to collaborate in developing web page code. Syntax:  3. CSS comment code Just like comments in Html, there are also comment statements in CSS: use /* comment statements / to indicate (use  in Html) 1-5 1. Semanticization: To put it simply, understand each tag (Under what circumstances can I use this tag to be reasonable?) For example, the title of an article on a web page must use a title tag, and the column names of each column on a web page can also use title tags. 2. The role of semantics 1). Easier to be indexed by search engines. 2). Make it easier for screen readers to read web content. 2. Understanding tags (Part 1) 2-1 If you want to display an article on a web page, you need the tag, and put the paragraphs of the article into the tag. Syntax: Paragraph text 2-2 <hx> tag to create the title of the article. There are 6 title tags in total, h1, h2, h3, h4, h5, and h6 are first-level headings, second-level headings, third-level headings, fourth-level headings, fifth-level headings, and sixth-level headings respectively. And in descending order of importance. <h1> is the highest level. Syntax: <hx>Title text</hx> (x is 1-6) As mentioned before, the title of the article can use the title tag. In addition, the title text of each column on the web page They can also be used in titles 2-3 With paragraphs and titles, now if you want to emphasize certain words in a paragraph, you can use or tag. But there is a difference in the tone of emphasis: means emphasis, means stronger emphasis. And in browsers, is expressed in italics by default, and is expressed in bold. Compared with the two tags, domestic front-end programmers currently prefer to use to express emphasis 2-4 , , Difference: 1. The and tags are used to emphasize keywords in a paragraph, and their semantics are emphasis. 2. The tag has no semantics. Its function is to set a separate style, encircle a paragraph, and then use CSS to set the style. 2-5 q tag, short text quote For example, if you want to quote a poem by a certain writer in an article on your web page, this will make your article more outstanding. Then the <q> tag is what you need. Syntax: <q>Quote text</q> 1. Note that the text to be quoted does not need to be quoted in double quotes. The browser will automatically add double quotes to the q tag. 2. Note that the real key point of using the <q> tag here is not its default style of double quotes (in this case, we might as well enter the double quotes on the keyboard ourselves), but its semantics: quoting someone else's words blockquote tag, long text quotation <blockquote> is also used to quote other people’s text. But it is a reference to long text The <q> tag is a reference to short text. For example, the <q> tag is used to quote a sentence. Syntax: <blockquote>Quote text</blockquote> The browser parses the <blockquote> tag in the indentation style 2-6 Line break tag The tag is equivalent to the carriage return in a word document. The dividing line tag<hr/> The <hr/> tag is also an empty tag like the tag, so there is only one start tag and no end tag. The default style of the <hr/> tag in the browser has thicker lines and gray color. Some people may find this style unsightly, but that’s okay. We will learn about these external styles in the future using CSS styles. After the table is created, it can be modified. 2-7 html special characters Space: (; semicolon is essential) 2-8 address tag , add address information to the web page Syntax: <address>Address information</address> For example: <address>No. 10 Dewai Street, Xicheng District, Beijing</address> ; The style displayed on the browser is italic. If you don’t like italics, of course you can. You can use css styles to modify it in later lessons. The default style of <address> tag 2-9 In websites that introduce language technology, it is inevitable to display some computer professional programming code on the web page. When the code is one line of code, you can use the <code> tag, as in the following example: <code>var i=i 300;</code> Syntax: <code>Code Language</code> Note: Generally, if you want to insert multiple The <code> tag cannot be used for lines of code. If it is multiple lines of code, the <pre class="brush:php;toolbar:false"> tag can be used. <pre class="brush:php;toolbar:false"> The main function of the tag: preformatted text. Text enclosed in a pre element usually preserves whitespace and newlines. If you use the previous method, you need to enter the sign for the carriage return and the for the space. Note: The <pre class="brush:php;toolbar:false"> tag is not only used to display the source code of the computer. You can use it when you need to pre-display the format in the web page. However, a common application of the <pre class="brush:php;toolbar:false"> tag is to Display the computer's source code. 3. Understanding tags (Part 2) 3-1 1. Unordered list ul-li is a list of information in no order. Syntax: <ul> <li>Message</li> <li>Message</li> ...... </ul> Example: <ul> <li>Wonderful Boy</li> <li>Beauty suddenly appears</li> < ;li>Soul-touching melody</li> </ul> The default style of ul-li displayed on the web page is generally: each li has a dot in front of it 2. Ordered list Syntax: <ol> <li>Information</li> <li>Information</li> ...... </ol> Example: The following is a popular course download ranking: <ol> <li>Front-end development interview experience Method</li> <li>Learning html from scratch</li> <li>JavaScript Complete Guide</li> </ol> <ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开 3-2 <div>容器标签 在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。 语法： <div>…</div> Determine the logical part: What is the logical part? It is a set of interrelated elements on the page. For example, an independent column section in a web page is a typical logical part. As shown in the figure below: The part marked with a red border in the figure is a logical part, and you can use the <div> tag as a container Note: <div> is a block-level element, that is, the browser Usually a line break is placed before and after the div element. 3-3 Five elements to create a table: table, tbody, tr, th, td 1. <table>…</table>: The entire table starts with the <table> tag and ends with the </table> tag. 2. <tbody>…</tbody>: When there is a lot of table content, the table will be downloaded and displayed a little bit, but if the <tbody> tag is added, the table will have to wait until all the table contents are downloaded. will be displayed. Such as the code in the code editor on the right. (This tag is basically not used much anymore) 3. <tr>...</tr>: A row of the table, so there are several pairs of tr and the table has several rows. 4. <td>…</td>: A cell in a table. One row contains several pairs of <td>...<td/>, indicating how many columns there are in one row. 5. <th>…</th>: A cell at the head of the table, table header. 6. The number of columns in the table depends on the number of data cells in a row. The table still needs to add some tags for optimization. You can add a title and summary <table summary="This table records inventory records from 2012 to 2013. The records include U disk and headphone inventory. Quantity"> <caption>Inventory record from 2012 to 2013</caption> 3-4 1. Use the <a> tag to link to other A page uses the <a> tag to implement a hyperlink. It can be said to be ubiquitous in web page production. As long as there is a link, there will be this tag. Syntax: <a href="Destination URL">Text displayed in the link</a> For example: <a href = "http://www.imooc. com">click here!</a> The above example is to click the click here! text, and the webpage links to the webpage http://www.imooc.com. < img> tag to insert images. Syntax: <img src="image address" alt="replacement text when download fails" title = "prompt text"> Example: <img src = "myimage .gif" alt = "My Image" title = "My Image" /> Explanation: 1. src: identifies the location of the image; 2. alt: specifies the descriptive text of the image, when When the image is not visible (when the download is unsuccessful), the text specified by this attribute can be seen; 3. title: Provides a description of the image when the image is visible (the text displayed when the mouse rolls over the image); 4. The image can be an image file in GIF, PNG, or JPEG format. 4. Form tags (interacting with users) 4-1 The form can transmit the data entered by the viewer to the server, so that the server-side program can process the form transmitted data. Syntax: <form method="Transmission method" action="Server file"> Explanation: 1.<form>: <form> tags appear in pairs , starting with <form> and ending with </form>. 2. action: The place where the data entered by the viewer is sent, such as a PHP page (save.php). 3.method: method of data transmission (get/post). 4-2 <input>Input box Text input box, password input box When the user wants to type letters, numbers, etc. in the form, they will Use text input box. The text box can also be converted into a password input box. Syntax: <form> <input type="text/password" name="name" value="text" /> </form> 1 , type: When type="text", the input box is a text input box; When type="password", the input box is a password input box. 2. name: Name the text box for use by the background programs ASP and PHP. 3. value: Set the default value for the text input box. (Generally used as a prompt) 4-3 Text field, supports multi-line text input When the user needs to enter a large piece of text in the form, text input is needed domain. Syntax: <textarea rows="Number of rows" cols="Number of columns">Text</textarea> 1. <textarea> tags appear in pairs, starting with <textarea> and ending with </ textarea>End. 2. cols: The number of columns in a multi-line input field. 3. rows: The number of rows in a multi-line input field. 4-4 Radio button, checkbox Syntax: <input type="radio/checkbox" value="value" name="name" checked="checked"/> 1. type: When type="radio", the control is a radio button When type="checkbox", the control is a check box 2. value: the value of submitting data to the server (used by background program PHP) 3. name: name the control for use by background programs ASP and PHP 4. checked: when set checked="checked" , this option is selected by default Note: The name values of radio buttons in the same group must be consistent, so that the radio buttons in the same group can function as radio selections. 4-5 Drop-down list box, save space Drop-down list is also often used in web pages, it can effectively save web page space. You can select both single and multiple selections. Syntax: <option value="Submit value">Option</option> The submitted value is the value submitted to the server, and the option is the displayed value. <form action="save.php" method="post" > <label>Hobbies:</label> <select> <option value="Reading">Reading</option> <option value="Travel" selected="selected">Travel</option> <option value="Sports">Sports</option> <option value="Shopping">Shopping</option> </select> ; </form> 4-6 Use the drop-down list box for multiple selections The drop-down list can also perform multiple selection operations. Setting the multiple="multiple" attribute in the <select> tag, can realize the multi-select function. When making multiple selections, press the Ctrl key and click at the same time to select multiple options. The following code: <form action="save.php" method="post" > <label>Hobbies:</label> < ;select multiple="multiple"> ; <option value="Read a book">Read a book</option> ">Travel</option> <option value="Sports">Sports</option> ">Shopping</option> </select> </form> 4-7 in There are two kinds of buttons that can be used in the form, namely: submit button and reset. 1. Submit button: When users need to submit form information to the server, they need to use the submit button. Syntax: <input type="submit" value="submit"> type: Only when the type value is set to submit, the button can submit value: displayed on the button The text of 2. Reset button, reset form information When the user needs to reset the form information to the initial state, for example, after the user enters "user name", they find that there is If there is an error, you can use the reset button to restore the input box to its initial state. Just set type to "reset". Syntax: <input type="reset" value="Reset"> type: The button has a reset effect only when the type value is set to reset value: button The text displayed on 5. css style 5-1 Understanding css style CSS stands for "Cascading Style Sheets", which is mainly used It is used to define the display style of HTML content in the browser, such as text size, color, font boldness, etc. The following code is as follows: p{ font-size:12px; color:red; font-weight:bold; } One benefit of using CSS styles is that by defining a certain style, text in different web page locations can have a unified font, font size, or color. 5-2 CSS code syntax css style consists of selectors and declarations, and declarations consist of attributes and values Selector {property: value} p{color:red;} Selector: Also known as selector, it specifies the elements in the web page to which style rules should be applied. For example, in this example, the text of all paragraphs (p) in the web page will turn blue. Other elements (such as ol) will not be affected. Declaration: What is enclosed in English curly brackets "{}" is the declaration, and the attributes and values are separated by English colons ":". When there are multiple statements, they can be separated by English semicolons ";", as shown below: p{font-size:12px;color:red;} 5-3 From the perspective of the form of CSS style code insertion, it can be basically divided into the following three types: Inline, embedded and external 1. Inline css style is to insert css code Write directly in the existing HTML tag, such as the following code: The text here is red. The css style code should be written in double quotes. If there are multiple css style code settings, they can be written together and separated by semicolons. The following code: The text here is red. 2. Embedded css style, means you can write the css style code in the <style type="text/css"></style> tag between. For example, the following code sets the text in the three tags to red: <style type="text/css"> span{ color:red; } </style> Embedded css styles must be written between <style></style>, and generally embedded css styles are written between <head></head> between. 3. External css style is written in a separate file External css style (also called external style) is to write the css code in a separate external In the file, this css style file has the extension ".css", and the <link> tag is used within the <head> (not within the <style> tag) to link the css style file to the HTML file, as shown below Code: <link href="base.css" rel="stylesheet" type="text/css" /> Note: 1. The css style file name starts with meaningful English letters Name it, such as main.css. 2. rel="stylesheet" type="text/css" is a fixed writing method and cannot be modified. 3. The <link> tag position is generally written within the <head> tag. Six, CSS selector Each css style definition consists of two parts, the form is as follows: selector { style; } in { The part before } is the "selector", and the "selector" specifies the object of the "style" in {}, that is, which elements in the web page the "style" acts on 6- 1. Tag selector Tag selector is actually a tag in html code. Such as <html>, <body>, <h1>, , <img> in the code editor on the right. For example, the following code: p{font-size:12px;line-height:1.6em;} The function of the above css style code is to set the font size of 12px for the p tag and the line spacing to 1.6em. 6-2, Class selector Class selector is the most commonly used in CSS style coding, such as the code in the code editor on the right: It can be implemented as "timid as The fonts of "Rat" and "Courage" are set to red. Syntax: .Class selector name{css style code;} Note: 1. Begin with an English dot 2. The name of the class selector can be named arbitrarily (but do not Chinese) How to use: Step 1: Use appropriate tags to mark the content to be modified, as follows: As timid as a mouse Chapter Step 2: Use class="class selector name" to set a class for the label, as follows: Scared as a Mouse Step 3: Setting The class selector css style is as follows: .stress{color:red;}/Add an English dot in front of the class/ 6-3, ID selector In many ways, ID selectors are similar to class selectors, but there are some important differences: 1. Set id="ID name" for the tag instead of class="class name". 2. The ID selector is preceded by a pound sign (#) instead of an English dot (.). 6-4, the difference between class and ID selector Similarity: can be applied to any element Difference: 1. The ID selector can only be used once in the 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: When I was in third grade, I was a little girl who was timid as a mouse and never dared to go to class. When I answer the questions raised by the teacher, I am afraid that the teacher will criticize me if I answer the wrong question. I never had thecourage to answer the teacher's questions. And the following code is wrong: In the third grade, I was still a timid little kid As a girl, I never dared to answer the teacher’s questions in class, for fear that the teacher would criticize me if I answered wrongly. I never had thecourage to answer the teacher's questions. 2. You can use the class selector word list method to set multiple styles for an element at the same time. We can set multiple styles for an element at the same time, but this can only be achieved using class selectors, not ID selectors (ID word lists cannot be used). The code below is correct (see the code editor on the right for the complete code) .stress{ color:red; } .bigsize{ font-size:25px ; } In the third grade ofIn the next semester, our class will have an open class... ; The function of the above code is to set the text color of the three words "Third Grade" to red and the font size to 25px The following code is incorrect (see the code editor on the right for the complete code) device) #stressid{ color:red; } #bigsizeid{ font-size:25px; } ArrivedThird gradeIn the next semester, our class will have an open class... The above code cannot be implemented as the three characters "Third grade" Set the text color to red and the font size to 25px. 6-5, sub-selector There is also a more useful selector sub-selector, namely the greater than symbol (>), which is used to select the child elements of the specified label element. For example, the following code: .food>li{border:1px solid red;} This line of code will add a solid red border to the sub-element li under the class name food. 6-6, Contains (descendant) selector Contains a selector, that is, adding spaces, which is used to select descendant elements under the specified label element. Such as the code in the code editor on the right: .first span{color:red;} Please note the difference between this selector and the child selector 1. The child selector (child selector) is only Refers to its direct descendants, or you can understand it as the first generation descendants that act on child elements 2. The descendant selector acts on all child descendant elements. Descendant selectors select with spaces, while child selectors select with ">". Summary: > Acts on the first generation descendants of the element, and spaces act on all descendants of the element. 6-7, universal selector The universal selector is the most powerful selector. It is specified with a () sign. Its function is to match any tag element in html. , use the following code to set the font color of any tag element in HTML to red: * {color:red;} 6-8, the pseudo-class selector is more interesting is a pseudo-class selector, why is it called a pseudo-class selector? It allows setting styles for tags that do not exist in html. For example, we can set the font color for the mouse-over state of a tag element in html: a: hover{color:red;} This line of code will cause the font color of "TINY AS A MOUSE" in the text content wrapped by the <a></a> tag to turn red when the mouse rolls over. 6-9, grouping selector When you want to set the same style for multiple label elements in html, you can use the grouping selector (,). The following code is the code on the right The h1 and span tags in the editor also set the font color to red: h1,span{color:red;} It is equivalent to the following two lines of code: h1{color:red;} span{color:red;} 7. CSS inheritance, cascading and particularity. 7-1 Some CSS styles are inherited, so what is inheritance? Inheritance is a rule that allows styles to be applied not only to a specific html tag element, but also to its descendants. For example, the following code: If a certain color is applied to the p tag, this color setting applies not only to the p tag, but also to all sub-element text in the p tag, where the sub-element is the span tag. But note that some css styles are not inherited. Such as border:1px solid red; 7-2 Determine which css style to use based on the weight The browser determines which css style to use based on the weight. The css style with the higher weight is used. The following are the weight rules: The weight of the label is 1, the weight of the class selector is 10, and the weight of the ID selector is up to 100. For example, the following code: p{color:red;} /The weight is 1/ p span{color:green;} /The 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 weight that is special - inheritance also has a weight but it is very low. Some literature suggests that it is only 0.1, so it can be understood as inheritance. has the lowest weight 7-3, cascading Let’s think about a problem: If there can be multiple css styles for the same element in an html file and these multiple css styles have What to do if the weight values are the same? Well, the cascading 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, it will be determined based on the order of these css styles. The last css style will be applied. . Such as the following code: p{color:red;} p{color:green;} In the third grade, I was still a ;A little girl who is as timid as a mouse. Finally, the text in p will be set to green. This cascading is easy to understand. It is understood that the later style will overwrite the previous style. So the previous CSS style priority is not difficult to understand: Inline style sheet (inside the tag) > Embedded style sheet (in the current file) > External style sheet (in the external file). 7-4, Importance Importance When we are doing web page code, there are some special situations where we need to set the highest weight for certain styles. What should we do? At this time we can use !important to solve it. The following code: p{color:red!important;} p{color:green;} In the third grade, I was still aA little girl who is as timid as a mouse. At this time, the text in the p paragraph will be displayed in red. Note: !important should be written in front of the semicolon 8. CSS formatting and typesetting 8-1 Text typesetting 1. Text typesetting - font We can use css styles to set style attributes such as font, font size, color, etc. for the text in the web page. Let's take a look at an example. The following code implements: setting the font for the text in the web page to Song Dynasty. body{font-family:"宋体";} Be careful not to set uncommon fonts here, because if the font you set is not installed on the user's local computer, the browser's default font will be displayed. (Because whether the user can see the font style you set depends on whether the font you set is installed on the user's local computer.) 2. Text layout - font size, color You can use the following code to set the text in the web page The font size is 12 pixels, and the font color is set to #666 (gray): body{font-size:12px;color:#666} 3. Text layout--bold We can also Use css styles to change the text style: bold, italic, underline, strikethrough. You can use the following code to set the text to be displayed in bold style. p span{font-weight:bold;} 4. Text layout - italic The following code can display text in italic style in the browser: p a{font-style:italic ;} In the third grade, I was a little girl who was <a>timid as a mouse</a>. 5. Text layout - underline In some cases, you want to set the text to underline style, which can visually emphasize the text. You can use the following code to achieve this: p a{text -decoration:underline;} In the third grade, I was a little girl who was <a>timid as a mouse</a>. Strikethrough is often seen on e-commerce websites. p a{text-decoration:line-through;} 8-2 Paragraph formatting 1. Paragraph formatting - indentation Paragraphs in Chinese text I used to leave two spaces blank for 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 typesetting - line spacing In this section we will learn about another line spacing attribute (line-height) that plays an important role in paragraph typesetting. The following code implements the setting Paragraph line spacing is 1.5x. p{line-height:1.5em;} 3. Paragraph layout--word spacing, letter spacing Text spacing and letter spacing settings: If you want to set text spacing or letter spacing in web page layout, you can use letter-spacing to achieve it, such as the following code: h1{ letter-spacing:50px; } ... <h1>The Great Gatsby</h1> Note: When this style is used in English words, it sets the spacing between letters. Word spacing settings: What if I want to set the spacing between English words? This can be achieved using word-spacing. The following code: h1{ word-spacing:50px; } ... <h1>welcome to imooc!</h1> 9. CSS box model 9-1 Element classification Before explaining CSS layout, we need to know some knowledge in advance. In CSS, label elements in html are generally divided into three different types Types of: block elements, inline elements, and inline block elements. Commonly used block elements are: <div>, , <h1>...<h6>, <ol>, <ul>, <dl>, <table>, <address>, <blockquote>, <form> Commonly used inline elements are: <a>, , , ;, , , <label>, <q>, <var>, <cite>, <code> Commonly used inline block elements are: <img>, <input> 9-2 Element classification--block-level elements What are block-level elements? In HTML, <div>, , <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 into a block element. The a element from the page has the characteristics of a block element. a{display:block;} Features of block-level elements: 1. Each block-level element starts on a new line, and subsequent elements also start on a new line. (It’s really overbearing, a block-level element occupies one row) 2. The height, width, line height, and top and bottom margins of the element can be set. 3. When not set, the width of an element is 100% of its parent container (the same as the width of the parent element), unless a width is set. 9-3 Element classification--inline elements In html, , <a>, <label>, <input>, < img>, and are typical inline elements. Of course, block elements can also be set to inline elements through the code display:inline. Characteristics of inline elements: 1. On the same line as other elements; 2. The height, width, line height, and top and bottom margins of the element cannot be set; 3. The width of the element It is the width of the text or image it contains and cannot be changed. 9-4 Element classification--inline block elements Inline-block elements (inline-block) have the characteristics of both inline elements and block elements. The code display:inline-block sets the element to an inline block element. (New in css2.1), <img> and <input> tags are such inline block tags. Features of the inline-block element: 1. It is on the same line as other elements; 2. The height, width, line height, top and bottom margins of the element can be set. 9-5 Box model - border (1) The border of the box model is the line surrounding the content and filler. You can set the thickness and style of this line and color (three attributes of the border). For example, the following code is used for div to set a border with a border thickness of 2px, a solid style, and a red color: div{ border:2px solid red; } The above is the border The abbreviated form of the code can be written separately: div{ border-width:2px; border-style:solid; border-color:red; } Note: 1. Border-style (border style) common styles are: dashed (dashed line) | dotted (dotted line) | solid (solid line). 2. The color in border-color (border color) can be set to hexadecimal color, such as: border-color:#888;//Don’t forget the hash sign in front . 9-6 Box model--border (2) Now there is a problem. If you want to set a lower border for the p tag separately, but do not set a border on the other three sides. What about the style? The css style allows you to set the style for the border in only one direction: div{border-bottom:1px solid red;} You can also use the following code to set the top, right, and left borders on the other three sides: border-top:1px solid red; border-right:1px solid red; border-left:1px solid red; 9-7 Box Model - Border The distance between an element and other elements can be set using margin. The boundaries can also be divided into upper, right, lower and left. The following code: div{margin:20px 10px 15px 30px;} can also be written separately: div{ margin-top:20px; margin-right:10px; margin-bottom:15px; margin-left:30px; } If the top, bottom, left and right borders are both 10px; you can write like this: div{ margin:10px;} If the top and bottom The border is the same 10px, and the left and right are the same 20px. You can 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 - padding The distance between the element content and the border can be set, which is called padding. Filling can also be divided into top, right, bottom and left. The following code: div{padding:20px 10px15px 30px;} Don’t mix up the order. You can write the above code separately: div{ padding-top:20px; padding-right:10px; padding-bottom:15px; padding-left:30px; } If the top, right, bottom, and left padding are all 10px; you can write like this div{padding:10px;} If the top and bottom padding are the same 10px, and the left and right padding are the same 20px, you can write like this: div{padding:10px 20px;} 9-9 Box model code abbreviation Remember when talking about the box model, margins (margin), padding ( padding) and border (border) settings. The margins in the four directions of top, bottom, left, and right are set in a clockwise direction: top, right, bottom, left. Examples of specific applications in margin and padding are as follows: margin:10px 15px 12px 14px;/The top is set to 10px, the right is set to 15px, the bottom is set to 12px, and the left is set to 14px/ Usually there are the following three An abbreviation method: 1. If the values of top, right, bottom and left are the same, as in the following code: margin:10px 10px 10px 10px; can be abbreviated as: margin:10px; 2. If the values of top and bottom are the same, and the values of left and right are the same, as in the following code: margin:10px 20px 10px 20px; can be abbreviated as: margin:10px 20px; 3. If the values of left and right are the same, as in the following code: margin:10px 20px 30px 20px; can be abbreviated to: margin:10px 20px 30px; Note: abbreviation for padding and border The method is the same as margin. 9-10 Color value abbreviation The css style about color can also be abbreviated. When the color you set is a hexadecimal color value, if each two-digit The values are the same and can be abbreviated in half. Example 1: p{color:#000000;} can be abbreviated to: p{color: #000;} Example 2: p{color: #336699 ;} can be abbreviated as: p{color: #369;} 10. CSS layout model 10-1 css Layout model Now that we understand the basic concepts and box model types of the CSS box model, we can delve into the basic model of web page layout. The layout model, like the box model, is the most basic and core concept of CSS. But the layout model is based on the box model and is different from what we often call CSS layout styles or CSS layout templates. If the layout model is the foundation, then the CSS layout template is the end, the external expression. CSS contains 3 basic layout models, summarized in English as: Flow, Layer and Float. In web pages, elements have three layout models: 1. Flow model (Flow) 2. Float model (Float) 3. Layer model (Layer) 10-2 Flow model (1) Flow: top-down. Let’s talk about the flow model first. Flow is the default web page layout mode. That is to say, the HTML web elements of the web page in the default state distribute the web page content according to the flow model. The fluid layout model has two typical characteristics: First, block elements will be vertically extended in order from top to bottom within the containing element, because in By default, the width of block elements is 100%. In fact, block elements all occupy positions in the form of rows. For example, the width of the three block element tags (div, h1, p) in the code editor on the right is displayed as 100%. Second point, under the flow model, inline elements will be displayed horizontally from left to right within the containing element. (Inline elements are not as domineering as block elements and occupy a line alone) The inline element tags a, span, em, and strong in the code editor on the right are all inline elements. 10-3 Floating model 块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。任何元素在默认情况下是不能浮动的，但可以用CSS定义为浮动，如div、p、table、img等元素都可以被定义为浮动。如下代码可以实现两个div元素一行显示。 div{ width:200px; height:200px; border:2px red solid; float:left; } <div id="div1"></div> <div id="div2"></div> 注意：设置浮动的同时一定要先设置块状元素的宽度，且需要浮动的几个元素宽度加起来一定要小于容器元素的宽度。 10-4 什么是层模型？ 什么是层布局模型？层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。 如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。 层模型有三种形式： 1、绝对定位(position: absolute) 2、相对定位(position: relative) 3、固定定位(position: fixed) 1，层模型--绝对定位（相对于父类） 如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。 如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。 div{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px; } <div id="div1"></div> 2，层模型--相对定位（相对于以前） 如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。 如下代码实现相对于以前位置向下移动50px，向右移动100px; #div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; } <div id="div1"></div> 3. Layer model - fixed positioning (relative to the web page window) Fixed a certain coordinate. Fixed: Indicates fixed positioning, similar to the absolute positioning type, but its relative movement coordinates are the view (web page window within the screen) itself. Since the view itself is fixed, it will not change as the scroll bar of the browser window scrolls, unless you move the screen position of the browser window on the screen, or change the display size of the browser window, so fixedly positioned elements will always be in A certain position of the view within the browser window that will not be affected by the flow of the document. This has the same function as the background-attachment:fixed? attribute. The following code can move 100px to the right and 50px down relative to the browser view. And the position remains fixed when dragging the scroll bar. #div1{ width:200px; height:200px; border:2px red solid; position:fixed; left:100px; top:50px; } 10-5 Relative and Absolute combined Friends have learned the relative positioning method in section 12-6: use position:absolute to achieve the setting After positioning an element relative to the browser (body), have you ever thought about whether it can be positioned relative to other elements? The answer is yes, of course. Use position:relative to help, but you must comply with the following specifications: 1. The reference-positioned element must be the predecessor element of the relatively positioned element: <div id="box1"> <div id="box2">Positioned relative to the reference element</div> </div> From the above code, we can see that box1 is the parent element of box2 (the parent element is of course also the predecessor element). 2. Position:relative; #box1{ width:200px; height:200px; position:relative; } 3 , add position:absolute to the positioning element, and then you can use top, bottom, left, and right for offset positioning. #box2{ position:absolute; top:20px; left:30px; } In this way, box2 can be positioned relative to the parent element box1 (note the reference here It doesn’t need to be a browser, but can be set freely). </div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng">Statement：<div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox">Previous article：<a class="dBlack" title="After submitting the form using submit method in html, how to get the value out on another page_html/css_WEB-ITnose" href="http://m.php.cn/faq/276328.html">After submitting the form using submit method in html, how to get the value out on another page_html/css_WEB-ITnose</a>Next article：<a class="dBlack" title="After submitting the form using submit method in html, how to get the value out on another page_html/css_WEB-ITnose" href="http://m.php.cn/faq/276330.html">After submitting the form using submit method in html, how to get the value out on another page_html/css_WEB-ITnose</a></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><a href="http://m.php.cn/article.html" class="bBlack">See more</a><div class="clear"></div></div><ul class="nphpXgwzList"><li><a href="http://m.php.cn/faq/348757.html" title="Summary of Html knowledge" class="aBlack">Summary of Html knowledge</a><div class="clear"></div></li><li><a href="http://m.php.cn/faq/348804.html" title="How to learn HTML quickly" class="aBlack">How to learn HTML quickly</a><div class="clear"></div></li><li><a href="http://m.php.cn/faq/348873.html" title="The difference between html xhtml xml" class="aBlack">The difference between html xhtml xml</a><div class="clear"></div></li><li><a href="http://m.php.cn/faq/348884.html" title="The difference between src and href attributes" class="aBlack">The difference between src and href attributes</a><div class="clear"></div></li><li><a href="http://m.php.cn/faq/348902.html" title="About HTML5 and CSS replacement use" class="aBlack">About HTML5 and CSS replacement use</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt="">Public welfare online PHP training，Help PHP learners grow quickly！</div><div class="footermid"><a href="http://m.php.cn/about/us.html">About us</a><a href="http://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="http://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"> © php.cn All rights reserved </div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append(""); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>