CSS fragmentary knowledge points
float
Floating action
Used for web page layout to change the vertical layout to the horizontal layout
Attention!!! When the box has floated, you can't use absolute positioning, you can use relative positioning
Floating characteristics
- Floating will break away from the standard flow and occupy no position in the standard flow
- The floating display priority after separation is half a level higher than the standard flow
- Floating find floating, several elements float at the same time, and the later floating element will float behind the first floating element
- Floats are affected by element boundaries (block level elements such as div occupy one line)
- Floating has special display effect, width and height can be set, and there can be multiple floats in a row
- Floating elements cannot use text align and margin:0 auto to set the horizontal center, but the contents of floating elements can
Floating code
#Left float
.left {
float:left;
}
#Right float
.right{
float:right;
}
Clear float
Objective: sometimes when the child element floats, it will break away from the standard flow, and the parent element can no longer be supported by the child element.
method:
-
Set the height of the parent element (disadvantage: some plates are not allowed to set the height of the parent element)
.father { height: 400px; width: 400px; background-color: pink; } .son { float: left; width: 100px; height: 400px; background-color: blue; } -
Extra tag method: add a block level element at the end of the parent element and set clear:both (disadvantage: adding tags makes the web page structure complex)
.father { width: 400px; background-color: pink; } .son { float: left; width: 100px; height: 400px; background-color: blue; } .clear { clear: both; } -
2 optimization, single pseudo element method: add clear:both to the pseudo element of the parent element
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father { width: 400px; background-color: pink; } .son { float: left; width: 100px; height: 400px; background-color: blue; } .clearfix::after { content: ''; display: block; clear: both; /* Supplementary code: no pseudo elements can be seen in the web page */ /* height: 0; visibility: hidden; */ } </style> </head> <body> <div class="father clearfix"> <div class="son"></div> </div> <div class="clearfix"></div> <div class="clearfix"></div> <div class="clearfix"></div> <div class="clearfix"></div> </body> </html> -
Double pseudo element elimination method: it can also solve margin collapse and use the conventional routine
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father { width: 400px; background-color: pink; } .son { float: left; width: 100px; height: 400px; background-color: blue; } .clearfix::before, .clearfix::after { content: ''; display: table; } .clearfix::after { clear: both; } </style> </head> <body> <div class="father clearfix"> <div class="son"></div> </div> </body> </html> -
Set overflow:hidden for parent element
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father { width: 400px; background-color: pink; overflow: hidden; } .son { float: left; width: 100px; height: 400px; background-color: blue; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>
Edition Center
Moderation
It is used to constrain the main content of the web page. No matter what display size, the main content of the web page can be presented in the middle
code
.container {
width:1000px;
margin:0 auto;
}
index page skeleton
<!DOCTYPE html>
<!-- Select language:en zh-CN -->
<html lang="en">
<head>
<!-- Character code universal code -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Web page description -->
<meta name="description" content="xxxxxx">
<!-- Web page keywords -->
<meta name="keywords" content="xxxxxxx">
<!-- icon Icon -->
<link rel="shortcut icon" href="./xtx/favicon.ico" type="image/x-icon">
<!-- Page title -->
<title>Document</title>
<!-- CSS Outreach style -->
<link rel="stylesheet" href="./xtx/css/base.css">
</head>
<body>
</body>
</html>
selector
Descendant Selectors
Usage: selector 1 selector 2 {CSS}
Effect: descendants (sons, grandchildren...) in selector 1 can be selected if they meet the conditions of selector 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father p {
color: red;
}
</style>
</head>
<body>
<!-- Demand: only let the little sister turn red (no change) html Structure) -->
<!-- Solution: in.father this div Find in the offspring of p Label is enough -->
<div class="father">
<p>cute girl</p>
<div>
<p>Handsome boy</p>
</div>
</div>
<p>Cutie</p>
</body>
</html>
Tips: little sister and handsome boy become red, and little cute remains the same
Progeny selector
Usage: selector 1 > selector 2 {CSS}
Effect: only the children in selector 1 can be selected, and only sons can be selected, and those conforming to selector 2 are selected
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father > p {
color: red;
}
</style>
</head>
<body>
<div class="father">
<p>Cutie</p>
<div>
<p>cute girl</p>
</div>
</div>
<p>Big cute</p>
</body>
</html>
Tips: little cute turns red
Union selector
Usage: selector 1, selector 2 {CSS}
Effect: make multiple selectors meet the selection conditions and modify multiple elements at the same time. Selectors can be basic selectors or complex selectors, one for each line
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div,
p {
color: red;
}
</style>
</head>
<body>
<div>I am div</div>
<div>I'm one, too div</div>
<p>I am p label</p>
<p>Me too. p label</p>
<h1 class="red">I am a h1 label</h1>
<h2>I am a h2 label</h2>
</body>
</html>
Tips: div and p labels turn red
Intersection selector
Usage: selector 1 selector 2 {CSS}. If there is a label selector, it must be written in front
Effect: select the elements that match selectors 1 and 2 at the same time
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p.red {
color: red;
}
</style>
</head>
<body>
<div class="red">cute girl</div>
<p>Handsome boy</p>
<p class="red">Cutie</p>
</body>
</html>
Tips: little cute turns red
hover pseudo class selector
Usage: selector:: hover {CSS}
Effect: when the mouse hovers over the label, the CSS style in the pseudo class selector is displayed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
text-decoration: none;
}
a:hover {
color: orange;
text-decoration: underline;
}
.box {
width: 100px;
height: 100px;
background-color: skyblue;
}
.box:hover {
width: 400px;
height: 400px;
background-color: orange;
}
</style>
</head>
<body>
<a href="#"> I am an a tag</a>
<div class="box"></div>
</body>
</html>
Structure pseudo class selector
Precisely select the first element
Usage:
/*The child element is E*/
E:first-child {CSS} /*Matches the first child element in the parent element*/
E:last-child {CSS} /*Matches the last child element in the parent element*/
E:nth-child(n) {CSS}/*Matches the nth child element in the parent element*/
E:nth-last-child(n) {CSS}/*Match the penultimate child element in the parent element*/
/*
n Is 0,1,2,3,4,..., 9
Odd number: 2n-1,2n+1,odd
Even: 2n, even
First j: - n+j
From the jth: n+j
*/
Sprite map
Function: there are many small pictures on a large picture. When sending data to the server, you don't need to send small pictures many times. You only need to send large pictures once to reduce the burden on the server
Usage:
- First create a box. The size of the box is the size of the picture
- Measure the coordinates (x,y) of the upper left corner of the small picture
- Invert coordinates
- Put the picture in the box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one {
width: 24px;
height: 24px;
background: url('./images/taobao.png') 0px -264px;
float: left;
}
.two {
width: 24px;
height: 24px;
background: url('./images/taobao.png') 0px -484px;
float: left;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
Pseudo element
Function: as the name suggests, it is a pseudo element, posing as a label effect. You can add a pseudo element to the non main content of the web page
!! The default is that inline elements do not have width or height
Usage:
Parent element:: before {CSS} adds a pseudo element before the parent element content
Parent element:: after {CSS} adds a pseudo element after the parent element content
content must be added to take effect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 300px;
height: 300px;
background-color: skyblue;
}
.father::before {
/* Mandatory attribute */
content: 'I am a pseudo element';
/* Convert display mode */
display: block;
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="father">
I am father Internal content
</div>
</body>
</html>
Disadvantages: it is not easy to debug, and the review elements cannot be found
Font text style
Font size 40px
Font weight 1. Normal bold 2. Number 100 ~ 900
Font style font style normal Italic
Font family
Font color
List style
Box
margin collapsing
Margin will not collapse horizontally, but will collapse vertically. In the two boxes, the one with the larger margin becomes the distance between the two boxes, and the one with the smaller distance shrinks in the one with the larger distance
The two margin tops are stacked together
Solution: clear the double pseudo elements in floating
Box composition
content
padding
border
margin
Automatic internal subtraction
Keep the box size unchanged while modifying the internal size
box-sizing:border-box
Background picture
background-size:
location
Static positioning
Relative positioning
When the box has floated, you can't use absolute positioning, you can use relative positioning
Absolute positioning
Position relative to distance from parent element
When the box has floated, you can't use absolute positioning, you can use relative positioning
Special:
Son Jue father phase
Father Jue son Jue
Element display mode
Block level element
display:block
Representative: div p h dl dt dd ul li header footer nav form
characteristic:
- There can only be one in a row, and only one row can be displayed
- Width and height can be set
- The default height is spread by the content, and the width is the same as that of the parent element
Inline element
display:inline
Representative: span a pseudo element
characteristic:
- Width and height cannot be set
- The height and width are supported by the content
- A row can have more than one
Inline block element
Alignment format
Vertical alignment
vertical-align:middle
Text:
Line height: current height
align horizontal center
Text: text align
margin:0 auto
Operating skills
Rapid generation framework
!+Tab
preview
Alt+B
Select multiple identical elements at the same time
Ctrl+D
Paste elements into multiple lines at the same time
Press and hold the middle key of the scroll wheel to scroll