CSS notes
1, CSS overview
1.CSS is Cascading Style Sheets.
2.CSS is a style sheet language used to control the appearance of HTML documents and define the layout * * (html is the basic content of web pages and CSS is to control and decorate the appearance of web pages) * *. For example, CSS involves font, color, margin, height, width, background image, advanced positioning, etc.
3. The content of the page can be separated from the presentation. The page content is stored in the HTML document, and the css used to define the presentation is in a. css file or a part of the HTML document
advantage:
1. Separate content and expression
2. The repeated code can be extracted and called
2, Basic grammar
1. Inline style sheet
In line style sheets are also called inline style, inter line style and embedded style. The element style is set through the style attribute of the label. Its basic syntax format is as follows:
< tag name style = "attribute 1: attribute value 1; attribute 2: attribute value 2; attribute 3: attribute value 3;" > content
Note: each tag has a style attribute, in which CSS syntax is written. The decorated tag is directly in the tag attribute line, and the priority is the highest
2. Embedded style sheet
Embedded is to write CSS code in the head tag of HTML document and define it with style tag
Note: the syntax of an embedded style sheet is the same as that of an external style sheet
3. Outreach style sheet
External style sheet is to put all styles in one or more external style sheet files with. CSS extension, and link the external style sheet files to HTML documents through the link tag
Note: the syntax of an embedded style sheet is the same as that of an external style sheet
4. Advantages and disadvantages of various style sheets
5. Application code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <style type="text/css"> /* inline style */
p{color: aqua;font-size: 20;}
</style> -->
<link rel="stylesheet" type="text/css" href="css/css1.css"/> <!-- Associate external style sheets Same syntax as embedded style sheets -->
</head>
<body>
<!-- <p>
<b>
<font size="15" color="aqua">In the Quiet Night</font> The ordinary modifier is very troublesome
</b>
</p> -->
<p style="color: aqua;font-size: 20;">In the Quiet Night</p> <!-- Row level style sheets are written directly in labels. The highest priority syntax is key value pairs -->
<p>In the Quiet Night</p>
<p>In the Quiet Night</p>
<p>In the Quiet Night</p>
<!-- Summary:
Inline style sheets: less use, higher priority
Inline style sheets: used during development testing
External style sheets: development end use
-->
</body>
</html>
3, Selector (common)
Explanation: used to associate a style sheet with a specified label for selection
1. Label selector
The label selector allows you to select all specified labels in the page
Syntax: tag name {} (a selector corresponds to a class of tags, one to many)
2.id selector
id selector: select a unique tag through the id attribute value of the tag
Syntax: #id attribute value {} (a selector corresponds to a unique tag with ID, and ID cannot be repeated one-to-one)
3. Class selector
Class selector: select a group of tags through the class attribute value of the tag
Syntax:. Class attribute value {} (different from id selector, selector can be one to many, id cannot be repeated, but class can be repeated one to many)
4. Universal selector
Universal selector: it can be used to select all labels in the page
Syntax: * {} (select all tags in the web page)
5. Selector combination
Selector combination: through selector grouping, you can select the labels corresponding to multiple selectors at the same time
Syntax: selector 1, selector 2, selector N {}
Example:
#p1,.p2,.p3,p{color: chartreuse;} / * selector combination*/
6. Selector priority
(inline style sheet) > ID selector > class selector > label selector > wildcard selector
7. Specific code demonstration
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{color: aqua;} /* The label selector uses the label name as the basis for selection */
#P1 {color: red;} / * id selector ID cannot be duplicate*/
.p2{color: brown;}
.p3{color: blue;} /* Class selector classes can be repeated */
*{color: darkgreen;} /* The wildcard selector selects the lowest priority of all tags in the web page*/
/* Selector priority (inline style sheet) > ID selector > class selector > label selector > wildcard selector */
#p1,.p2,.p3,p{color: chartreuse;} / * selector combination*/
</style>
</head>
<body>
<p id="p1">In the Quiet Night</p>
<p class="p2">abed, I see a silver light,</p>
<p class="p3">It's suspected to be frost on the ground.</p>
<p class="p2">look at the bright moon,</p>
<p class="p3">Bow your head and think of your hometown.</p>
</body>
</html>
4, Basic properties
Note: the attributes in CSS basically exist in the form of key value pairs. It is recommended to write only one attribute in a line
1. Text
● color: font color
● font size: font size
● font family: font
● text align: text alignment
● text decoration: line through: defines a line under the text
● text decoration: underline: defines a line under the text
● text decoration: none: text defining the standard
● font-style: italic; Italic text
● font weight: font weight
● line height: set the line height
● letter spacing can be specified
● text indent is used to set the indent of the first line
Code examples and comments:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#p1{
/* Note: it is best to put only one attribute key value pair in a row */
color: #A52A2A; /* Colour*/
font-size: 30px; /* font size */
font-weight: 900; /* Bold font */
/* text-decoration: line-through; /* Text modifier strikethrough */
text-decoration: underline; /* Text modifier underline */
text-align: center; /* Text alignment centered*/
font-family: official script; /* Set font */
font-style: italic; /* Set font style Italic*/
line-height: 50px; /* Set line height line height refers to the height of the whole line. The font size does not change and is vertically centered at the top and bottom of the whole line. For example, in this case, if the font size is 30px and the line height is 50px, the font is centered at the top and bottom of the whole line, with 10px left */
letter-spacing: 20px; /* Space between characters */
text-indent: 40px; /* The first line is indented by two characters. If the font size is 30px in this case, this attribute should be 60px. If it is not 60px, the indent will not be two characters. In order to avoid this trouble, we use an em unit, as shown below*/
text-indent: 2em; /* An em represents the size of a character */
}
a{ /* Remove underline from hyperlinks */
text-decoration: none;
}
</style>
</head>
<body>
<p id="p1">An external style sheet places all styles in one or more.CSS In an external style sheet file with an extension of link Labels link external style sheet files to HTML In document.An external style sheet places all styles in one or more.CSS In an external style sheet file with an extension of link Labels link external style sheet files to HTML In document.An external style sheet places all styles in one or more.CSS In an external style sheet file with an extension of link Labels link external style sheet files to HTML In document.An external style sheet places all styles in one or more.CSS In an external style sheet file with an extension of link Labels link external style sheet files to HTML In document.An external style sheet places all styles in one or more.CSS In an external style sheet file with an extension of link Labels link external style sheet files to HTML In document.</p>
<p id="p2">An external style sheet places all styles in one or more.CSS In an external style sheet file with an extension of link Labels link external style sheet files to HTML In document.An external style sheet places all styles in one or more.CSS In an external style sheet file with an extension of link Labels link external style sheet files to HTML In document.An external style sheet places all styles in one or more.CSS In an external style sheet file with an extension of link Labels link external style sheet files to HTML In document.An external style sheet places all styles in one or more.CSS In an external style sheet file with an extension of link Labels link external style sheet files to HTML In document.An external style sheet places all styles in one or more.CSS In an external style sheet file with an extension of link Labels link external style sheet files to HTML In document.</p>
<p id="p3">An external style sheet places all styles in one or more.CSS In an external style sheet file with an extension of link Labels link external style sheet files to HTML In document.An external style sheet places all styles in one or more.CSS In an external style sheet file with an extension of link Labels link external style sheet files to HTML In document.An external style sheet places all styles in one or more.CSS In an external style sheet file with an extension of link Labels link external style sheet files to HTML In document.An external style sheet places all styles in one or more.CSS In an external style sheet file with an extension of link Labels link external style sheet files to HTML In document.An external style sheet places all styles in one or more.CSS In an external style sheet file with an extension of link Labels link external style sheet files to HTML In document.</p>
<a href="">Baidu</a>
<a href="">Baidu</a>
<a href="">Baidu</a>
<a href="">Baidu</a>
</body>
</html>
2. Background
● background color
● background image background picture note: background picture has priority over background color
● background repeat background repeat (control the repetition of background pictures when the size of background pictures is not enough to cover the whole label) Note: background pictures cover the whole label size by default
● background size the size of the background picture (() () there can be two parameters, namely, length and width, or only one parameter, the side length of the square)
● background- position
Note: background position controls the position of the background picture and text align controls the position of the text
Code examples and comments:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
p{
height: 800px; /* Label length */
width: 1000px; /* Label width */
background-color: aquamarine; /* background color */
background-image: url(img/bg.jpg); /* Background picture the background picture has priority over the background color. By default, the background picture is repeatedly spread over the whole label size*/
background-repeat: no-repeat; /* When the size of the background picture is not enough to cover the whole label, control the repetition of the background picture */
background-size: 500px; /*Controls the size of the background picture. The default is at the top left. This property can have one or two parameters. When there is one parameter
When a square has two parameters, it may be a square or a rectangle */
background-position: center; /* Position of background picture text align: Center; This controls the position of the text */
}
</style>
</head>
<body>
<p></p>
</body>
</html>
3. List
Lists are divided into ordered lists and unordered lists UL Li (unordered) ol Li (ordered)
Properties in the list:
● list style image sets the image as the list item flag. (path required for flag of replacement list item)
For example: list style image: URL (IMG / img. JPG);
● list style position sets the position of the list item flag in the list. (outside and inside are more important. Outside is the flag of the list item outside the list content, and inside is the flag of the list item inside the list content)
For example: list style position: outside;
● list style type sets the type of list item flag.
● list style shorthand attribute.
For example: list style: none URL (IMG / img. JPG) inside;
Code examples and comments
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li{
list-style-type: none; /* List item style */
list-style-image: url(img/img.jpg); /* Change the list header label to a picture */
list-style-position: outside; /* outside The list header label is outside the list content inside the list header label is inside the list content */
list-style: none url(img/img.jpg) inside; /* CSS Abbreviation (regardless of order) */
}
</style>
</head>
<body>
<ul> <!-- Unordered list -->
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</body>
</html>
4. Pseudo class
CSS pseudo classes are specifically used to represent a special state of tags. Move the mouse in, click and out. When we need to set the style for the labels in these special states, we can use pseudo classes (pseudo elements)
Syntax of pseudo class:
The: hover pseudo class represents the state of the mouse moving in (no matter which label is used): hover is just a selector)
: active indicates the clicked state
: focus adds a style to a label that has keyboard input focus. (input component, automatically switch to this style sheet when getting mouse focus) Note: only for text box (because only text box can get mouse focus)
Code examples and comments:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a{
color: aqua; /* Set the properties (color) for the original label */
}
a:hover{
color: red; /* Mouse in */
}
a:active{
color: blueviolet; /* Mouse click */
}
.txt:focus{ /* focus Is the mouse focus on the text box */
color: brown; /* text color */
background-color: #FF0000; /* Text box background color*/
}
</style>
</head>
<body>
<!-- Note: pseudo class in style When used in part, the colon is preceded by a selector, such as: a:hover{} Before colon a It's a selector -->
<!-- Labels have different states. The mouse moves, clicks and moves out. Sometimes blood medicine adds styles to labels in different states. Pseudo classes (pseudo elements) can be used -->
<!-- There are three pseudo classes hover active focus -->
<a href="">Baidu</a>
<a href="">Baidu</a>
<a href="">Baidu</a>
<a href="">Baidu</a>
<a href="">Baidu</a>
<input type="text" class="txt" />
</body>
</html>
5. Transparency
The attribute that defines the transparency effect is opacity.
The opacity property sets the opacity level of the label to 1. Specified opacity: from 0.0 (fully transparent) to 1.0 (fully opaque). When transparent, the label position exists in the page
5, Label classification and display properties
1. Block level label
Block level label: no matter how much content, it will occupy a line alone. You can set the width and height.
For example, p, h1, ul, ol, hr, etc.
For example: p label: the default width is the same as that of the parent label, and the default height is 0, or the content is the height of the content
2. Row level label
Row level labels: labels that only occupy their own size will not occupy one row, even if the width and height settings are invalid.
For example, font, b, i, a, etc.
If a tag uses carriage return to wrap lines on different hyperlinks, it is equivalent to adding a space in the middle
3. Row level block label
Row level block label: it does not occupy one row, but the width and height can be set
Note: block level labels are generally used, including row level labels
Special:
a labels can contain any label
p labels cannot contain any block level labels
4.display attribute
You can change the type of label
display: none hide the tag (the tag will disappear completely in the page)
: inline sets the label to a row level label
: block sets the label to a block level label
: inlineblock sets the label to line level fast label
Codes and notes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--
Block level labels: each will occupy a single line
For example: p h1 ul ol hr
Width and height can be set
p Label: the default width is the same as that of the parent label. The default height is 0 or the height of the content. Width and height can be set
Row level label: it only occupies its own size, not one row
For example: font b i a
Row level block label: width and height can be set if it does not occupy a row
For example: img input
Note: block level labels are generally used, including row level labels
Special: a A label can contain any label
p Labels cannot contain any block labels
display Properties:
You can change the type of label
display: none； That is, the label is not transparent
: inline； Change to row level label
:block; Change to block level label
: inlineblock； Change to line level fast label
-->
<body>
<p></p>
<a href="">
<p>aaa</p>
</a>
<p>
<h1></h1>
</p>
</body>
</html>
6, div and span Tags
1.div
div: block level labels (h1, p are also block level labels) have default styles or other defects. div can contain any labels without any default styles. It is mainly used for web page layout
2.span
span: row level tags do not have any additional styles. The content and proportion are used to select the text on the web page and add CSS styles to the text
For example:
(wrap the text with span to add style to the text)
Codes and notes
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- div label: Block level label( h1，p It is also a block level label (with default style or other defects) It can contain any label without any default style. It is mainly used for web page layout span label: How large is the content of row level labels It is used to select the text on the web page and add it to the text CSS style For example: use span Wrap text to add style to text No replaceable label: table form hyperlink picture div span --> <body> </body> </html>
Irreplaceable label: [important]
Table form hyperlink picture div span
7, Box model
● when CSS handles web pages, it thinks that each tag is contained in an invisible box.
● if we think of all the labels as boxes, then the layout of the web page is quite simple
Put the box.
● we only need to place the corresponding box in the corresponding position in the web page to complete the layout of the web page.
A box will be divided into several parts:
Content area: the area where content is placed
padding: the distance from the content area to the border
Borders: walls
Margin: the distance between one label and another label (the margin can coincide, so only one or both labels can be set for the next two labels)
Label size = content area size + inner margin size + border size
width and height only set the size of the content area, not the size of the whole box. If the label does not set the inner margin size and border size, the size of the box is equal to the size of the content area
The width and weight attributes apply only to block level labels (including row level block labels)
1. content area
● content area refers to the area where the content is placed in the box, that is, the text content in the label, sub label
All tags exist in the content area.
● if the inner margin and border are not set for the label, the content area size is consistent with the box size by default.
● you can set the size of the content area instead of the size of the whole box through the width and height attributes.
● the width and height attributes are only applicable to block labels (including row level blocks)
2. padding
● as the name suggests, the inner margin refers to the space within the label content area and the frame.
● the inner margin will affect the size of the whole box.
Use the padding property to set the inside margin of the label.
For example:
padding-left:10px;
padding-right:10px;
padding:10px 20px 30px 40px
This will set the inner margins in the top, right, bottom and left directions of the label.
Code examples and comments:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- Box model CSS Dealing with web pages is that it thinks that each tag is contained in an invisible box We divide a box into several parts Content area( content) Area where content is placed Inner margin( padding) Distance from content area to border Border( boder) wall Outer margin( margin) Distance from one label to another Label size=Content area size+Inner margin size+Border size width and height Just set the size of the content area, not the size of the entire label If the label does not set the inner margin size and border size, the box size is equal to the content area size padding: -top -left -right -bottom padding: 10px 5px； Upper and lower inner margin Left and right inner margin padding: 10px 5px 15px 20px； top margin Right margin margin-bottom left (Clockwise) --> </head> <body> </body> </html>
3. Border
-
You can create a border around the label, which is the outermost visible box of the label.
-
You can use the border attribute to set the border of the box. When decorating, you need to define three attributes: border color, border width and border style
For example:
border-color: red; border-width: 2px; border-style: solid;
It can also be abbreviated:
border: red 2px solid; //This is a short form of css. The attributes are in no order
-
You can also use border top / left / right / bottom to specify the borders in the top, right, bottom and left directions respectively
For example:
Note: these four borders also have the three most basic attributes of boder
-
Borders can be styled:
dotted dashed solid double groove
Border radius sets the four corners as rounded borders
Border top left radius sets the top left corner border
- outline:none; remove the text box and focus on the default style
4. margin
margin: 10px; /* The outer margin is set to 10px up, down, left and right */ margin: 10px 5px; /* The upper and lower outer margins are set to 10px, and the left and right outer margins are set to 5px */
-
The distance between one label and another label will not affect the size of the label, but the position of the label
-
The outer margin will not affect the overall size of the box, but will affect the position of the box and the actual control range of the box.
-
The outer margin is the space between the label border and the surrounding labels. You can set the outer margin by using the margin property. The usage is similar to padding, and also provides four directions
margin-top/right/bottom/left.
margin-top: 1px; margin-left: 1px; margin-right: 1px; //Use these four attributes to adjust the layout style margin-bottom: 1px;
The value of margin can be negative.
Margin can also be auto, and the outer margin can be set to the maximum value. When the left and right outer margins are set to auto, the browser will set the left and right outer margins to be equal (the upper and lower cannot give the auto value because there is no length limit, and the outer margin cannot be set to the maximum value automatically)
When the vertical setting is auto, the value is 0, so the horizontal center can also be abbreviated as margin:0 auto. (label horizontal center is commonly used)
5. Clear the browser's default style
- In order to have a better display effect when there is no style in the page, the browser has set some default margin and padding for many labels. Normally, we don't need to use these default styles. When we need to use them, we will reset them as needed. Therefore, we often need to add them into the browser before writing styles The default margin and padding are all removed
It is usually written at the beginning of the style tag:
*{ margin: 0;
padding: 0;
}
Why do you write that?
Because the * {} universal selector has the lowest priority
Code examples and comments:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* Remove the default outer margin and inner margin of the label */
*{
margin: 0px;
padding: 0px;
}
.div1{
background-color: #008000;
width: 178px;
height: 178px; /* Set the content area size*/
padding: 10px;
border: 1px solid red ; /* Set borders in four directions*/
/* Outer margin: the distance from one label to another
It will not affect the size of the label, but the position of the label */
}
.div2{
background-color: #008000;
width: 178px;
height: 178px; /* Set the content area size*/
padding: 10px;
border: 1px solid red ; /* Set borders in four directions*/
/* margin-top: 50px;
margin-left: 50px;
margin-bottom: 50px; */
/* margin: 10px; */
/* margin-left: auto;Set the value of the outer margin to auto on the left and right, and the outer margin will automatically be the maximum value
margin-right: auto;*/
/*margin-top:100px; The upper and lower outer margins can only be given specific values
margin-bottom: 100px;*/
/* margin: auto; When the top and bottom are auto, the value is 0*/
margin: 10px auto;
}
</style>
</head>
<body bgcolor="#00FFFF">
<!-- <div class="div1">
</div> -->
<div class="div2">
</div>
sss
<p>ssss</p>
</body>
</html>
Note: set the length and width of a label. If you set the size of the content area, if you do not set the inner and outer margins, they are 0 by default
8, Document flow (this concept is required for both floating and positioning) [important]
-
Document flow refers to the position occupied by the labels in the document when they are arranged. Divide the form into one line from top to bottom, and arrange the labels in each line from left to right, that is, the document flow.
-
That is, in the document flow, the label will be close to the right of the previous label by default. If the right is not enough to put down the label, the label will start another line and continue to be placed from left to right in a new line.
-
In this way, each block label will start a new line, so it will become more troublesome if we want to layout in the document flow.
Web page layout breaks this default document flow by floating and positioning
9, Float
1. Floating concept
-
The so-called floating refers to making the tag separate from the original document stream and float in the parent tag
(floating: it was originally two-dimensional plus floating, just like when a z-axis was added to the web page to become three-dimensional, the original label floated, and a two-dimensional plane was added in three-dimensional, and the label floated on this plane)
/* Floating uses the float attribute. Optional values: none: do not float left: float left right: float right */
float: right;
float:left;
float: none;
-
Let the tag float away from the original document stream and release the original space. Row level labels and block level labels can be floated. The width of the floated label is the width of the content, which can be set
-
When a label floats, the label below it moves up.
2. Floating problem
Floating will completely separate the label from the document flow, that is, it will no longer be in the document. After the occupied position label floats, it will completely separate from the document flow. At this time, it will no longer affect the height of the parent label. That is, the floating label will not open the parent label (height collapse)
terms of settlement:
1. Set a height for the parent label
2. Clear floating: automatically open the parent label according to the height of the floating label
3. Clear float
- The clear attribute can be used to clear the influence of floating around the label on the label, and the position of other labels does not change.
Optional values:
Left: ignore left float
Right: ignore right float
both: ignore all floats
4. A floating case
code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.dh{
background-color: #0000FF;
float: left;
width: 200px;
text-align: center;
padding: 10px 0px;
color: white;
font-weight: bold;
}
.dh:hover{
background-color: #00FFFF;
}
.dh_box{
margin: 10px auto;
width: 1000px;
}
</style>
</head>
<body>
<!--
Floating problem: Does not take up space in the original document stream,The label below will move up
Height collapse,Do not occupy the original space,As a result, the parent label does not open
terms of settlement:1.We set a height for the parent label
2.Clear float, Automatically open the parent label according to the height of the floating label
-->
<div class="dh_box">
<div class="dh">home page</div>
<div class="dh">Company news</div>
<div class="dh">Product introduction</div>
<div class="dh">contact us</div>
<div class="dh">About us</div>
<div style="clear: left;"></div> <!-- Clear float -->
</div>
<div style="background-color: #7FFF00;width: 700px; height: 100px; margin: auto;">
</div>
</body>
</html>
effect:
10, Positioning
- The basic idea of positioning is very simple. It allows you to define the position of the label relative to its normal position, or relative to the position of the parent label, another label, or even the browser window itself.
1. relative positioning
Relative positioning:
- Relative positioning is a very easy concept to grasp. Moving relative to its starting point, the original position is still occupied after moving. You can use position:relative; When relative positioning is enabled, the four properties left right top bottom are used to set the offset of the label
Characteristics of relative positioning:
When the position property of the tag is set to relative, the relative positioning of the tag is enabled
1. When the relative positioning of the label is turned on without setting the offset, the label will not change
2. Relative positioning refers to positioning relative to the original position of the label in the document stream
3. Relatively positioned tags will not be separated from the document flow
Code and notes:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1{
background-color: #008000;
width: 100px;
height: 100px;
position: relative;/* Relative positioning is enabled. If no offset is given, the label will not change
Move relative to the original position of the label,
Tags do not break away from the original document stream
*/
left: 100px;
top: 100px;
}
.div2{
background-color: red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
</body>
</html>
2. absolute positioning
Absolute positioning:
- Absolute positioning does not take up space. Tags with * * absolute positioning will be separated from the original document stream and float, so they will visually overlap with other tags * *. You can use position: absolute; Enable absolute positioning, left right, top and bottom to set the offset of the label
Absolute positioning features:
1. When absolute positioning is enabled, the label will be separated from the document flow
2. After the absolute positioning is turned on, if the offset is not set, the position of the label will not change
3 * * *. Absolute positioning refers to positioning relative to the nearest ancestor tag with positioning enabled (generally, when the absolute positioning of child tags is enabled, the relative positioning of parent tags will be enabled at the same time). If all ancestor tags do not have positioning enabled, they will be positioned relative to the browser window**
4. Absolute positioning will raise the label to one level
5. Absolute positioning will change the nature of labels, and row level labels will become block labels
Code and notes:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1{
background-color: #008000;
width: 100px;
height: 100px;
position: absolute;
left: 100px;
top: 100px;
/*
position: absolute; Open the absolute positioning of the label
After opening, the tag is separated from the original document flow
left top right bottom Set offset
Absolute positioning refers to positioning relative to the nearest parent label that has been opened for positioning. (how can parent labels enable positioning? Just enable relative positioning and absolute positioning, regardless of whether the offset is set or not)
If the parent label does not turn on positioning, it will be positioned with the browser frame as the reference
(In general, the absolute positioning of child labels is enabled, and the relative positioning of parent labels is enabled)
*/
}
.div2{
background-color: red;
width: 100px;
height: 100px;
}
.div3{
background-color: #7FFF00;
width: 200px;
height: 200px;
position: relative;
}
</style>
</head>
<body>
<div class="div3">
div3
<div class="div1">div1</div>
</div>
<div class="div2">div2</div>
</body>
</html>
3. The whole screen is vertically centered
code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1{
background-color: aquamarine;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
/* Because the positioning is based on its edges and corners, if you want to center it, you have to set other values according to the size of the label */
}
</style>
</head>
<body>
<div class="div1">
lallala
</div>
</body>
</html>
effect:
4. fixed
- The position of the element is fixed relative to the browser window. Even if the window is scrolling, it will not move:
Code and notes:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
background-color: #FAEBD7;
width: 50px;
height: 50px;
position: fixed;
bottom: 100px;
right: 100px;
}
body{
margin: 1000px;
}
</style>
</head>
<body>
<div name="top" id="div2">
</div>
<a href="#top"><div id="div1">
Fixed positioning
</div>
</a>
</body>
</html>
effect:
5. The browser returns to the top quick positioning case (anchor point uses fixed positioning)
code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <a name="top"></a> <!-- Escape of special symbols --> HTML label <b>The function of the label is bold text ® <a href="#P1 "> Product 1</a> <a href="#P2 "> Product 2</a> <a href="#P3 "> Product 3</a> <a href="#P4 "> Product 4</a> <a href="#P5 "> Product 5</a> <!-- hr Split line --> <hr> <h3> <a name="p1">Product 1</a> </h3> <img src="img/1.png"> <hr> <h3> <a name="p2">Product 2</a> </h3> <img src="img/2.png"> <hr> <h3> <a name="p3">Product 3</a> </h3> <img src="img/3.png"> <hr> <h3> <a name="p4">Product 4</a> </h3> <img src="img/4.png"> <hr> <h3> <a name="p5">Product 5</a> </h3> <img src="img/5.png"> <a href="#Top "style =" position: fixed; right: 20px; bottom: 20px; "> return to top</a> </body> </html>
effect:
