1. Review
2. Use of margin and padding
Use of margin and padding
Sets the gap between two elements
There is no background color and border: you can use margin or padding
If there is a border, use padding if the gap is within the border line and margin outside the border line
If there is a background color, use padding if there is a background color in the gap, and margin if there is no background color
3.margin collapse
Collapse of margin: a small box placed in a large box. The margin top of the first small box and the margin bottom of the last small box will be passed to the parent element
Solution:
1. Make this element neither the first nor the last
2. Add a border to the parent element
3. Add padding to the parent element
4. Add the overflow attribute to the parent element. The value is not the default value
5. Add float to parent element
6. Add float to the element itself
7. Add display: inline block to the element itself
4. Influence of negative margin
margin negative
If no width is set for the element, the default is the width of the parent element. Setting a negative value of margin will increase the box width, and setting a positive value of margin will reduce the box width
If you set the width of the element, a positive margin setting will not affect the width of the box, and a negative margin setting will not affect the width of the box, but the position of the box
margin's left priority is higher than right
5. Percentage value
The percentage value of padding is the percentage of the width of the parent element
The percentage value of margin is the percentage of the width of the parent element
The percentage value of width is the percentage of the width of the parent element
The percentage value of height is the percentage of the width of the parent element
6. margin of floating 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>
* {
margin: 0;
padding: 0;
}
.top {
width: 1000px;
height: 200px;
background: red;
margin: 0 auto;
}
.top div {
width: 100px;
height: 100px;
float: left;
}
.top1 {
background: lightblue;
margin-left: 200px;
}
.top2 {
background: lightcoral;
width: 200px !important;
margin-left: -300px;
}
.top3 {
background: lightpink;
}
.top4 {
background: lime;
}
.top5 {
background: magenta;
}
.main {
height: 200px;
background: magenta;
float: left;
width: 100%;
}
.left {
width: 200px;
height: 100px;
background: mediumaquamarine;
float: left;
margin-left: -100px;
}
.center {
height: 50px;
background: lightsalmon;
margin-left: -100px;
}
</style>
</head>
<body>
<!--
Floating elements will be displayed one after the edge and the other immediately after the edge
If you want to go in front of 2 to 1:
You can change the writing order of 2 and 1
Set for 2 margin Negative value of,The width of the element itself+The width of the front element. At this time, the edge element of 3 will become the first one
2 And 1 will reach the front of 2 to 1 by setting a negative value for 2, but will run to the outside of the parent element, making it as wide as 2 to the left margin You can't run out
-->
<!-- <div class="top">
<div class="top1">1</div>
<div class="top2">2</div>
<div class="top3">3</div>
<div class="top4">4</div>
<div class="top5">5</div>
</div> -->
<div class="main">
<div class="center">2</div>
</div>
<div class="left">1</div>
</body>
</html>
7.overflow attribute
Overflow attribute overflow-x, y
hidden: overflow trimming. The overflow content is not visible
Scroll: displays the overflow content in the form of a scroll bar. The scroll bar will be displayed regardless of whether there is overflow or not
auto: if the content overflows, the scroll bar will be displayed for a long time, but it will not be displayed if there is no overflow. The scroll bar will be displayed in which direction
Visible: default
inherit: inherits the value of the overflow attribute of the parent element
8. Ellipsis attribute
<!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>
div {
width: 200px;
background: red;
/* Force display in a row */
white-space: nowrap;
/* Ellipsis display */
text-overflow: ellipsis;
overflow: hidden;
}
</style>
</head>
<body>
<!--
Necessary conditions for truncated ellipsis
1.Have a certain width
2.Force display in a row
3.Overflow cutting
4.Show ellipsis
-->
<div>Truncated ellipsis necessary conditions truncated ellipsis necessary conditions truncated ellipsis necessary conditions truncated ellipsis necessary conditions truncated ellipsis necessary conditions truncated ellipsis necessary conditions truncated ellipsis necessary conditions truncated ellipsis necessary conditions truncated ellipsis necessary conditions truncated ellipsis necessary conditions truncated ellipsis necessary conditions truncated ellipsis necessary conditions truncated ellipsis necessary conditions</div>
</body>
</html>
9. Blank space
White space attribute white space
pre parses all carriage return and line feed space indents. When encountering boundaries, there will be no line feed, and when encountering br, there will be line feed
Pre wrap parses the indentation of all carriage return and line feed spaces, and line feed will occur when encountering boundaries
Pre line only parses carriage return line feed, and line feed occurs when boundary is encountered
nowrap enforces the display in a row. If it encounters br, it will wrap
normal default
10. Classification of elements
Classification of elements: block level elements and inline elements
Block level element: width and height can be set, and a row can be exclusive from top to bottom
In line element: width and height cannot be set. It is displayed in a row from left to right. If the width is not enough, it will wrap automatically
Both block level elements and inline elements follow the box model settings, but some attributes of inline elements cannot be displayed normally
Generally, block level elements are used as boxes for other inline elements
Common block level elements: div h1-h6 p ul ol li dl dt dd form table
Common inline elements: span a b strong u ins i em img input select textare br sup sub
Attribute display of element type conversion
Block: block level element
Inline: inline element
Inline block: the inline block level element img input select texture supports vertical align
none: hide
11. Show and 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>
* {
margin: 0;
padding: 0;
}
body {
background: #999;
}
div {
background: red;
}
p {
background: orchid;
display: none;
}
/* Mouse over */
div:hover p {
display: block;
}
h1 {
height: 50px;
line-height: 50px;
background: plum;
}
a {
float: left;
width: 200px;
text-align: center;
text-decoration: none;
color: #fff;
}
span {
display: none;
}
a:hover span {
display: block;
}
a:hover em {
display: none;
}
</style>
</head>
<body>
<div>
menu
<p>Text message</p>
</div>
<!-- Chinese English switching navigation -->
<h1>
<a href="#"> < EM > Home < / EM > < span > Home Page < / span ></a>
<a href="#">home</a>
<a href="#">home</a>
</h1>
</body>
</html>
12. Calculation of up and down margin
By default, the upper and lower margin s of the two div s overlap, and the larger value is taken
If both div s write float, the upper and lower margin s will not overlap, and the sum of the two will be taken