1. What is the box model?
I understand the box model: Take our real-life case, for example, inside a box in real life is empty of good used for storing things, but things inside the store called content (content) , called for the box of wallpaper border border . If the inside of the box is a thing such as eggs, but the eggs for fear shattered, so we need to fill in some uniform internal hard foam all around the box. Then the egg box and a certain distance from this part is called padding (padding) , then if we want the eggs to someone else, will certainly get a gift boxed up, then there are a lot of eggs then fitted between the box and the egg box called margin margin .
2, box model composed of
Box model is a margin (margins), border (border), padding (padding), content (content) thereof. But in real life the box we'll ignore
little margins (margin), but in the page, we can not ignore the margins (margin), and only include models from outside the box in the CSS is complete, even if the outside from zero, we do not ignore it, to know that he is there
to facilitate better understanding, made a small demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 350px;
height: 250px;
background: pink;
/* 外边距 */
margin: 100px;
/* 内边距 */
padding: 50px;
/* 边框的宽度 */
border: 20px solid red;
}
/* 显示内容的区域 */
.con {
width: 100%;
height: 100%;
background: greenyellow;
}
</style>
</head>
<body>
<div class="box">
<div class="con"></div>
</div>
</body>
</html>
Operation is as follows:
3, box model properties
A, content: the content area of the box, which stood on the page display text, images
二、padding：
1、就是内边距的意思，是长在盒子里面的
2、主要控制子元素在盒子内部的位置关系
3、它是添加在父元素上面的
4、padding可以把盒子撑大，需要在宽高的基础上减掉padding，但是如果一个盒子没有固定的大小，添加padding不用减。
5、padding不能为负值
6、padding不会对背景图的位置造成影响
三、border：边框的意思，描述盒子的边框
四. margin：
1、外边距的意思。表示边框到最近盒子的距离。
2、是长在盒子外围的，控制当前元素与其他同级元素的位置关系。
3、margin不会改变盒子内部大小。
4、margin可以设置负值
4、padding的用法：
1、给单一的方向设置padding值：
padding-left
padding-right
padding-top
padding-bottom
2、padding简写设置：
padding 一个值 四周都padding
padding 两个值 上下 左右
padding 三个值 上 左右 下
padding 四个值 上 右 下 左
5、border的用法
边框有三个要素： 粗细 线性样式 颜色
1、单独设置一个方向的边框：
border-left
border-right
border-top
border-bottom
2、
borer 1个值 四周都添加边框
borer 2个值 上下 左右
borer 3个值 上 左右 下
borer 4个值 上 右 下 左
6、margin的用法：
1、给单一方向设置margin值
示例：
margin-top：
margin-right：
margin-bottom：
margin-left：
2、属性值四种方式：
四个值：上 右 下 左
三个值：上 左右 下
二个值：上下 左右
一个值：四个方向
margin常出现的bug1：
同级元素 上下之间的margin值不会叠加，会重合，按照最大值设置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 正常margin间距100px */
.box1 {
background-color: orange;
width: 100px;
height: 100px;
margin-bottom: 100px;
}
.wrap1 {
width: 100px;
height: 100px;
background-color: blueviolet;
}
/* bug margin间距只有50px */
.box {
background-color: orange;
width: 100px;
height: 100px;
margin-bottom: 50px;
}
.wrap {
width: 100px;
height: 100px;
background-color: blueviolet;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="wrap1"></div>
<div class="box">
</div>
<div class="wrap"></div>
</body>
</html>
运行效果图：
margin常出现的bug2：
当父元素和第一个子元素都没有浮动。给第一个子元素添加margin-top：margin-top值会错误的添加在父元素上面
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 200px;
background: red;
}
h3 {
background: rebeccapurple;
width: 250px;
height: 50px;
margin-top: 50px;
}
h2 {
width: 100px;
height: 100px;
background: greenyellow;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="box">
<h3>有超多的字</h3>
<h2></h2>
</div>
</body>
</html>
运行效果图：
7、盒子在页面中真正所占区域的大小
盒模型计算规则：
The actual width of the box border = left boundary + Left + Left + filler content right padding + width + + right border right border.
+ = The actual height of the box frame boundary + + content on the filling height of the filling + + + border at the lower boundary.
Example:
