CSS box model
1. The concept of the box model
The box model, as the name suggests, is a container in which content can be placed, such as express boxes, cups, etc.
In html, for example: a tag, span tag, etc. can be placed in a div
In official words: the CSS box model is essentially a box that encapsulates the surrounding HTML elements, including margins, borders, padding, and actual content. There are two commonly used box models:
content-box is a box model that conforms to the w3c standard and is also the default box model
Border-box is a box model that does not conform to the w3c standard, also called a weird box
2. Properties of the box model
Let's take a look at several properties of the box model:
- Margin -Clear the area outside the border, the margin is transparent.
- Border-A border around the inner margin and outside the content.
- Padding -Clear the area around the content, the padding is transparent.
- Content-The content of the box, displaying text and images.
Now let's look at an example:
①Standard box model: box-sizing: content-box;
width/height = content(width/height) + border + padding
In the standard box model, width and height are both the width and height of the content
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒模型</title>
<style type="text/css">
* {
box-sizing: content-box; //IE盒模型
/* box-sizing: border-box; */ //怪异盒子
}
.wrapper {
width: 100px;
height: 100px;
border: 10px solid red;
padding: 50px;
/* margin: 50px; */
}
.item {
background-color: red;
width: 20px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
<script type="text/javascript">
(function() {
//获取父元素的宽度
let wrapperWidth = document.querySelector('.wrapper').offsetWidth;
//获取子元素的宽度
let itemWidth = document.querySelector('.item').offsetWidth;
console.log(wrapperWidth,'wrapperWidth')
// 220 = (100) + (100) + (20) = ((paddingLeft+paddgingRight)+(content)+(borderLeft+borderRight)
console.log(itemWidth,'itemWidth') // 20 = width
})()
</script>
②Weird box model (IE box model): box-sizing: border-box
width/height = width/height (content + border +padding ) +margin
The width/height in the weird box model is (content + border + inner margin width/height) => (content + border + padding)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒模型</title>
<style type="text/css">
* {
/* box-sizing: content-box; */ //IE盒模型
box-sizing: border-box; //怪异盒子
}
.wrapper {
width: 100px;
height: 100px;
border: 10px solid red;
padding: 50px;
/* margin: 50px; */
}
.item {
background-color: red;
width: 20px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
<script type="text/javascript">
(function() {
//获取父元素的宽度
let wrapperWidth = document.querySelector('.wrapper').offsetWidth;
//获取子元素的宽度
let itemWidth = document.querySelector('.item').offsetWidth;
console.log(wrapperWidth,'wrapperWidth') // 120 = 100 +20 = (100) + (0) + (20)
((paddingLeft+paddgingRight)+(content)+(borderLeft+borderRight)
console.log(itemWidth,'itemWidth') // 20 = width
})()
</script>
