catalogue
Border border content padding inner margin margin outer margin
Block level elements are horizontally centered
Clear inner and outer margins:
1. Making wedding dress home page
2. Box exercise (home page layout)
1, Web page layout process
First prepare the relevant web page elements, which are basically box es
Use css to set the style and put it in the right place
Put the contents in the box
The essence is to use css to place boxes
2, Composition of box model
Border border
Content content
padding inner margin
Margin margin
3, Border border
The border consists of three parts: width, style and color
Border width: the unit is generally px
border-style: solid,dotted,dashed,double
Border color: color
Compound writing of border
border: 1px solid red; no order
Border separation:
Border top: 1px solid red; / / only the top border is set, and the rest are the same
border-bottom:10px dashed purple
The border affects the size of the actual box
padding inner margin
The distance between the border and the content area
padding-left
padding-right
padding-top
padding-bottom
padding abbreviation:
1. One value: up, down, left and right
2. Two values: up and down, left and right
3. Three values: up, left and right, down
4. Four values: top, right, bottom, left
padding also affects the actual size of the box
Margin outer margin, which controls the distance between the sunspot and the box
margin-left
margin-right
margin-top
margin-bottom
The abbreviation of margin is exactly the same as padding
Block level elements are horizontally centered
margin:0 auto
Horizontal centering of inline elements and inline block elements: add text align: Center to the parent element
Vertical outer margin merging of adjacent block elements:
When two adjacent block elements (siblings) meet, if there is a margin bottom for the upper element and a margin top for the lower element,
Then the vertical distance between them is not the sum of the two, but the larger value, which is the combination of the vertical outer margins of adjacent block elements
Collapse of the vertical outer margin of nested block elements
For two nested block elements, the parent element has the upper outer margin and the child element also has the upper outer margin. At this time, the parent element will collapse the larger outer margin value
Solution:
1. Sets the top outer border for the parent element
2. Sets the upper and inner margins for the parent element
3. Set overflow:hidden for parent element
Clear inner and outer margins:
*{
margin:0;
padding:0;
}
4, Box model exercise
1. Making wedding dress home page
<!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>My Album </title>
<style>
.box1 {
width: 700px;
float: left;
text-align: center;
border: 5px solid white;
}
.box2 {
width: 1500px;
float: left;
text-align: center;
border: 5px solid white;
}
.box3 {
background-color: gray;
color: white;
width: 100px;
float: left;
border: 5px solid white;
}
.box4 {
width: 490px;
height: 200px;
float: left;
border: 5px solid white;
}
.box5 {
width: 490px;
border: 5px solid white;
background-color: whitesmoke;
float: left;
}
</style>
</head>
<body>
<div class="box1">
<div class="box3">Portrait Studio</div>
<div class="box3">Wedding photography</div>
<div class="box3">documentary photography </div>
<div class="box3">Children's photography</div>
<div class="box3">Camera Equipment</div>
<div class="box3">Creative photography</div>
</div>
<div class="box2">
<img src="C:\Users\high\Desktop\Practical training\images/objpic07.jpg" alt="" class="box4">
<img src="C:\Users\high\Desktop\Practical training\images/objpic02.jpg" alt="" class="box4">
<img src="C:\Users\high\Desktop\Practical training\images/objpic03.jpg" alt="" class="box4">
<div class="box5">
photographic art
</div>
<div class="box5">
photographic art
</div>
<div class="box5">
photographic art
</div>
<img src="C:\Users\high\Desktop\Practical training\images/objpic04.jpg" alt="" class="box4">
<img src="C:\Users\high\Desktop\Practical training\images/objpic05.jpg" alt="" class="box4">
<img src="C:\Users\high\Desktop\Practical training\images/objpic06.jpg" alt="" class="box4">
<div class="box5">
photographic art
</div>
<div class="box5">
photographic art
</div>
<div class="box5">
photographic art
</div>
<img src="C:\Users\high\Desktop\Practical training\images/objpic01.jpg" alt="" class="box4">
<img src="C:\Users\high\Desktop\Practical training\images/objpic08.jpg" alt="" class="box4">
<img src="C:\Users\high\Desktop\Practical training\images/objpic09.jpg" alt="" class="box4">
<div class="box5">
photographic art
</div>
<div class="box5">
photographic art
</div>
<div class="box5">
photographic art
</div>
</div>
</body>
</html>Display of operation results:
2. Box exercise (home page layout)
<!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>window </title>
<style>
.box1 {
background-color: rgb(133, 139, 133);
text-align: center;
width: 1500px;
height: 200px;
margin-left: auto;
margin-right: auto;
}
.box2 {
background-color: rgb(228, 195, 11);
width: 400px;
height: 1000px;
float: left;
}
.box3 {
background-color: rgb(228, 195, 11);
width: 400px;
height: 1000px;
float: right;
}
.box4 {
background-color: wheat;
width: 700px;
height: 1000px;
margin-left: auto;
margin-right: auto;
}
.box5 {
background-color: greenyellow;
width: 100px;
height: 300px;
margin: auto;
margin-top: 50px;
position: fixed;
left: 100px;
}
.box6 {
background-color: greenyellow;
width: 100px;
height: 300px;
margin: auto;
margin-top: 50px;
position: fixed;
right: 100px;
}
</style>
<body>
<div class="box1">Header content</div>
<div class="box2">Left border</div>
<div class="box5">Left advertisement</div>
<div class="box3">Right border</div>
<div class="box6">right banner </div>
<div class="box4">Subject content</div>
</body>Result display:
Summary:
Benefit a lot!