Article Directory
- foreword
- 1. Standard box model and weird box model
- Two, width: auto and width: 100%
- 3. height: auto and height: 100%
- Summarize
foreword
Tip: Before you need to understand the difference between these in detail, you first need to understand the difference between 标准盒模型and 怪异盒模型. If you already understand the difference between the two, you can jump directly to
1. Standard box model and weird box model
Here is a brief overview of the difference between the two.一个盒模型包含了内容(content)、内边距(padding)、边框(border)、外边距(margin)。也就是说标准盒模型和怪异盒模型都有这四部分，区别在于标准盒模型width=content，而怪异盒模型的width=content+padding+border。
1: Standard box model
width = content
width is 100px, content content is 100px
2: Weird box model
width = content+padding+border
width为100px，内容content=width-padding-border = 60px
3: Switch box model: box-sizing
box-sizing: box-sizing: content-box, using the standard mode for calculation, which is the default mode.
When box-sizing: box-sizing: border-box, use weird mode for calculation.
Two, width: auto and width: 100%
1: When padding, margin, and border are not set
(1) Code
<!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>
.main {
width: 300px;
padding: 20px;
background-color: pink;
color: seashell;
}
.box1 {
width: 100%;
background-color: skyblue;
}
.box2{
width: auto;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="main">
<div class="box1">width: 100%</div>
<div class="box2">width: atuo</div>
</div>
</body>
</html>
(2) Effect drawing
2: When setting padding, margin, border
(1) Add the following styles on the premise of the first step
.box1,
.box2{
padding: 10px;
margin: 10px;
border: 10px solid red;
}
(2) Effect drawing
(3) Comparison box model
Conclusion: From (3), we can see that the width:100% box is beyond the content area of the parent box, while the width:auto box is still within the content area of the parent box.
3: When the weird box model is set and padding, margin, and border are set
(1) Add the following styles under the premise of the second step
.box1,
.box2{
box-sizing: border-box;
}
(2) Effect drawing
(3) Comparison box model
4: Summary
Width: 100% and width: auto are calculated relative to the width of the parent element (that is, the content of the parent element), the difference is:
Width: 100% of the element, width is equal to the content width of the parent element
Width: auto element, the total width is equal to the content width of the parent element
3. height: auto and height: 100%
Compared with width: auto and width: 100%, height: auto and height: 100% are simpler.
height：auto是随内容的高度而撑开的。100%是根据父级元素的高度来决定的。
1: Code
<!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>
.content{
display: flex;
}
.main {
width: 300px;
height: 300px;
padding: 20px;
background-color: pink;
color: seashell;
margin-right: 10px;
}
.box1,
.box2{
padding: 10px;
margin: 10px;
border: 10px solid red;
/* box-sizing: border-box; */
}
.box1 {
width: 100px;
height: 100%;
background-color: skyblue;
}
.box2{
width: 100px;
height: auto;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="content">
<div class="main">
<div class="box1">height: 100%</div>
</div>
<div class="main">
<div class="box2">height: atuo</div>
</div>
</div>
</body>
</html>
2: Effect drawing and box model
3: height: the difference between 100% standard box model and weird box model
Here is actually the difference in content due to the change of the box model, so I won’t explain too much.
Summarize
1： width: 100% 和 width: auto
Width: 100% and width: auto are calculated relative to the width of the parent element (that is, the content of the parent element), the difference is:
width:100% 的元素， width 与父元素的 content 宽度相等
width:auto 的元素，总宽度与父元素的content 宽度相等
2: height: auto and height: 100%
height：auto是随内容的高度而撑开的。100%是根据父级元素的高度来决定的。