一，盒子模型

1.盒模型

每一个HTML元素就相当于一个矩形的“盒子”，这个盒子有边框（border）、内容（content）、内边距（padding）、外边距（margin）构成。

2.边框（border）

基本属性：

粗细: border-width

样式: border-style, 默认没边框；solid：实线边框、dashed：虚线边框、dotted：点线边框

颜色: border-color

我们所设置的边框为实线边框且边框的粗细为5px，文本内容的大小为500px X 250px，边框的颜色为红色，在浏览器的开发者工具中查看一下此时的盒子模型：

注意：

上述的代码也支持简写，不同属性之间用空格隔开即可：

可以对任意四个方向的边框进行修改，通过border-top/bottom/left/right进行修改

设置的边框会撑大盒子，即文本内容的大小不会影响，设置了边框大小就会在原有的基础上进行扩大；上述代码将边框的大小设置为5px，此时整个盒子的大小就不再是500px X 250px，而是变成510px X 260px（因为四个方向的都设置了边框大小），如果不想让边框撑大盒子，可以通过box-sizing属性修改浏览器行为，使边框不再撑大盒子：

3.内边距（padding）

padding 设置内容和边框之间的距离，在没有设置内边距的情况下，默认内容是顶着边框的，所以此时可以使用padding来控制内容和边框之间的距离，padding同border一样，也可以对任意四个方向进行设置内边距：padding-top、padding-bottom、padding-left、padding-right

通过开发者工具查看此时的盒子模型：

注意：

padding同border一样，会撑大盒子，如果不想撑大盒子，同样需要修改box-sizing属性

padding的写法有很多种：

padding: 5px; 表示四个方向都是 5px

padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px

padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px

padding: 5px 10px 20px 30px; 表示上5px, 右10px, 下20px, 左30px (顺时针)

4.外边距（margin）

外边距通常指的是两个盒子之间的距离，用来有效控制两个盒子的距离，同时达到页面的美观；同border和padding一样，可以对任意四个方向进行设置外边距：margin-top、margin-bottom、margin-left、margin-right

同样margin的写法有很多种，规则同padding！

二，弹性布局

1.示例

现在的效果如图所示并不是很美观，我们想让1 2 3这三个元素水平方向和垂直方向都可以按照一定的规律进行均匀分布，此时就需要弹性布局这样的属性来进行操作

2. 弹性（flex）布局的基本概念

flex 是 flexible box 的缩写. 意思为 "弹性，子"任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局，flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式

3.常用属性

justify-content：设置主轴上的子元素排列方式

值	描述
flex-start	默认值，项目位于容器的开头
flex-end	项目位于容器的结尾
center	项目位于容器的中央
space-between	项目在行与行之间留有间隙
space-around	项目在行之前、行中间、行之后留有空间

加上justify-content：space-around：

加上justify-content：flex-end：

align-items：设置侧轴上的元素排列方式

值	描述
stretch	默认值，行拉伸以占据剩余空间
center	朝着弹性容器的中央对行打包
flex-start	朝着弹性容器的开头对行打包
flex-end	朝着弹性容器的结尾对行打包
space-between	行均匀分布在弹性容器中
space-around	行均匀分布在弹性容器中，两端各占一半