A must-read for zero basic HTML - CSS box model
Preface
When we use CSS3 for web page layout, we often use the box model. A large or small box is used to hold content. It can be said that every label element is a box. This chapter will introduce the box model!
Chapter 4: CSS Box Model
1. Basic understanding of the box model
1.1.What is the box model?
When CSS processes a web page, it considers each element to be contained in an invisible box. A box has a content area, space around the content area (padding), an outer edge of the content margin (border), and an invisible area outside the border that separates an element from adjacent elements (margin). As shown below
1.2. Composition of the box
A box can be divided into four parts from the inside to the outside: content, padding, border, and margin.
Among them, content is the content of the HTML element, and padding, border, and margin are all CSS properties, so these three parts of the box can be controlled through these three properties.
1.3. Box size
The size of the box refers to: the width of the box (width) and the height of the box (height). The width and height of the box are composed of four parts: content, inner margin, border, and outer margin. Calculation:
- The width of the box = content width + left padding + right padding + left border + right border + left margin + right margin
- width = content + padding-left + padding-right + border-left + border-right + margin-left + margin-right
- The height of the box = content height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
- height= content + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
2. The four major components of the box model
2.1. Content area content
content = width + height
1. Width and height are the width and height of the element's content area respectively. When the width and height of the content area are not set, the height of the box is stretched by the content by default, and the width is the same as the width of its parent element by default .
2. You can specify a fixed size by manually setting the width and height attributes.
3. Value: pixel px, percentage, etc.
4. Some tags cannot define the width and height of the box by themselves, such as span, a, p, b, strong, i, em and other inline elements.
<head>
<title>content内容</title>
<style>
.div1 {
width: 800px;
height: 200px;
background-color: green;
}
.div2 {
width: 900px;
height: 300px;
background-color: hotpink;
}
.p0 {
background-color: blue;
}
.p1 {
background-color: blue;
}
.p2 {
width: 300px;
height: 150px;
background-color: blue;
}
</style>
</head>
<body>
<p class="p0">我是p0，我没有设置宽和高，我的宽度和我父级body一样宽，高度由我自己文字来撑开</p>
<div class="div1">
<p class="p1">我是p1，我没有设置宽和高，我的宽度和我父级div1一样宽，高度由我自己文字来撑开</p>
</div>
<div class="div2">
<p class="p2">我是p2，我设置了宽和高</p>
</div>
</body>
Note that when the width and height of the content area are not set, the height of the box is stretched by the content by default, andThe default width is the same as the width of its parent element.
See the renderings:
2.2.Padding
Padding is the area between the content and the border, also called padding. You can set the top, bottom, left, and right padding of an element by specifying a value for the padding attribute.
2.2.1How to write the padding attribute value:
- Use a value: This value will apply to the top, bottom, left and right padding
- Use two values: the first value acts up and down, the second value acts left and right
- Use three values: act on: top, left, and bottom
- Uses four values: clockwise works: up, right, down, left
- Individual values: such as padding-top, padding-right, etc.
- Note that the default value for padding is 0, and negative values are not allowed.
<head>
<title>padding内边距</title>
<style>
.div1 {
width: 500px;
height: 100px;
background-color: pink;
/* 使用一个值来控制内边距，这个值作用于上下左右四个方向 */
padding: 10px;
/* 使用两个值来控制内边距，分别作用于：上下 左右 */
padding: 5px 7px;
/* 使用三个值来控制内边距，分别作用于：上 左右 下*/
padding: 5px 8px 10px;
/* 使用四个值来控制内边距，顺时针依此作用于：上 右 下 左*/
padding: 5px 7px 9px 3px;
/* 使用单方向单独一个一个的设置 */
padding-top: 2px;
padding-right: 3px;
padding-bottom: 5px;
padding-left: 6px;
}
</style>
</head>
<body>
<div class="div1">
</div>
</body>
We can open the console in the browser to view the padding
renderings:
2.3.Border
border is the border of an element, and a border can be applied to any element, including images. Three attributes can be used to define borders: border-style, border-width, and border-color to set the style, width, and color of the border respectively.
2.3.1 Border style
Common values for the border-style attribute include: none, solid (solid line), dotted (dotted line), dashed (dashed line), double (double line), etc.
2.3.2 How to write the values of the three attributes of the border
Three attributes are used together, generally from left to right are the size, style, and color attributes.
1. Mixing three attributes together, such as:
border: 5px solid red;
2. Using three attributes together in one direction, such as:
border-top:2px solid red;
border-right:6px dotted yellow;
border-bottom:8px dashed blue;
border-left:9px double green;
3. Using a single attribute, supporting one to four values and writing in one direction. The method is the same as padding
/* Single attribute once */ of four values, such as:
border-width:10px;
border-width:10px 4px;
border-width:10px 3px 4px;
border-width:10px 2px 3px 4px;
border-style: solid;
border-style: solid double;
border-style: solid double dotted;
border-style: solid double dotted dashed;
border-color: red;
border-color: red yellow;
border-color: red yellow blue;
border-color: red yellow blue green;
/ * Single attribute in one direction*/, such as:
border-top-width: 20px;
border-right-width: 20px;
border-bottom-width: 20px;
border-left-width: 20px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: red;
border-right-color: green;
border-bottom-color: yellow;
border- left-color: blue;
above 1 and 2 are commonly used, 3 is less used, if you are interested you can try to write it yourself
2.4. Margin
Margin is the space between an element (box) and adjacent elements (boxes). You can set the top, bottom, left, and right margins of an element by specifying a value for the margin attribute.
2.4.1 How to write the margin attribute value:
It can have one to four values, or it can be set individually. The rules are the same as padding.
2.4.2 Default values for margins
<head>
<title>margin外边距</title>
<style>
div{
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div>
</div>
</body>
We set the height and background color of a box without setting the width. At this time, the default width of the box should be the same as its parent body, which is the same width as the browser. But at this time, we found that there are gaps around the box. This is because The box has default margins, which are 8px by default. We can also see this when we open the console.
Rendering:
- The margins have a default value, which is 8px. Generally, you can use wildcards or introduce external styles to clear the default margins.
2.4.3 auto attribute value
Make the left and right margins refer to the width of the parent element to achieve adaptive centering, but there is no change in the height because it involves the problem of merging margins.
2.4.4 Parent-child margin merging problem (nested)
Let’s look at a piece of code first:
<head>
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: blue;
}
p {
width: 100px;
background-color: brown;
margin: 50px auto;
}
</style>
</head>
<body>
<div>
<p>我是p</p>
</div>
</body>
We put a sub-element p box inside the div box (set the width and height to 200px) (set the width to 100px, and if the height is not set, the height will be expanded by the text by default), and add a 50px top and bottom margin to the p box , auto left and right adaptive centering. But the result is that the left and right are adaptively centered, and the top margin is not coming out because both boxes have moved downwards. This involves the issue of merging the upper and lower margins.
Rendering:
Solve the problem of parent-child margin merging:
1. Add a top border to the parent, border-top: 1px solid red;
2. Add a top padding to the parent, padding: 2px;
2.4.5 The problem of merging siblings’ margins (arranged up and down)
Look at this code as well:
<head>
<title>解决兄弟外边距合并问题</title>
<link rel="stylesheet" href="rest.css">
<style>
.div1{
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 100px;
}
.div2{
width: 300px;
height: 300px;
background-color: green;
margin-top: 200px;
}
</style>
</head>
<body>
<div class="div1">
<p>我是盒子1</p>
</div>
<div class="div2">
<p>我是盒子2</p>
</div>
</body>
We set up two boxes, div1 (width and height are 200px) and div2 (width and height are 300px), then add a lower margin of 100px to box 1, and add a top margin of 200px to box 2. At this time, between the two boxes The margin between the two should be 300px, but in fact it is only 200px. This is because the 100px margin involves the merging of sibling margins. Solve the problem of merging
sibling margins
Add: display: inline-block to either of the two boxes to make it an inline block element. (The next picture will talk about inline block elements)
3. Weird box model
3.1box-sizing attribute
Specify the box model type through the box-sizing attribute, whose attribute value is:
- content-box is the default value and represents the standard box model
- border-box represents a weird box model
3.2 The difference between the standard box model and the weird box model:
The fundamental difference is that the calculation content area is different
- standard box model
In standards and models: width refers to the width of the content area, and height refers to the height of the content area.
- The actual size of the box: width=content+border+padding+margin;
- The actual size of the box: height=content+border+padding+margin;
- weird box model
In the weird and model: width (height) refers to content+border+padding+margin, which means that the inner margins and borders set for the box must be squeezed out from the originally set content width and height, so the actual content is was reduced.
width=(content+border+padding)
<head>
<title>怪异盒模型</title>
<link rel="stylesheet" href="rest.css">
<style>
.div1{
/* 这是一个标准盒模型 */
/* 通过box-sizing属性来指定盒模型类型，它的默认值是content-box是标准盒模型 */
/* box-sizing: content-box; */
width: 300px;
height: 200px;
background-color: pink;
padding:10px;
border: 20px solid red;
margin: 30px;
/*
标准盒模型：
内容宽度：还是width：300px
内容高度：还是height：200px
盒子总宽度：420=300+10+10+20+20+30+30
盒子总高度：320=200+10+10+20+20+30+30
*/
}
.div2{
/* 声明一个怪异盒模型 */
box-sizing: border-box;
width: 300px;
height: 200px;
background-color: pink;
padding:10px;
border: 20px solid red;
margin: 30px;
/*
怪异盒模型：
内容宽度：width(300)-(10+10+20+20)=240
内容高度：height(200)-(10+10+20+20)=140
盒子总宽度：360=240+10+10+20+20+30+30
盒子总高度：260=140+10+10+20+20+30+30
*/
/*
标准盒模型中：
它的内边距和边框是向外扩张，不占用内容部分，所以内容部分宽和高还是原内容设置的宽和高；
它的最后总宽度（高度）是：原content+padding+border+margin
怪异盒模型中：
它的内边距和边框是向内缩减，要占用内容部分，所以内容部分宽和高还是原内容设置的宽和高减去内边距和边框部分；
它的最后总宽度（高度）是：原content+margin；或新content+padding+border+margin
*/
}
</style>
</head>
<body>
<div class="div1">
<p>我是标准盒模型</p>
</div>
<div class="div2">
<p>我是怪异盒模型</p>
</div>
</body>
We open the console in the browser to view the standard box model and the weird box model respectively.
The renderings are:
- In the standard box model:
Its inner margins and borders expand outward and do not occupy the content part, so the width and height of the content part are still the width and height set by the original content;
its final total width (height) is: original content+padding+border+margin
- In the weird box model:
Its padding and borders are reduced inward, occupying the content part, so the width and height of the content part are still the width and height set by the original content minus the padding and border parts; its final total width (height) is
: Original content+margin; or new content+padding+border+margin
Summarize
The above is a preliminary understanding of some CSS box models compiled by the editor for everyone, and a more detailed explanation of the four parts of content, padding, borders, and margins, and finally introduced the weird box model. It was compiled with reference to various sources and my own understanding. If there may be inaccuracies and omissions, I hope you guys can enlighten me and make corrections. I would like to thank you in advance.