Home >Web Front-end >HTML Tutorial >Summary of several key points in html learning
Summary of several key points in html learning
- 无忌哥哥Original
- 2018-07-19 11:39:412602browse
Key summary about html
Block elements, inline elements, inline block elements
HTML can classify elements into There are three types of inline elements, block elements and inline block elements
Using the display attribute, the three can be converted arbitrarily
Block elements automatically Line break
Conversion method
(1)display:inline;Convert to inline element
(2)display:block;Convert to block element
(3)display:inline-block;Convert to inline block elementCompare
1.Inline element
The most commonly used inline element is span, and the others are only used under specific functions, modifying the font a4b561c25d9afb9ac8dc4d70affff419 and 5a8028ccc7a7e27417bff9f05adf5932 tags, and There are two tags, b96cac025db4031319c29e1eb68f19d6 and 2cdea26b4c3988e37d674b56660962a7, which can directly create a square effect without the help of similar movement attributes, which is very practical.
Characteristics of inline elements: (1) Setting width and height is invalid
(2) Setting margin is only effective in left and right directions, not up and down; padding setting is effective in both up, down, left and right directions, which will expand the space
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>行内元素</title>
<style type="text/css">
span {
width: 120px;
height: 120px;
margin: 1000px 20px;
padding: 50px 40px;
background: lightblue;
}
</style>
</head>
<body>
<sspan>不会自动换行</span>
<span>行内元素</span>
</body>
</html>2. Block element
The representative block element is p, others such as p, nav, aside, header, Footer, section, article, ul-li, address, etc. can all be implemented using p. However, in order to facilitate programmers to interpret the code, specific semantic tags are generally used to make the code more readable and easy to check for errors.
Characteristics of block elements: (1) Able to recognize width and height
(2) The top, bottom, left and right margins and padding are all valid for it
(3) Can automatically wrap lines
graduate down through the arrangement by default
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>块状元素</title>
<style type="text/css">
p {
width: 120px;
height: 120px;
margin: 50px 50px;
padding: 50px 40px;
background: lightblue;
}
</style>
</head>
<body>
<i>自动换行</i>
<p>块状元素</p>
<p>块状元素</p>
</body>
</html>3. Inline block elements
Comprehensive inline block elements It combines the characteristics of inline elements and block elements, but each has its own trade-offs. Therefore, inline block elements are used more often due to their characteristics in daily use.
Characteristics of inline block elements: (1) No automatic line wrapping
#
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>行内块状元素</title>
<style type="text/css">
p {
display: inline-block;
width: 100px;
height: 50px;
background: lightblue;
}
</style>
</head>
<body>
<p>行内块状元素</p>
<p>行内块状元素</p>
</body>
</html>Absolute path and relative path
Absolute path: refers to the absolute location in the directory, directly reaching the target location, usually the path starting from the drive letter- Relative path: refers to the path relationship with other files (or folders) caused by the path where this file is located
- Each one. Jump one level outward.
- Three ways to write styles
<p style="color:red">这里文字是红色。</p>
2. Embedded style: Embedded css style means that you can write css style code between tags <style type="text/css">span{color:red;}</style>
3. External style sheet: External css style (also called external style) is to write the css code in a separate external file. This css style file has the extension ".css" <link href="style.css" rel="stylesheet" type="text/css" />
Note:
css style file name must comply with the naming rules, such as main.css- rel=”stylesheet” type=”text/css” is a fixed writing method that cannot be modified
- css files can also be introduced using import in c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927
- , but this method cannot be operated with js
Absolute positioning, relative positioning and fixed positioning
2. You can use the position attribute to place an element anywhere on the web page.
Optional values:
- static: Default value, the element does not have positioning enabled
– relative: Turn on relative positioning
– absolute: Turn on absolute positioning
- fixed: Turn on fixed positioning
3. Relative positioning
——-Relative positioning will not change the original characteristics of the element. Block element or block element, inline or inline
- Relative positioning will raise the level of the element so that the element can cover elements in the text flow.
4. Absolute positioning
①Absolute positioning means that the element is positioned relative to the html element or its nearest ancestor positioning element.
②When the position attribute is set to absolute, the absolute positioning of the element is turned on.
③When absolute positioning is turned on, you can use the four attributes top, right, bottom, and left to position the element.
④Characteristics of absolute positioning:
——Absolute positioning will completely separate the element from the text flow.
——-The width of an absolutely positioned block element will be stretched by its content.
——Absolute positioning will turn inline elements into block elements.
——-Absolute positioning is relative to the nearest ancestor element that has positioning turned on. If all ancestors do not have positioning turned on, they will be positioned relative to the browser window.
——Generally, when using absolute positioning, a relative positioning will be specified for its parent element to ensure that the element can be positioned relative to the parent element.
——-Absolute positioning will increase the level of the element.
5. Fixed positioning
①Fixed positioning elements will be locked at a certain position on the screen. When the visitor scrolls the web page, the fixed elements will remain stationary on the screen
②When the position attribute is set to fixed, the fixed positioning of the element is turned on.
③When fixed positioning is turned on, the four attributes of top, right, bottom, and left can be used to position the element.
④ Fixed positioning is also a kind of absolute positioning. Other characteristics of fixed positioning are similar to absolute positioning.
Difference:
(1) Fixed positioning is always relative to the browser positioning.
(2) will be fixed at a certain position in the browser window and will not scroll with the scroll bar.
(3)IE6 does not support fixed positioning.
The above is the detailed content of Summary of several key points in html learning. For more information, please follow other related articles on the PHP Chinese website!