盒子模型概述
1、概念
浏览器会根据 CSS 基础框盒模型（CSS basic box model），将元素表示成矩形的盒子，CSS 决定这些盒子的大小、位置以及属性
2、盒子组成
每个盒子由 四 个区域组成
1、内容区域 content area
2、内边距区域 padding area
3、边框区域 border area
4、外边距区域 margin area
3、盒子分类
1、标准盒子模型
box-sizing: content-box
2、IE盒子模型
box-sizing: border-box
标准盒子模型 和 IE 盒子模型的区别
1、标准盒子模型
元素的 width 和 height 属性是指 content 的宽高
总宽度 = width + margin(左右) + padding(左右) + border(左右)
2、IE 盒子模型
元素的 width 和 height 属性是指 content、padding、border 三部分的宽高
总宽度 = width + margin(左右) 即width已经包含了 padding 和 border 值
3、切换盒模型使用 box-sizing 属性
1、标准盒模型：box-sizing : content-box ，默认属性是 content-box
2、IE 盒模型：box-sizing : border-box ，
盒子属性
1、outline 外轮廓
2、height 高度
min-height
max-height
3、width 宽度
min-width
min-width
4、padding 内边距
5、margin 外边距
6、border 内边框
border-radius 圆角
7、box-shadow 阴影
8、text-shadow 文字阴影
9、box-sizing 设置模型的 宽 和 高 的行为
盒子背景样式
1、background-color 背景颜色
2、background-image 背景图片
3、background-repeat 背景重复
4、background-position 背景定位
5、background-attachment 背景附着
6、background 综合写法
盒子背景样式解析
1、background-color
background-color: slateblue
作用：在盒子区域添加背景颜色的修饰
加载区域：在 border 及以内加载背景颜色
属性值：颜色名、颜色值
2、background-image
background-image: url(images/jingzheng.jpg);
作用：给盒子添加图片的背景修饰
加载范围：默认的加载到边框及以内部分。后期如果图片不重复加载，加载从 border 以内开始
属性值：url(图片路径)
url：uniform resource locator，统一资源定位符，小括号内部书写查找图片的路径
背景图 和 背景颜色 可以同时设置，背景图会压盖背景颜色，没有背景图的区域会显示背 景颜色
3、background-repeat
作用：设置添加的背景图是否要在盒子中重复进行加载
根据属性值不同，有 四种 重复加载方式
| 属性值 |
作用 |
| repeat |
重复，默认属性值，表示会使用背景图片重复加载填满整个盒子背景区域 |
| no-repeat |
不重复，不论背景图是否大于盒子范围，都只加载一次图片 |
| repeat--x |
水平重复，使用背景图片水平重复加载铺满第一行，垂直方向不重复 |
| repeat--y |
垂直重复，使用背景图片垂直重复加载铺满第一列，水平方向不重复 |
4、background-position
background-position: right bottom; /* 对应方向对齐 */
作用：主要用于设置不重复的图片在背景区域的加载开始位置
属性值：分为三种写法，单词表示法、像素表示法、百分比表示法。不论哪种写法
属性值都有两个，值之间用空格分隔
第一个属性值：表示背景图片在水平方向的位置
第二个属性值：表示背景图片在垂直方向的位置
5、background-attachment
作用：设置的是背景图片是否要随着页面或者盒子的滚动而滚动
| 属性 |
说明 |
| scroll |
滚动的，表示背景图片与盒子保持相对位置不变，随着页面的滚动而滚走 |
| fixed |
固定的，背景图的定位的参考点从盒子border 以内的左上顶点变为了浏览器窗口的左 上顶点，页面滚动时，浏览器窗口的左上顶点是不变的，导致背景图固定在浏览器窗口的某个位置，不会随着页面滚动而滚走 |
6、background
background 属性可以将五个单一属性的值进行合写
属性值：可以有 1-5 个属性值，值之间用空格进行分隔，背景定位的两个属性值算作 一个属性值，不能被分开也不能颠倒顺序。五个属性值之间可以互换位置
body {
background: url(images/bj.jpg) no-repeat center top scroll #666;
}
盒子边框样式
1、border-width 边框的宽度
2、border-style 边框的样式
solid 实线
dashed 虚线
dotteds 点
3、border-color 边框的颜色
4、border-radius 圆角
通过 border-width border-color 可以任意变化每一条变的宽高，和颜色
任意组合就能组成不同的由 三角形 组成的其它几何形状了
border 绘制三角形原理
原理
1、盒子 width 和 height 设置 0
2、border-width 的值 绘制 出 四个 三角形
3、border-color 上色
4、border-color 把不要的三角形设置为透明 transparent
流程分析
1、首先我们准备 1 个盒子
<div id="box"></div>
2、设置 border
#box{
width: 100px;
height: 100px;
border: 5px solid;
border-color: red blue green black;
}
3、border 宽度增加, 可以发现现在的 border 是由 4 个梯形组成
#box{
width: 100px;
height: 100px;
border: 80px solid;
border-color: red blue green black;
}
4、把盒子的大小设置为 0 ，发现现在的 border 是由 4 个三角组成
#box{
width: 0;
height: 0;
border: 80px solid;
border-color: red blue green black;
}
5、把其他的 border 颜色设置为透明, 就能绘制出想要的三角形
#box{
width: 0;
height: 0;
border: 80px solid;
border-color: transparent transparent green transparent;
}
盒子居中
水平居中
1、text-align: center
给父元素添加 text-align: center
适用范围
子元素若为 行内元素，行内块元素，文本，则可实现水平居中
2、单个 块级元素 水平居中 用 margin
margin:0 auto;
元素宽度必须 小于 父元素 宽度，并且要给 元素 定 宽度
3、多 个块级元素水平居中用 行内块
1、子元素设置 display: inline-block;
2、给父元素添加 text-align:center;
3、行内块元素的的换行空格会产生间隙影响，想要消除就需给父元素设置 font-size: 0px;
但是会影响子元素里的文字不见，可以单独给子元素设置文字大小;
4、定位 【 不需要宽高都行 】
原理
子绝父相
top，right,bottom,left 的值是相对父元素尺寸的
margin 或 transform 是相对自身尺寸的，组合使用达到居中效果
实现
给子元素设置绝对定位，父元素设置相对定位
子元素设置：
left: 50%;
margin-left: -150px; /*-150px 是自身宽度的一半*/
或者 transform: translateX(-50%);
5、任意个元素用 flex
原理：设置当前 主轴 对齐方式 为 居中
给父元素设置一下两个属性
display: flex;
justify-content: center;
垂直居中
1、line-height
对于 单行文本/行内元素/行内块级 元素: 高度等于行高的值
.parent {
height:150px;
line-height:150px; //高度等于行高的值；
}
2、多行文本/行内元素/行内块级元素
行高: 等于 height / 行数
.parent{
height:150px;
line-height:30px; /*行高等于 height/行数；*/
}
3、图片元素
.wrapper {
height: 200px;
line-height: 200px;
font-size: 0;
}
.img {
vertical-align: middle;
}
vertical-align: middle;
属性的作用并不是将子元素的 垂直中点 和 父元素 的 垂直中点 对齐，而是元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐。
而当字体大小为 0 时，基线的位置就等于中线的位置；
4、单个块级元素 使用 tabel-cell 实现
.parent {
display: table-cell;
vertical-align: middle;
}
5、任意个元素
.parent {
display: flex;
align-items: center;
}
或 .parent {
display: flex;
}
.son {
align-self: center;
}
或 .parent {
display: flex;
flex-direction: column;
justify-content: center;
}
水平垂直居中 【 居中布局 】
1、定位 子绝父相
.father {
position: relative;
}
.son {
position: absolute;
top: 50%;
left: 50%;
}
/*这一步把子元素的左上角移动到父元素的中心*/
接下来应该这样做:反向移动自身的一半
.son {
transform: translate(-50%, -50%);
}
或者这样做：
.son {
margin: -50px 0 0 -50px;
}
2、定位 上下左右四个方位都为 0，然后设置 margin: auto
.father {
position: relative;
}
.son {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
3、flex 设置两轴方向排布
.father {
display: flex;
justify-content: center; /*主轴方向居中*/
align-items: center; /* 交叉轴方向居中 */
}
4、table-cell + margin
.father {
display: table-cell;
vertical-align: middle; /* 把子元素变成自己的内容，垂直居中 */
}
.son {
margin: 0 auto; /* 自己左右居中 */
}
优点: 浏览器的兼容性比较好
缺点：vertical-align 属性具有继承性，导致父元素的文本也是居中显示的
5、多行文字水平垂直居中 table-cell
.father {
display: table-cell; /* 模拟为td单元格，同时形成了 BFC */
vertical-align: middle; /* 垂直居中*/
text-align: center; /* 水平居中*/
}
.son {
display: inline;
}