盒模型（非要让我凑满五个字标题）
盒模型
标准盒模型
上面就是一个标准盒模型：
-
content:代表内容区域，存放内容，文本或者里面图片等等
-
padding：内边距，盒子内部的空间，内容与边框之间的间距，相当于快递中的泡沫
-
border：盒子的边框，四周边框可以分别设置。
-
margin：代表外边距，盒子和盒子之间的间距（分为父子关系和兄弟关系）
边框border
-
给盒子添加边框
-
语法:
设置单独一条边框的样式 border-方位-width: 宽度; border-方位-style: 类型； border-方位-color: 颜色； 复合属性： 设置一条边框的样式 border-方位: 宽度 类型 颜色; 同时设置四条边框的 样式 border: 宽度 类型 颜色；- 类型：solid 实线 dashed 虚线 dotted 点线 double双边线
-
注意：
- 边框必须设置知识两个值：宽度和类型，默认显示是黑色
- 边框可以撑大盒子
- 边框渲染原理：只设置一条边框时，显示为矩形，如果设置相邻的边，相接部分是沿着对角线均分
- 通过边框可以绘制三角形，设置三边透明，一边不透明
- transparent：设置透明的颜色
- 步骤：
- 设置一个width：0px的盒子
- 分别设置三边透明，一边不透明
内边距padding
-
设置盒子中内容到边框的距离
-
语法：
分别设置每个方向的内边距 padding-top：大小； padding-left padding-right padding-bottom 复合属性 padding 设置一个值：上下左右 设置两个值：上下 左右 设置三个值：上 左右 下 设置四个值：上 右 下 左 -
注意：padding会撑大盒子，背景颜色会铺设padding区域
-
应用场景：可以作为导航左右间距
外边距margin
-
盒子与盒子之间距离，外边距
-
语法：
分别设置每个方向的内边距 margin-top：大小； margin-left margin-right margin-bottom 复合属性 margin 设置一个值：上下左右 设置两个值：上下 左右 设置三个值：上 左右 下 设置四个值：上 右 下 左
margin重叠性
- 盒子和盒子之间是兄弟关系，margin在垂直方向会发生重叠，以其中最大的值为准
- 注意：margin在水平方向是叠加的
margin-top传递性
- 盒子和盒子之间是父子关系，子元素设置margin-top会传递给父元素
- 原因：子元素设置margin-top后找不到父元素的边界，就传递给了父元素
- 解决方案：
- 给父元素设置border：1px solid transparent；会更改盒子的大小
- 给父元素设置padding，也会改变盒子的大小
- 给父元素设置overflow：hidden；借助BFC容器的特点，容器里面的元素如何排列不会影响容器外面的元素。
标准盒子的大小的计算
css中设置的width和height分别代表内容区域（content）的大小
标准盒子真正的大小的计算：
- 宽度= content(width)+ padding * 2（左右）+ border * 2(左右)
- 高度=content（height）+ padding * 2(上下) + border * 2（上下）
标准盒子所占空间的大小计算：
- 宽度= content(width)+ padding * 2（左右）+ border * 2(左右) + margin * 2（左右）
- 高度=content（height）+ padding * 2(上下) + border * 2（上下）+ margin * 2（上下）
怪异盒子（IE盒模型）
width和height包含了content和padding和border，目前主流的浏览器默认都是标准盒模型
- 可以通过box-sizing来转换盒模型
- content-box：标准盒模型
- border-box：怪异盒模型
怪异盒子真正的大小的计算：
- 宽度= width（包含了content+padding+border）
- 高度= height（包含了content+padding+border）
怪异盒子所占空间的大小的计算：
- 宽度=width（包含了content+padding+border）+ margin * 2（左右）
- 高度 =height（包含了content+padding+border）+ margin * 2（上下）
拓展
width设置百分比和默认不设置的区别
- 百分比：参考父元素的宽度，设置content内容区域的宽度，添加border+padding会更改盒子的大小，添加margin会改变盒子所占空间的大小
- 默认不设置：相当于auto，代表动态获取到f父元素内容区域的宽度，包含了border+padding+margin
margin：0 auto；
- 上下外边距为0 ，左右为auto，代表自适应，将剩余空间均分左右两侧，可以让盒子水平居中
占空间的大小
- 默认不设置：相当于auto，代表动态获取到f父元素内容区域的宽度，包含了border+padding+margin
margin：0 auto；
- 上下外边距为0 ，左右为auto，代表自适应，将剩余空间均分左右两侧，可以让盒子水平居中
说明：本笔记主要根据网络视频教程整理。