1. Review
2. Horizontal and vertical center
Horizontal center: inline block single line text multiline text text align: center block level margin: 0 auto
Vertical, fixed height inline single line text line height inline block: if there are multiple height inconsistencies in a line
Block level padding or margin
Non fixed height single line text, inline, inline block, block level padding
It is convenient to center the table horizontally and vertically, but display: table cell cannot be displayed on a new line
The display: attribute value of most block level elements is block table special li special list item
The attribute value of most inline elements is inline img input textarea select, especially inline block
3. List elements
<!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>
p {
display: list-item;
list-style-position: inside;
}
</style>
</head>
<body>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
</body>
</html>
4. Maximum and minimum width and height
Width: fixed value width
When the max width is reduced, no scroll bar will appear. If the browser width is relatively large, it will be displayed according to the width of the given value
Min width min width if the browser width is larger than the given value, it will be displayed according to the browser width. If the browser width is smaller than the given value, it will be displayed according to the given value
Height fixed height
Max height maximum height if there is no content, there is no height. If there is less content, it will be displayed according to the height of the content. If there is more content, it will be displayed according to the given value
Min height minimum height if there is no content or less content, the height is displayed according to the given value; if there is more content, the height is displayed according to the content
5. Minimum height compatibility
<!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>
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
min-height: 100px;
background: red;
/* Method 1: normal browsers do not support ie6 */
_height:100px;
/* Mode II */
height: auto !important;
height: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
6. Height collapse
<!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>
* {
margin: 0;
padding: 0;
}
.top {
background: red;
width: 1000px;
margin: 0 auto;
/* overflow: hidden; */
/* overflow: auto; */
/* overflow: scroll; */
}
/* Universal clearance method */
.clearfix:after {
content: "";
display: block;
clear: both;
height: 0;
overflow: hidden;
visibility: hidden;
}
.left {
width: 400px;
height: 200px;
background: yellowgreen;
float: left;
}
.right {
width: 600px;
height: 300px;
background: violet;
float: left;
}
.kong {
clear: both;
}
.main {
height: 200px;
background: blueviolet;
}
</style>
</head>
<body>
<!--
The parent element has no height, and the floating of child elements will cause height collapse
1 Sets the height of the parent element
2 The exterior wall method cannot solve the problem of parent element height
3 Interior wall method can solve the problem of parent element height
4 Add to parent element overflow Property value is hidden auto scroll
5 Universal clearance method
6 Encapsulation class .clearfix:after {} High reusability, commonly used in work
-->
<div class="top clearfix">
<div class="left"></div>
<div class="right"></div>
<div class="kong"></div>
</div>
<!-- <div class="kong"></div> -->
<div class="main"></div>
</body>
</html>
7. Pseudo element selector
The pseudo element selector must be used with content, which is equivalent to adding a tag to the content of the tag, which is not reflected in the structure
: after content
: before content
Note that only block level elements are valid for inline blocks
: first line
: first letter first character
:: selection must be a double colon
8. Pseudo class selector
<!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>
* {
margin: 0;
padding: 0;
}
div {
background: red;
}
div:hover {
background: yellow;
}
/* Initial state */
a:link {
color: tomato t5;
}
/* Mouse over */
a:hover {
color: yellow;
}
/* Click not to lift */
a:active {
color: green;
}
/* Click finish */
a:visited {
color: indigo;
}
</style>
</head>
<body>
<!--
Hyperlink four pseudo class order link visited hover action
-->
<div>content</div>
<a href="#"> hyperlink</a>
</body>
</html>
9. Hide
<!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>
.top1 {
width: 100px;
height: 100px;
background: indigo;
}
.top1 {
width: 100px;
height: 100px;
background: orchid;
display: none;
}
.top1 {
width: 100px;
height: 100px;
background: orange;
visibility: hidden;
}
.top1 {
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<!--
display: none Completely hide
visibility: hidden Hide but keep location
-->
<div class="top1"></div>
<div class="top2"></div>
<div class="top3"></div>
<div class="top4"></div>
</body>
</html>