CSS盒子模型及布局

发表于 2022-07-15 更新于 2022-07-23 本文字数： 7.3k 阅读时长 ≈ 7 分钟

盒子模型

盒子模型概述

盒子模型，顾名思义就是用来装东西的，它装的东西就是HTML元素的内容。
我们可以把一个HTML元素看成是一个盒子

盒子构成

一个盒子由内容，内边距，边框，外边距构成

内容（content）：表示元素的宽高，若元素设置了宽度和高度，则内容空间就位宽高范围，若没有宽高，则内容空间为盒子中实际内容的所占空间
内边距（padding）：表示盒子内容与边框之间的距离
边框（border）：表示盒子的边框，位于内边距和外边距指甲剪
外边距（margin）：表示盒子边框以外的距离
注：
- 盒子的内外边距是透明的
- 盒子的大小不是我们通过CSS设置的width和height，而是内容宽高+内边距+边框+外边距

盒子属性解析

内边距（padding）

就是盒子里的内容距离盒子边框的距离

作用：
- 可以让内容和盒子的边框有一定的距离
属性值
- padding:Xpx;给盒子的内容四周都加上内边距
- padding:Xpx Xpx;两个值分别上下，左右
- padding:Xpx Xpx Xpx Xpx;分别表示上，右，下，左
- padding-left/right/top/bottom:Xpx;给内容的某一边加内边距

示例一

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .PDemo{
            width: 150px;
            height: 100px;
            background-color: red;
            padding: 20px;
        }
    </style>
</head>

边框（border）

表示盒子的边界

作用
- 为盒子四周或某一边添加带有颜色的边框
属性
- border:边框宽度实线/虚线颜色
- border-left/right/top/bottom:边框宽度实线/虚线颜色

外边距（margin）

表示盒子距离它周围的距离

作用：可以用来调整元素与元素之间的间距，也可以用来移动元素（注：微调）
属性：
- margin:Xpx;给盒子的内容四周都加上外边距
- margin:Xpx Xpx;两个值分别上下，左右
- margin:Xpx Xpx Xpx Xpx;分别表示上，右，下，左（外边距它渲染显示的时候也是从左上开始）
- margin-left/right/top/bottom:Xpx;使盒子对四周的某一边有距离
注：
- 元素在渲染显示的时候左上属性优先

第二章布局

布局

布局是为了对整个网页进行排版，把网站内容安排在多个列中，用以丰富网页背景，色彩，内容等网页外观，就跟房子装修一样，我们需要把我们的房子装修漂漂亮亮的而且功能实用，总不能把床放在卫生间，把马桶放在燃气灶旁边吧

我么在制作前期需要对UI设计师提供的设计图片进行布局分析，明确那个模块在什么位置，我们需要通过布局将模块创建出来，放在它该有的位置上，然后对模块进行内容填充

入门布局–圣杯布局

入门图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0 auto;
        }
        .top{
            width: 100%;
            height: 80px;
            margin-bottom: 10px;
        }
        .middle{
            width: 100%;
            height: 500px;
            margin-bottom: 10px;
        }
        .middle div{
            float: left;
        }
        .middle div:nth-child(1),.middle div:nth-last-child(1){
            width: 30%;
            height: 100%;
            background-color: #339fff;
        }
        .middle div:nth-child(2){
            width: 40%;
            height: 100%;
            background-color: #2279ee;
        }
        .bottom{
            width: 100%;
            height: 80px;
        }
        .color1{
            background-color: #339fff;
        }

    </style>
</head>
<body>
    <!--顶部-->
    <div class="top color1"></div>
    <!--中部-->
    <div class="middle">
        <!--左-->
        <div></div>
        <!--中-->
        <div></div>
        <!--右-->
        <div></div>
    </div>
    <!--底部-->
    <div class="bottom color1"></div>
</body>
</html>

弹性布局

传统布局与弹性布局

传统布局方法遵循文档流的模式，依赖浮动，相较于一些特殊布局，不容易实现（如：垂直居中效果）
弹性布局诞生于2009年，弹性布局也称之为flex布局
弹性布局可以完整的响应式的实现各种页面布局

在使用弹性布局时需要知道的两个概念

容器：需要添加弹性布局的父元素
项目：弹性布局容器中的每一个子元素称之为项目

在使用弹性布局时需要了解的两个基本方向

主轴：在弹性布局中，需要通过样式属性去规定水平/垂直方向为主轴
交叉轴：与主轴垂直的另一个方向称之为交叉轴

弹性布局的使用步骤

给父元素添加display:flex/inline-flex来规定该容器为弹性布局显示，而不遵循常规的文档流模式
添加弹性布局的相关属性样式
注：当元素采用了弹性布局后，子元素的浮动会失效
入门

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100%;
            height: 100px;
            /*规定容器*/
            display: flex;
            background-color: aqua;
        }
        .box div{
            width: 20%;
            height: 50%;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>

配合display:flex使用的12个属性（6个容器属性，6个项目属性）

6个容器属性

flex-direction 改属性决定主轴的方向（表示在容器中项目的排列方向）

属性值	方向
row 默认值	主轴为水平方向，从父容器的左部开始渲染显示
row-reverse	主轴为水平方向，从父容器的右部开始渲染显示
column	主轴为垂直方向，从父容器的左上部开始渲染显示
column-reverse	主轴为垂直方向，从父容器的左下部开始渲染显示

b. flex-wrap 项目的排列方式（默认情况下，所有项目都排列在一条轴线上）

属性值	作用
nowrap	不换行，当容器的宽度不够时，容器中的每个项目将会被挤压
wrap	换行，按项目的实际宽度执行排列，当容器宽度不够时自动换行，并且第一行在容器的最上方
wrap-reverse	换行，第一行在容器的最下方

c. flex-flow:flex-direction flex-wrap

默认值为 flex-flow:row wrap

d. justify-content 定义了项目在主轴方向的对齐方式

属性	作用
flex-start	项目位于主轴的起点
flex-end	项目位于主轴的终点
center	居中对齐
space-between	两端对齐，项目间的间隔相等，开头项目和结束项目与容器两边没有间隔
space-around	两端对齐，项目间的间隔相等，开头项目和结束项目与容器两边有一定的间隔

e. align-items 交叉轴对齐方式

属性	作用
flex-start	交叉轴起点对齐
flex-end	交叉轴终点对齐
center	居中对齐
baseline	以项目的第一行文字为基线对齐，文字的行高，字体大小会直接影响后边的项目对齐
stretch	如果项目没有设置高度，则添加该属性后项目会占满整个容器

f. align-content 定义多根轴线的对齐方式，如果定义一根轴线则该属性不生效（不推荐出现多根轴线）

属性	作用
flex-start	与交叉轴的起点对齐
flex-end	与交叉轴的终点对齐
center	与交叉轴的中点对齐
space-between	与交叉轴的两端对齐，轴线之间的间隔平均分布，开头和结束项目与容器没间隔
space-around	与交叉轴的两端对齐，轴线之间的间隔都相等
stretch	轴线占满整个交叉轴

6个项目属性

1. order 定义项目排列的顺序，数值越小，排列越靠前，默认值为0，当添加了大于0的值后，该项目则不遵循文档流的排列方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100%;
            height: 300px;
            /*规定容器*/
            display: flex;
            /*主轴*/
            flex-direction: row;
            /*flex-direction: row-reverse;*/
            /*flex-direction: column;*/
            /*flex-direction: column-reverse;*/
            /*排列方式*/
            /*flex-wrap: nowrap;*/
            flex-wrap: wrap;
            /*flex-wrap: wrap-reverse;*/
            background-color: aqua;
            /*主轴对齐方式*/
            /*justify-content: flex-start;*/
            /*justify-content: flex-end;*/
            /*justify-content: space-around;*/
            justify-content: space-between;
            /*多根轴线与交叉轴的对齐方式*/
            /*align-content: center;*/
            align-content: space-between;
        }
        .box div{
            width: 20%;
            height: 50px;
            background-color: red;
        }
        .big{
            font-size: 30px;
            line-height: 50px;
        }
        .orderStyle{
            order: 5;
        }
        .orderStyle1{
            order: 7;
        }
        .orderStyle2{
            order: 6;
        }
        .orderStyle3{
            order: 4;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="big orderStyle">1</div>
        <div>2</div>
        <div class="orderStyle1">3</div>
        <div>4</div>
        <div class="orderStyle2">5</div>
        <div>6</div>
        <div>7</div>
        <div class="orderStyle3">8</div>
        <div>9</div>
        <div>10</div>
    </div>
</body>
</html>

b. flex-grow 用来定义项目的放大比例，默认为0，在为0的情况下，即使容器还有空间，项目也不会放大，当值大于零时容器还有空间余量的话则添加了该属性的项目会放大

c. flex-shrink 定义项目是否可压缩，默认值为1，若空间不够，该项目将被缩小，如果其中某一个项目的值被设置为0，则它的空间不会被压缩

d. flex-basis 定义了项目占据主轴的空间（设置项目的宽度，当项目添加了该属性后，width会失效）

e. align-self 设置某个项目在交叉轴上的对齐方式，其参数和align-items一致，当某个项目添加了该属性后，则会覆盖父容器上的align-itmes属性，其默认值为auto（表示继承父容器的align-itmes值）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100%;
            height: 300px;
            /*规定容器*/
            display: flex;
            /*主轴*/
            flex-direction: row;
            /*flex-direction: row-reverse;*/
            /*flex-direction: column;*/
            /*flex-direction: column-reverse;*/
            /*排列方式*/
            flex-wrap: nowrap;
            /*flex-wrap: wrap;*/
            /*flex-wrap: wrap-reverse;*/
            background-color: aqua;
            /*主轴对齐方式*/
            /*justify-content: flex-start;*/
            /*justify-content: flex-end;*/
            /*justify-content: space-around;*/
            justify-content: space-between;
            align-items: center;
        }
        .box div{
            width: 20%;
            height: 50px;
            background-color: red;
        }
        .fs{
            flex-shrink: 0;
            flex-basis: 50%;
            align-self: flex-end;
        }
        .as{
            align-self: flex-start;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="fs">1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div class="as">7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
</body>
</html>

f. flex属性，该属性相当于flex-grow，flex-shrink，flex-basis的简写，默认值0,1 auto