CSS learning notes 4 (box model)
Box model
Border properties
-
A border is a line that surrounds the width and height of a label
-
Hyphenation (set four edges at the same time)
Border: the width of the border, the style of the border, and the color of the border;
-
Sample code
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
border: 5px solid blue;
/*border: 5px solid;*/
/*border: 5px blue;*/
/*border: solid blue;*/
}
</style>
-
Shortcut keys:
bd+ border: 1px solid #000;
-
Note:
The color attribute in hyphenation format can be omitted. After omission, it is black by default
You cannot omit the style in the hyphenation format. After omitting, you can't see the border
The width can be omitted in the hyphenation format, and the border can still be seen after omission
-
Concatenate by direction (set four edges respectively)
Border top: the width of the border, the style of the border, and the color of the border;
Border right: the width of the border, the style of the border, and the color of the border;
Border bottom: the width of the border, the style of the border, and the color of the border;
Border left: the width of the border, the style of the border, and the color of the border;
-
Sample code
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
border-top:5px solid blue;
border-right:10px dashed green;
border-bottom:15px dotted purple;
border-left:20px double pink;
}
</style>
-
Concatenate by element (set four edges respectively)
Border width: top right, bottom left;
Border style: top right, bottom left;
Border color: top right, bottom left;
-
Sample code
<style>
.box{
width: 500px;
height: 500px;
background-color: red;
border-width: 5px 10px 15px 20px;
border-style: solid dashed dotted double;
border-color: blue green purple pink;
/*border-color: blue green purple;*/
/*border-color: blue green;*/
/*border-color: blue;*/
}
</style>
-
Note:
The values of these three attributes are assigned clockwise, that is, they are assigned according to the top, right, bottom and left, rather than according to the top, bottom, left and right in daily life
The rule when the values of these three attributes are omitted
The value of upper right lower left > upper right lower left > left is the same as that of the right
The value of top right, bottom left > top right > left is the same as that of the right, and the value of the lower side is the same as that of the upper side
Upper right lower left > upper > lower right left value is the same as the upper edge
-
Sample code
<style>
.box{
width: 500px;
height: 500px;
background-color: red;
border-top-width: 5px;
border-top-style: solid;
border-top-color: blue;
border-right-width: 10px;
border-right-style: dashed;
border-right-color: green;
border-bottom-width: 15px;
border-bottom-style: dotted;
border-bottom-color: purple;
border-left-width: 20px;
border-left-style: double;
border-left-color: pink;
}
</style>
- Note:
- If multiple border properties are set in the same selector, the latter will overwrite the former
.box3{
border: 5px solid red;
border-right:5px dashed red;
}
Inner margin attribute
-
The distance between the border and the content is the inner margin
-
Set four edges separately
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
-
Sample code
<style>
div{
width: 98px;
height: 90px;
border: 1px solid #000;
background-color: red;
}
.box1{
padding-top: 20px;
padding-right:40px;
padding-bottom:80px;
padding-left:160px;
}
</style>
-
Set four edges at the same time
padding: top right, bottom left;
-
Sample code
<style>
div{
width: 98px;
height: 90px;
border: 1px solid #000;
background-color: red;
}
.box1{
/*padding:20px 40px 80px 160px;*/
/*padding:20px 40px 80px;*/
/*padding:20px 40px;*/
padding:20px;
}
</style>
-
Note:
The rule when the values of these three attributes are omitted
The value of upper right lower left > upper right lower left > left is the same as that of the right
The value of top right, bottom left > top right > left is the same as that of the right, and the value of the lower side is the same as that of the upper side
Upper right lower left > upper > lower right left value is the same as the upper edge
After setting the inner margin for the label, the width and height of the label will change
After setting the inner margin for the label, the inner margin will also have a background color
Outer margin attribute
-
The distance between labels is the outer margin
-
Set four edges separately
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
-
Sample code
<style>
.box1{
margin-top:20px;
margin-right:40px;
margin-bottom:80px;
margin-left:160px;
}
</style>
-
Set four edges at the same time
margin: top right, bottom left;
-
Sample code
<style>
.box1{
margin:20px 40px 80px 160px;
/*margin:20px 40px 80px;*/
/*margin:20px 40px;*/
/*margin:20px;*/
}
</style>
- Note:
- The rule when the values of these three attributes are omitted
- The value of upper right lower left > upper right lower left > left is the same as that of the right
- The value of top right, bottom left > top right > left is the same as that of the right, and the value of the lower side is the same as that of the upper side
- Upper right lower left > upper > lower right left value is the same as the upper edge
- The part of the outer margin has no background color
- Outer margin merging
- In the vertical direction of the default layout, the outer margin will not be superimposed, and merging will occur. Whoever has a large outer margin will listen to who
- Sample code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Outer margin merging</title>
<style>
span{
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #000;
}
div{
height: 100px;
border: 1px solid #000;
}
.hezi1{
margin-right:50px;
}
.hezi2{
margin-left:100px;
}
.box1{
margin-bottom:50px;
}
.box2{
margin-top:100px;
}
</style>
</head>
<body>
<span class="hezi1">I am span</span><span class="hezi2">I am span</span>
<div class="box1">I am div</div>
<div class="box2">I am div</div>
</body>
</html>
-
Margin top problem
If the two boxes are nested, the outer margin of the top of the inner box is set, and the outer box will also be pushed down
If the outer box doesn't want to be fixed together, you can add a border attribute to the outer box
In enterprise development, if you need to control the distance between nested relationship boxes, you should first consider padding and then margin(margin is essentially used to control the gap between siblings)
-
Sample code
<style>
.big{
width: 500px;
height: 500px;
background-color: red;
/*If the border is not set, the big will be pushed down by the outer margin of the top of small*/
border: 5px solid #000;
}
.small{
width: 200px;
height: 200px;
background-color: blue;
margin-top:150px;
margin-left:150px;
}
</style>
-
text-align:center; And margin:0 auto; difference
text-align: center; Is to center the text / picture stored in the box horizontally
margin:0 auto; Is to center the box horizontally
-
Sample code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>53-Box centered and content centered</title>
<style>
.father{
width: 800px;
height: 500px;
background-color: red;
/*The text and picture will be centered*/
/*text-align: center;*/
/*The box itself will be centered*/
margin:0 auto;
}
.son{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="father">
I am writing<br/>
<div class="son"></div>
</div>
</body>
</html>
Box model
-
CSS box model is just an image metaphor. All tags in HTML are box models
-
CSS box model refers to those labels that can set width, height / inner margin / border / outer margin
-
These attributes can be understood by using box as a metaphor, which is a common thing in daily life, so HTML tags are also called box model
-
Sample code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>48-CSS Box model</title>
<style>
span,a,b,strong{
display: inline-block;
width: 100px;
height: 100px;
border: 6px solid #000;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<span>I am span</span>
<a href="#"> I'm a hyperlink</a>
<b>I'm bold</b>
<strong>I'm emphasizing</strong>
</body>
</html>
-
Box model width and height
-
Width and height of content
-
Is the width and height set through the width/height attribute
-
The width and height of the element
Width = left border + left inner margin + width + right inner margin + right border
Highly plausible
-
law
After adding padding/border, the width and height of the element will also change
-If you want to maintain the width and height of the element after adding padding/border, you must subtract the width and height of the content -
Width and height of element space
Left margin + right margin + left margin + right margin
Highly plausible
Box sizing properties
-
CSS3 adds a box sizing attribute, which can ensure that the width and height of the box element remain unchanged after we add padding and border to the box
-
Box sizing value
content-box
Width and height of element = border + inner margin + width and height of content
border-box
Width and height of element = width/height
-
After adding padding and border, if you want to keep the width and height of box elements unchanged, the system will automatically subtract the width and height of some contents
-
Sample code
<!--increase padding/border After that, the width and height of the element will increase-->
<style>
.box1{
width: 200px;
height: 200px;
background-color: blue;
float: right;
border: 20px solid #000;
padding: 20px;
}
</style>
<!--increase padding/border After that, the element width will not increase-->
<style>
.box1{
box-sizing: border-box;
width: 200px;
height: 200px;
background-color: blue;
float: right;
border: 20px solid #000;
padding: 20px;
}
</style>
Thanks to Geek Jiangnan. There are relevant videos on station B. refer to the link: https://www.jianshu.com/p/34b6b5446a12