【从0-1的CSS】第3篇：盒子模型与弹性布局
文章目录
- 盒子模型
- 内容区content
- 内边距padding
- 边框border
- 外边距margin
- 元素的宽度高度
- box-sizing属性
- content-box：设置的width和height就是内容区的width和height
- border-box:设置的width和height是context + padding + border的width和height
- 弹性布局
- Flex容器的属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
- 项目属性
- order
- align-self
- flex
- 总结
盒子模型
盒子模型是网页设计中一种很重要的思维模型，即把网页中的每个元素都看做是一个盒子。这个盒子模型主要是由四个部分组成：内容区content、内边距padding、边框border、外边距margin。
内容区content
内容区是整个盒子模型的中心，主要是存放内容，内容可以是文本、图片等资源。主要属性是：width、height，分别用来指定盒子内容区域的宽度和高度。
内边距padding
内边距是内容区和边框之间的空间，可以通过设置这四种属性：padding-top、padding-right、padding-bottom、padding-left，分别来设置内容区在上、右、下、左四个方向上与边框之间的距离
边框border
边框是环绕内容区和内边距的边界，可以通过设置这几种属性：border-style、border-width、border-color，分别来设置边框的样式、宽度、和颜色。
外边距margin
外边距位于盒子模型的最外围，通过外边距可以是盒子之间，也就是元素之间不会紧凑的连接在一块，是布局中很重要的一个手段。可以通过设置margin-top、margin-right、margin-bottom、margin-left以及他们的简写属性来设置外边距的宽度（也就是与其他元素之间的距离）
元素的宽度高度
通常设置元素的宽度和高度时，实际上设置的只是元素内容区域的宽度和高度，如刚刚所讲，盒子模型是讲元素当成一整个盒子，所以元素的实际宽度和高度应该包括以上四个部分之后，即
总宽度：content width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
总高度：content height + padding-top + padding-bottom + border-top + border-bottom + margin-top+ margin-bottom
box-sizing属性
根据上面元素的宽度和高度，box-sizing属性用于指定元素的盒子模型的宽高度的计算方式，重新定义的元素的尺寸。该属性指主要有两种：content-box和border-box
offsetWidth和offsetHeight是获取元素中的宽度和高度
content-box：设置的width和height就是内容区的width和height
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>盒子模型</title><style>.d1 {width: 200px;height: 200px;background-color: aqua; /* 背景色 *//* padding:10px 5px 15px 20px; 设置内边距: 上\右\下\左 */padding: 50px;border:20px solid red; /* 设置边框 */margin: 10px; /* 设置外边距:盒子与外边框的间距 一个值代表上下左右值一样 */box-sizing: content-box; /* 固定盒子的context的宽高度大小 *//*box-sizing: border-box; !* 固定盒子的context + padding + border的宽高度大小 *!*/}</style>
</head>
<body><div class="d1">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
</body>
</html>
浏览器显示如下
可以看出offsetWidth和offsetHeight都是为html中设置的200px
border-box:设置的width和height是context + padding + border的width和height
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>盒子模型</title><style>.d1 {width: 200px;height: 200px;background-color: aqua; /* 背景色 *//* padding:10px 5px 15px 20px; 设置内边距: 上\右\下\左 */padding: 50px;border:20px solid red; /* 设置边框 */margin: 10px; /* 设置外边距:盒子与外边框的间距 一个值代表上下左右值一样 *//*box-sizing: content-box; !* 固定盒子的context的宽高度大小 *!*/box-sizing: border-box; /* 固定盒子的context + padding + border的宽高度大小 */}</style>
</head>
<body><div class="d1">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div></body>
</html>
浏览器显示如下
可以看出offsetWidth和offsetHeight都是为html中设置的340px (200px + 50 + 20 + 50 + 20)
弹性布局
弹性布局是CSS3中一种新的布局模式，可以简便、完整、响应式地实现各种页面布局，也就是为了满足不同屏幕大小和设备类型（手机、电脑、平板…）适配问题。
display属性可以指定html的元素为弹性布局
弹性布局Flex：Flexible box，采用Flex布局的元素，称为Flex容器，简称容器。所有的子元素都是容器成员，称为Flex项目：Flex item简称项目。容器默认存在两根轴，即水平主轴和垂直的交叉轴。
主轴开始的位置叫做main start,结束的位置叫做main end。
交叉轴开始的位置叫做cross start,结束的位置叫做cross end。
Flex容器的属性
| 属性 | 描述 |
|---|---|
| flex-direction | 决定主轴上的方向（项目的排列方向) |
| flex-wrap | 默认情况下，项目都排列在一根轴线上，如果一根轴线排不下，则flex-wrap属性决定如何换行 |
| flex-flow | 是flex-direction和flex-wrap两个属性的简写flex-flow: flex-direction flex-wrap; |
| justify-content | 用于设置弹性盒子中元素在主轴（横轴）方向上的对齐方式 |
| align-items | 用来设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式 |
| align-content | 定义多个轴线的对齐方式，如果项目只有一根轴线，则不起作用 |
flex-direction
flex-direction 属性用来决定主轴的方向（即项目的排列方向）
| 值 | 描述 |
|---|---|
| row | 默认值，主轴沿水平方向从左到右 |
| row-reverse | 主轴沿水平方向从右到左 |
| column | 主轴沿垂直方向从上到下 |
| column-reverse | 主轴沿垂直方向从下到上 |
| initial | 将此属性设置为属性的默认值 |
| inherit | 从父元素继承此属性的值 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>flex-direction</title><style>#main {border: 1px solid #CCC;padding: 5px;position: relative;}.row, .row_reverse, .column, .column_reverse{display: flex;margin-bottom: 5px;}.row {flex-direction: row;}.row_reverse {flex-direction: row-reverse;}.column {flex-direction: column;}.column_reverse {flex-direction: column-reverse;position: absolute;top: 120px;left: 400px;}.row div, .row_reverse div, .column div, .column_reverse div {width: 100px;height: 100px;border: 1px solid black;}</style>
</head>
<body>
<div id="main"><div class="row"><div>row-A</div><div>row-B</div><div>row-C</div><div>row-D</div><div>row-E</div></div><div class="row_reverse"><div>row_reverse-A</div><div>row_reverse-B</div><div>row_reverse-C</div><div>row_reverse-D</div><div>row_reverse-E</div></div><div class="column"><div>column-A</div><div>column-B</div><div>column-C</div><div>column-D</div><div>column-E</div></div><div class="column_reverse"><div>column_reverse-A</div><div>column_reverse-B</div><div>column_reverse-C</div><div>column_reverse-D</div><div>column_reverse-E</div></div>
</div>
</body>
</html>
网页效果如下：
flex-wrap
flex-wrap 属性用来设置当弹性盒子的子元素（项目）超出父容器时是否换行
| 值 | 描述 |
|---|---|
| nowrap | 默认值，表示项目不会换行 |
| wrap | 表示项目会在需要时换行 |
| wrap-reverse | 表示项目会在需要时换行，但会以相反的顺序 |
| initial | 将此属性设置为属性的默认值 |
| inherit | 从父元素继承属性的值 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>flex-wrap</title><style>#main {border: 1px solid #CCC;padding: 5px;}.nowrap, .wrap, .wrap_reverse {display: flex;flex-direction: row;margin-bottom: 15px;}.nowrap {flex-wrap: nowrap;}.wrap {flex-wrap: wrap;}.wrap_reverse {flex-wrap: wrap-reverse;}.nowrap div, .wrap div, .wrap_reverse div {width: 150px;height: 50px;border: 1px solid black;}</style>
</head>
<body>
<div id="main"><div class="nowrap"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div></div><div class="wrap"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div></div><div class="wrap_reverse"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div></div>
</div>
</body>
</html>
网页效果如下：
flex-flow
flex-flow 属性是 flex-direction 和 flex-wrap 两个属性的简写,语法：flex-flow: flex-direction flex-wrap;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>flex-flow</title><style>.flex_flow {display: flex;flex-flow: row-reverse wrap;}.flex_flow div {width: 150px;height: 60px;margin-bottom: 5px;border: 1px solid black;}</style>
</head>
<body>
<div class="flex_flow"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div>
</div>
</body>
</html>
网页效果：
justify-content
justify-content 属性用于设置弹性盒子中元素在主轴（横轴）方向上的对齐方式
| 值 | 描述 |
|---|---|
| flex-start | 默认值，左对齐 |
| flex-end | 右对齐 |
| center | 居中 |
| space-between | 两端对齐，项目之间的间隔是相等的 |
| space-around | 每个项目两侧的间隔相等 |
| initial | 将此属性设置为属性的默认值 |
| inherit | 从父元素继承属性的值 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>justify-content</title><style>.flex {display: flex;flex-flow: row wrap;margin-top: 10px;}.flex div {width: 60px;height: 60px;margin-bottom: 5px;border: 1px solid black;}.flex-start {background-color: crimson;justify-content: flex-start;}.flex-end {background-color: #ffa500;justify-content: flex-end;}.center {background-color: coral;justify-content: center;}.space-between {background-color: #73AD21;justify-content: space-between;}.space-around {background-color: blue;justify-content: space-around;}</style>
</head>
<body>
<div class="flex flex-start"><div>A</div><div>B</div><div>C</div><div>D</div>
</div>
<div class="flex flex-end"><div>A</div><div>B</div><div>C</div><div>D</div>
</div>
<div class="flex center"><div>A</div><div>B</div><div>C</div><div>D</div>
</div>
<div class="flex space-between"><div>A</div><div>B</div><div>C</div><div>D</div>
</div>
<div class="flex space-around"><div>A</div><div>B</div><div>C</div><div>D</div>
</div>
</body>
</html>
网页效果：
align-items
align-items 属性用来设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式
| 值 | 描述 |
|---|---|
| stretch | 默认值，项目将被拉伸以适合容器 |
| center | 项目位于容器的中央 |
| flex-start | 项目位于容器的顶部 |
| flex-end | 项目位于容器的底部 |
| baseline | 项目与容器的基线对齐 |
| initial | 将此属性设置为属性的默认值 |
| inherit | 从父元素继承属性的值 |
align-content
align-content 属性与 justify-content 属性类似，可以在弹性盒子的侧轴还有多余空间时调整容器内项目的对齐方式
| 值 | 描述 |
|---|---|
| stretch | 默认值，将项目拉伸以占据剩余空间 |
| center | 项目在容器内居中排布 |
| flex-start | 项目在容器的顶部排列 |
| flex-end | 项目在容器的底部排列 |
| space-between | 多行项目均匀分布在容器中，其中第一行分布在容器的顶部，最后一行分布在容器的底部 |
| space-around | 多行项目均匀分布在容器中，并且每行的间距（包括离容器边缘的间距）都相等 |
| initial | 将此属性设置为属性的默认值 |
| inherit | 从父元素继承该属性的值 |
项目属性
可以通过以下三个属性来对弹性布局的子元素进行设置
| 值 | 描述 |
|---|---|
| order | 用来设置项目在容器中出现的顺序 |
| align-self | 允许您为某个项目设置不同于其它项目的对齐方式 |
| flex | flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写 |
order
order 属性用来设置项目在容器中出现的顺序，可以通过具体的数值来定义项目在容器中的位置，属性的语法格式：order: number;
:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>order</title><style>.flex {display: flex;flex-flow: row wrap;margin-top: 10px;}.flex div {width: 60px;height: 60px;margin-bottom: 5px;border: 1px solid black;}.flex div:nth-child(1) {order: 5;}.flex div:nth-child(2) {order: 3;}.flex div:nth-child(3) {order: 1;}.flex div:nth-child(4) {order: 2;}.flex div:nth-child(5) {order: 4;}</style>
</head>
<body>
<div class="flex"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
</body>
</html>
网页效果：
align-self
align-self 属性允许为某个项目设置不同于其它项目的对齐方式，该属性可以覆盖 align-items 属性的值
| 值 | 描述 |
|---|---|
| auto | 默认值，表示元素将继承其父容器的 align-items 属性值，如果没有父容器，则为“stretch” |
| stretch | 项目将被拉伸以适合容器 |
| center | 项目位于容器的中央 |
| flex-start | 项目位于容器的顶部 |
| flex-end | 项目位于容器的底部 |
| baseline | 项目与容器的基线对齐 |
| initial | 将此属性设置为属性的默认值 |
| inherit | 从父元素继承属性的值 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>align-self</title><style>.flex {display: flex;flex-flow: row wrap;align-items: flex-end;border: 1px solid #CCC;height: 150px;}.flex div {width: 60px;height: 60px;border: 1px solid black;}.flex div:nth-child(4) {align-self: flex-start;/*项目位于容器的顶部*/}</style>
</head>
<body>
<div class="flex"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
</body>
</html>
网页效果：
flex
flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写，语法格式:flex: flex-grow flex-shrink flex-basis;
| 值 | 描述 |
|---|---|
| flex-grow | （必填参数）一个数字，用来设置项目相对于其他项目的增长量，默认值为 0 |
| flex-shrink | （选填参数）一个数字，用来设置项目相对于其他项目的收缩量，默认值为 1 |
| flex-basis | （选填参数）项目的长度，合法值为 auto（默认值，表示自动）、inherit（表示从父元素继承该属性的值） 或者以具体的值加 “%”、“px”、“em” 等单位的形式 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>flex</title><style>.flex {display: flex;flex-flow: row wrap;align-items: flex-end;border: 1px solid #CCC;}.flex div {width: 60px;height: 60px;border: 1px solid black;}.flex div:nth-child(2) {flex:0;}.flex div:nth-child(4) {flex:1 1 auto;}</style>
</head>
<body>
<div class="flex"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
</body>
</html>
网页效果：
总结
盒子模型是把网页中的每个元素都看做是一个盒子，是布局中一个很重要的概念，同时弹性布局是为了满足不同屏幕大小和设备类型（手机、电脑、平板…）适配问题。