盒子模型

1.什么是CSS盒子模型?
CSS盒子模型仅仅是一个形象的比喻, HTML中所有的标签都是盒子

结论
1.在HTML中所有的标签都可以设置
宽度/高度 == 指定可以存放内容的区域
（设置了标签的高度和宽度，即使boder很宽，里面也是原来设定的宽度和高度）**
下图：标签的宽度和高度是100，border-width是50！！！！！！！！

Paste_Image.png

内边距 == 填充物
边框 == 手机盒子自己
外边距 == 盒子和盒子之间的间隙

盒子模型的宽度和高度

1.内容的宽度和高度

就是通过width/height属性设置的宽度和高度

2.元素的宽度和高度

宽度 = 左边框 + 左内边距 + 内容width + 右内边距 + 右边框
高度 同理可证

3.元素空间的宽度和高度

宽度 = 左外边距 + 左边框 + 左内边距 + 内容width + 右内边距 + 右边框 + 右外边距
高度 同理可证

规律:
1.增加了padding之后元素的宽高也会发生变化
2.如果增加了padding之后还想保持元素的宽高, 那么就必须减去内容的宽高

规律:
1.增加了border之后元素的宽高也会发生变化
2.如果增加了border之后还想保持元素的宽高, 那么就必须减去内容的宽高

box-sizing取值border-box和content-box

border-box：元素的宽高 = 边框 + 内边距 + 内容宽高

content-box: 元素的宽高 = width/height的宽高

1.CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变
2.box-sizing属性是如何保证增加padding和border之后, 盒子元素的宽度和高度不变
和我们前面学习的原理一样, 增加padding和border之后要想保证盒子元素的宽高不变, 那么就必须减去一部分内容的宽度和高度
3.box-sizing取值
3.1content-box
元素的宽高 = 边框 + 内边距 + 内容宽高
3.2border-box
元素的宽高 = width/height的宽高

知识点

要求：需求有一个大盒子, 元素的宽高是500有一个小盒子, 元素的宽高是200要求将小盒子放到大盒子中, 并且让小盒子在大盒子中水平垂直居中

注意点:
1.如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来
2.如果外面的盒子不想被一起定下来,那么可以给外面的盒子添加一个边框属性
3.在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑外面的padding, 其次再考虑里面的margin,margin本质上是用于控制兄弟关系之间的间隙的
注意点:

方法一：
外面的设置border:
border: 5px solid #000;
里面的设置margin:
margin-top:150px;
margin-left:150px;

方法二：
外面的设置padding:
box-sizing: border-box;
padding-top:150px;
padding-left:150px;

        1.在嵌套关系的盒子中, 我们可以利用margin: 0 auto;的方式来让里面的盒子在外面的盒子中水平居中
        2.margin: 0 auto; 只对水平方向有效, 对垂直方向无效

方法三：
外面的设置border:
border: 5px solid #000;
里面的设置margin:
margin：0 auto

注意点

1.text-align:center;和margin:0 auto;区别
text-align: center;作用
设置盒子中存储的文字/图片水平居中

margin:0 auto;作用
让盒子自己水平居中