CSS盒子模型的定义
- CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin），边框（border），内边距（padding），和实际内容（content）
- 如果把盒子模型看作是一个生活中的快递，那么内容部分等同于你买的实物，内边距等同于快递盒子中的泡沫，边框等同于快递盒子，外边距等同于两个快递盒子之间的距离

盒子模型的属性

Content(内容)——可以利用width与height设置大小
- 盒子的内容，显示文本和图像
Padding(内边距)——可以利用padding-left、right、top、bottom分别设置大小
- 清除内容周围的区域（两个值：第一个值上下，第二个值左右）
Border(边框)——可以利用border调整大小（也常称作宽度）
- 围绕在内边距和内容外的边框
Margin(外边距)——可以利用padding-left、right、top、bottom分别设置大小
- 清除边框外的区域，外边距是透明的（两个值：第一个值上下，第二个值左右）
模块框架

案例：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 400px;
            height:300px;
            background-color:blanchedalmond;
        }
        .box2{
            width: 200px;
            height: 100px;
            background-color: red;
            padding: 30px;
            border: 5px solid green;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

</html>

效果：

弹性盒模型的定义
- CSS3 弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间（默认排版为横版）
- 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成弹性容器通过设置 display 属性的值为 flex 将其定义为弹性容器弹性容器内包含了一个或多个弹性子元素

父元素的属性

案例初始状态：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 600px;
            height:600px;
            background-color: antiquewhite;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: green;
        }
        .box4{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>
</body>

</html>

效果：

开启弹性盒子

属性设置后子元素默认水平排列

代码：

    <style>
        .box1{
            width: 600px;
            height:600px;
            background-color: antiquewhite;
            display: flex;
        }

效果：

定义子元素在父容器的排列方向

定义
- flex-direction规定排列的方式是水平还是垂直（起始点都为左上角，即横轴justify-contet的flex-start或称作纵轴align-items的flex-start）。

代码1：row——横向从左到右排列（左对齐），默认方式

    <style>
        .box1{
            width: 600px;
            height:600px;
            background-color: antiquewhite;
            display: flex;
            flex-direction: row;
        }

效果1：

代码2：row-reverse——反转横向排列（右对齐，从后往前排，最后一项排在最前面

    <style>
        .box1{
            width: 600px;
            height:600px;
            background-color: antiquewhite;
            display: flex;
            flex-direction: row-reverse;
        }

效果2：

代码3：column——纵向排列

        .box1{
            width: 600px;
            height:600px;
            background-color: antiquewhite;
            display: flex;
            flex-direction: column;
        }

效果3：
- :

代码4：column-reverse——反转纵向排列，从后往前排，最后一项排在最上面

    <style>
        .box1{
            width: 600px;
            height:600px;
            background-color: antiquewhite;
            display: flex;
            flex-direction: column-reverse;
        }

效果4：

设定子元素的水平对齐——justify-content

定义
- 此方式规定了弹性盒子元素在横轴上的起始点，与flex-direction方式不同（为了调整子元素方向），此方式是为了调整子元素的起始位置。
- 若水平方向空间不足，整体的内容都会被压缩，各个内容的占比则会根据各个的大小，自动化进行权重处理，实现内容效果的最大化
- 效果图：

代码1：flex-start——弹性项目向行头紧挨着填充。默认值

    <style>
        .box1{
            width: 600px;
            height:600px;
            background-color: antiquewhite;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
        }

效果1：

代码2：flex-end——弹性项目向行尾紧挨着填充

    <style>
        .box1{
            width: 600px;
            height:600px;
            background-color: antiquewhite;
            display: flex;
            justify-content: flex-end;
        }

效果2：

代码3：center——弹性项目行中紧挨着填充

    <style>
        .box1{
            width: 600px;
            height:600px;
            background-color: antiquewhite;
            display: flex;
            justify-content: center;
        }

效果3：

代码4：压缩效果

压缩效果1：同等大小下的压缩效果

代码：父元素的宽度总大小为200，各个子元素为100、100、100。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 600px;
            height:600px;
            background-color: antiquewhite;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: green;
        }
        .box4{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>
</body>

</html>

效果：子元素之和的300大于200，又因各个宽度一致，权重一致，则呈现以下效果。

压缩效果2：不同大小下，根据权重实现的压缩效果

代码：父元素的宽度总大小为200，各个子元素为100、200、100。

    <style>
        .box1{
            width: 600px;
            height:600px;
            background-color: antiquewhite;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box3{
            width: 200px;
            height: 100px;
            background-color: green;
        }
        .box4{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>

效果：子元素之和的400大于200，又因各个宽度的权重为1:2:1，则呈现以下效果。

设置子元素的垂直对齐——align-items

定义
- 此方式规定了弹性盒子元素在纵轴上的起始点
- 空间不足时，压缩方式与水平相同，只不过方向变为纵向
- 效果图：

代码1：flex-start——弹性项目向列首紧挨着填充

    <style>
        .box1{
            width: 600px;
            height:600px;
            background-color: antiquewhite;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
        }

效果1：与横轴的flex-start效果相似

代码2：flex-end——弹性项目向列尾紧挨着填充

    <style>
        .box1{
            width: 600px;
            height:600px;
            background-color: antiquewhite;
            display: flex;
            flex-direction: row;
            align-items: flex-end;
        }

效果2：

代码3：center——弹性项目列中紧挨着填充

    <style>
        .box1{
            width: 600px;
            height:600px;
            background-color: antiquewhite;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

效果3：

子元素的属性

根据权重分配在父元素的展现形式（此方式会使得宽度或高度的设定效果失效（取决于flex-direction的规定——若为row则使得子元素宽度的设定失效，若为colum则使得子元素高度的设定失效））

代码1：权重为1:2:1，flex-direction为row

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 600px;
            height:600px;
            background-color: antiquewhite;
            display: flex;
            flex-direction: row;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: red;
            flex: 1;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: green;
            flex:2
        }
        .box4{
            width: 100px;
            height: 100px;
            background-color: blue;
            flex:1
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>
</body>

</html>

效果1：

代码2：权重为1:2:1，flex-direction为column

        .box1{
            width: 600px;
            height:600px;
            background-color: antiquewhite;
            display: flex;
            flex-direction: row;
        }

效果2：

本文含有隐藏内容，请开通VIP 后查看

py系统学习笔记：第七阶段：网页编程基础：第二章：CSS3：27.CSS盒子模型、弹性盒模型

目录

CSS盒子模型的定义

盒子模型的属性

案例：

代码：

效果：

弹性盒模型的定义

父元素的属性

案例初始状态：

代码：

效果：

开启弹性盒子

代码：

效果：

定义子元素在父容器的排列方向

定义

代码1：row——横向从左到右排列（左对齐），默认方式

效果1：

代码2：row-reverse——反转横向排列（右对齐，从后往前排，最后一项 排在最前面

效果2：

代码3：column——纵向排列

效果3：

代码4：column-reverse——反转纵向排列，从后往前排，最后一项排在 最上面

效果4：

设定子元素的水平对齐——justify-content

定义

代码1：flex-start——弹性项目向行头紧挨着填充。默认值

效果1：

代码2：flex-end——弹性项目向行尾紧挨着填充

效果2：

代码3：center——弹性项目行中紧挨着填充

效果3：

代码4：压缩效果

设置子元素的垂直对齐——align-items

定义

代码1：flex-start——弹性项目向列首紧挨着填充

效果1：与横轴的flex-start效果相似

代码2：flex-end——弹性项目向列尾紧挨着填充

效果2：

代码3：center——弹性项目列中紧挨着填充

效果3：

子元素的属性

代码1：权重为1:2:1，flex-direction为row

效果1：

代码2：权重为1:2:1，flex-direction为column

效果2：

网站公告

今日签到

热门文章

最新发布

代码2：row-reverse——反转横向排列（右对齐，从后往前排，最后一项排在最前面

代码4：column-reverse——反转纵向排列，从后往前排，最后一项排在最上面