一，盒子模型的定义
css的盒子模型，英文名为box model。这个叫法十分贴切，因为html页面中的各种元素标签就像一个个盒子一样堆在一起，类似于生活中快递店铺里面堆在一起的快递。
所以，盒子模型是指：html中的各个元素都类似一个一个的盒子里面的物品，但是却叫做css盒模型，是因为css盒模型像一个盒子，把各种html元素包起来，将html元素进行封装，以便于网页布局与排版。下图就是一个盒子模型的示意图：
<1>，图中蓝色方框指的是html元素，就是内容context部分，可以是一张图片、一个表格、一个表单等。其大小是可以修改的。属性width和height用于修改内容部分的宽和高，也就是其大小。
<2>，图中绿色方框指的是padding部分，指的是内边距。padding部分是元素内容（context部分）与其最近一层束缚框的距离，类似于在一个方格里写字我们写在方格的中间，而与边框保持一定同一个道理。
<3>，图中浅橘色方框指的是border部分，指的是这个边框的宽度，我们常见的就是宽度为1，也就是一条线。
<4>，图中深橘色方框指的是margin部分，也叫边缘部分，他的作用是保证html元素之间的距离，比如网页上的两种图片需要保持一定的间距才显得井井有条。
<5>，padding，border，margin实际上是每个html元素都存在的css属性。他们可以对元素的上下左右四个方向进行调整和限制。
<6>，当存在盒子里嵌套盒子时，也就是html的标签嵌套时，里面的元素默认位置为左上角。
<7>，由style=""引出要设置的padding，margin，border性质。
如以下代码：
<body>
<h3 style="padding: 10px;border: 5px solid blue; width: 10%;margin: 50px;background-color: aqua;">测试文字1</h3>
<h3 style="padding: 10px;border: 5px solid blue; width: 10%;margin: 50px;background-color: aqua;">测试文字2</h3>
</body>网页显示如下：
二，设置普通盒子模型的一些性质
1.关于盒子模型内容context部分如何设置
<1>,content区域包括width和height两个属性。
min-width：最小宽度 max-width：最大宽度
min-height：最小高度 max-height：最大高度
<2>, 在块级元素和行内元素内：
宽度：块级元素的默认宽度为100%，
行内元素的默认宽度为内容的宽度。
高度：块级元素和行内元素的默认高度都由其内容决定。
注意：块级元素可以设置宽高属性，行内元素设置宽高属性无效。
2.关于盒子模型内边距padding部分如何设置
<1>,padding包括padding-top padding-bottom padding-left 和padding-right
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;
<2>,有以下简写方式
（1）padding 边距1
只有一个数值时，指padding-top,padding-bottom,padding-left,padding-right四值均为边距1
（2）padding 边距1 边距2
表示padding-top和padding-bottom为边距1，padding-left和padding-right为边距2。
（3）padding 边距1 边距2 边距3
表示padding-top为边距1，padding-left和padding-right为边距2，padding-bottom为边距3。
（4）padding 边距1 边距2 边距3 边距4
表示padding-top为边距1，padding-right为边距2，padding-bottom为边距3，padding-left为边距4。
<3>,padding的单位可为px和%（占比）
3.关于盒子模型边框border部分如何设置
<1>,设置border由三部分组成：边框宽度（粗细） 边框样式 边框颜色（都由空格隔开）
border-width:定义边框粗细，单位是px
border-style：边框样式
有以下几个样式
- none：无边框，即忽略所有边框的宽度（默认值）
- solid : 边框为单实线（最常用）
- dashed ：边框为虚线
- dotted ：边框为点线
border-color: 边框颜色
<2>,简写方式
如以下代码：
border： 1px solid lightgrey;4.关于盒子模型外边距margin部分如何设置
<1>,margin用于设置盒子和盒子之间的距离 包括margin-top margin-left margin-bottom margin-right
<2>,其简写方式和padding的相同
margin:10px;
/*表示上下左右都相距10px*/
margin:10px 15px;
/*表示上下外边距为10px，左右外边距为15px*/
margin:10px 15px 20px;
/*表示上面的外边距为10px，左右外边距为15px，下外边距为20px*/
margin:10px 15px 20px 20px;
/*表示上面的外边距为10px，右边的外边距为15px，下面的外边距为20px，左边的外边距为20px*/
三，弹性盒子模型
1.弹性盒子的定义
弹性盒子（Flexbox/flex-container）是一种强大而灵活的布局模型，能够简化我们对网页布局的控制，并使页面在不同设备上的适应性更强。
2.与一般盒子模型的区别
利用一般盒子模型能完成大部分的页面布局，但是对于一些特殊的页面布局，这种传统的盒子模型实现起来非常的不方便，比如垂直居中等等。
FlexBox弹性盒子模型布局，可以简便、完整、响应式地实现各种页面布局，可以比较灵活的使用 。
注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
3.如何开启弹性盒子模型
<style>.flex-container{
/* 基础样式 */
border: 3px solid red;
max-width: 800px;
height: 600px;
width: 800px;
margin: auto;
background-color: aqua;
/* *1.！！！使用弹性盒子布局 默认主轴为x */
display: flex;
/* 2.定义弹性盒子主轴 row ：x column：y */
flex-direction: row-reverse;
/* 3.定义弹性盒子是否换行 */
flex-wrap: wrap;
/* 4.复合写法 */
flex-flow: row wrap;
</style><1>.默认弹性布局（主轴为x）：
display=flex;
<2>.定义弹性盒子主轴：
flex-direction: row-reverse;
(row: x轴 column：y轴)
<3>,定义弹性盒子是否换行
flex-wrap：wrap（换行）
<4>,复合写法：
flex-flow：row wrap；
（以x轴为主轴且弹性盒子换行）
<style>
.flex-container{
/* 基础样式 */
border: 3px solid red;
max-width: 800px;
height: 600px;
width: 800px;
margin: auto;
background-color: aqua;
/* 5.定义子项目！ 在主轴！上的对齐方式 stretch使用它时，需要取消子项的高度 */
justify-content: center;
/* 6.在！交叉轴！上的对齐方式 */
align-items: center;
/* 7.！多行或者多列！对齐方式 */
align-content: center;
}
</style><5>.定义子项目在主轴（水平）上的对齐方式
justify-content：center；
<6>.在交叉轴（垂直）上的对齐方式
align-items: center;
<7>.多行或者多列对齐方式
align-content: center;
4.弹性子项目----flex-items
<1>.格式：
<style>
.flex-item{
/* width: 100px;
height: 100px; */
background-color: bisque;
margin: 10px;
}
</style><2>.设置子元素
<style>
.flex-item:nth-child(1){
/* 1.设置子元素的索引 */
order:3;
/* 2.设置子元素的放大比例---不要使用自动换行 */
flex-grow: 2;
/* 3.设置当前的缩小比例 */
flex-shrink: 10;
/* 4.设置其基本宽度,默认是自适应的 */
flex-basis: 200px;
/* 5.复合写法 */
flex: auto 2 10;
/* 6.子元素在交叉轴上的对齐方式 */
align-self: stretch;
}
.flex-item:nth-child(2){
/* flex-grow: 1; */
flex-shrink: 3;
flex-basis: 200px;
}
.flex-item:nth-child(3){
/* flex-grow: 1; */
flex-shrink: 3;
flex-basis: 200px;
}
</style>掌握弹性盒子的使用是我们布局必不可少的一种方法。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
