CSS学习（2）｜元素显示模式、盒模型、Flex 布局

🔥keyipatience:个人主页

🎬作者简介：C/C++后端开发学习者

🌟专栏传送门：《c++》《linux》《c++高阶数据结构》《c++数据结构与算法》《前端学习》

⭐️patience is key in life

元素显示模式

一共 3 大类：块级、行内、行内块，核心看能不能宽高、占多少位置

1. 块级元素 block

特点：

1. 独占一行，后面元素自动换行
2. 可以设置 width、height、margin、padding
3. 默认宽度：撑满父容器 100%

常见标签：div、p、h1~h6、ul、li

display: block;

2. 行内元素 inline

特点：

1. 不独占一行，多个并排写在同一行
2. 不能设置宽高，宽高由文字内容决定
3. 只有水平方向 margin/padding 生效，垂直方向会有奇怪问题

常见标签：span、a、em

display: inline;

3. 行内块 inline-block

特点：

1. 不独占一行，可以多个并排
2. 能设置宽高、内外边距

常见标签：img、input

display: inline-block;

总结：

• block：独占一行，能设宽高
• inline：同行排列，不能设宽高
• inline-block：同行排列，能设宽高

一段代码看出3者区别：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
    .block{
        display:block;
        width:200px;
        height:80px;
        background:#6cf;
    }
    .inline{
        display:inline;
        width:200px;/*无效*/
        height:80px;/*无效*/
        background:orange;
    }
    .inlineblock{
        display:inline-block;
        width:200px;
        height:80px;
        background:#7f7;
        vertical-align: top; /* 关键！顶部对齐，消除错位 */
    }
</style>
</head>
<body>
    <div class="block">block块级1</div>
    <div class="block">block块级2（自动换行到下一行）</div>
    <br>

    <span class="inline">inline行内1</span>
    <span class="inline">inline行内2（并排，宽高失效）</span>
    
    <br>
    <div class="inlineblock">inline-block1</div>
    <div class="inlineblock">inline-block2（同一行，宽高生效）</div>
</body>
</html>

vertical-align

作用：**行内 / 行内块元素（inline和inline-block)**的垂直对齐

对象：inline和inline-block！！

inline-block 是行内排版，浏览器默认按文字基线对齐，不是按盒子顶部对齐！ 两个绿色盒子高度一样，但是文字位置不同，基线位置不一样，所以上下错开。！block 没有这个问题。

基线：文字底部那条看不见的线。浏览器会把所有行内 / 行内块元素，对齐到这条基线。

可用的常用值

• baseline 默认：基线对齐（文字底部那条看不见的线，绿色盒子错开的原因）

• top：元素顶部对齐

• middle：中线对齐

• bottom：底部对齐

使用 display 属性可以修改元素的显示模式. 可以把 div 等变成行内元素, 也可以把 a , span 等变成块级元素.

display: block 改成块级元素 常用这个时候改width,height就有效了

display: inline 改成行内元素 很少用

display: inline-block 改成行内块元素

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* a{
            display: block;
        } */
    </style>
</head>
<body>
    <a href="#">链接1</a>
    <a href="#">链接2</a>
</body>
</html>

加上display: block后：

盒模型

盒子从内 → 外 顺序：内容content → padding内边距 → border边框 → margin外边距

一段代码分清楚4个位置：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.wrap{
  margin:40px;         /* 👉 最外面白色空白：margin外边距 */
  border:8px solid black;/* 👉 黑色粗线：border边框 */
  padding:40px;        /* 👉 绿色区域：padding内边距 */
  
  background:#2ecc71;
  width:300px;
  height:180px;
  box-sizing:border-box;
}
.content{
  width:100%;
  height:100%;
  background:#3498db;  /* 👉 蓝色区域：内容content，放文字 */
}
</style>
</head>
<body>
  <div class="wrap">  <!--外层大盒子：绿色padding + 黑色border -->
    <div class="content">文字内容</div>  <!--内层小盒子：蓝色内容区 -->
</div>

  </div>
</body>
</html>

border 三条拆分属性

• border-width：边框粗细
• border-style：边框类型 solid 实线 /dashed 虚线 /dotted 点线
• border-color：边框颜色

简写：border:1px solid red; 顺序随便写。

也可以单独修改四个方向的任意一个边框

border-top/bottom/left/right

边框会撑大盒子

情况 1：浏览器默认（不加 box-sizing）

你写代码：

div{
  width:500px;
  height:250px;
  border:10px solid black;
}

width:500px 只代表蓝色内容区域， 边框是额外加上去的，左右各加 10px 盒子实际宽度 = 500 + 10 +10 = 520px 边框会把盒子撑大！

就像画一个 500 宽的纸，然后在纸外面再贴一圈 10px 粗的黑边框，整体变宽了。

---

情况 2：加上 box-sizing:border-box

div{
  width:500px;
  height:250px;
  border:10px solid black;
  box-sizing:border-box;
}

width:500px 是整个盒子最外边缘总宽度 ，包含 border+padding，不会往外变大。 盒子整体永远就是 500px，不会被边框撑大。

eg：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.box{
  width:200px;
  height:100px;
  border:10px solid red;
  background:#9cf;
  margin-bottom:30px;
}
.box2{
  width:200px;
  height:100px;
  border:10px solid red;
  background:#9cf;
  box-sizing:border-box;
}
</style>
</head>
<body>
<div class="box">盒子1：默认，被边框撑大</div>
<div class="box2">盒子2：border-box，不会撑大</div>
</body>
</html>

对比展示：

两个盒子代码写的 width 都是 200px

1. 盒子 1：实际宽度 = 200 + 10*2 = 220px，更宽
2. 盒子 2：整体宽度固定 200px，边框占在内部

padding 内边距

padding：内容 和 边框中间的距离（盒子里面的留白）

分开写 4 个方向

• padding-top 上边内边距

• padding-bottom 下边内边距

• padding-left 左边内边距

• padding-right 右边内边距

  padding: 5px; /* 四个方向全部 5px /
  padding: 5px 10px; / 上下5px，左右10px /
  padding: 5px 10px 20px; / 上5px，左右10px，下20px /
  padding: 5px 10px 20px 30px;/ 上5 右10 下20 左30 顺时针 */

padding 也会撑大盒子！

div{
  width:300px;
  height:200px;
  padding-top:5px;
  padding-left:10px;
}

默认状态下： 原本盒子 300×200，加上 padding 之后，盒子变宽变大 ，变成 310×205。和 border 一样，box-sizing:border-box 可以让 padding 不会撑大盒子

margin 外边距

margin：盒子外面的空白，用来控制盒子和别的盒子之间距离

四个单独写法：

• margin-top 盒子上方外面距离
• margin-bottom 盒子下方外面距离
• margin-left 盒子左侧外面距离
• margin-right 盒子右侧外面距离

margin 简写规则 和 padding 完全一样（顺时针：上 右 下 左）

margin: 10px;         /* 四个方向外边距都是10px */
margin:10px 20px;     /* 上下10px，左右20px */
margin:10px 20px 30px;/* 上10，左右20，下30 */
margin:10px 20px 30px 40px; /* 上10 右20 下30 左40 */

块级元素水平居中

margin:0 auto 的条件：块级元素（block） + 元素本身有确定宽度

.box{
    width: 200px;  /* 必须写宽度！！ */
    margin: 0 auto;
}

解释

1. margin:0 auto：左右外边距自动分配剩余空间
2. 前提条件：必须设置 width

如果不写 width，块默认占满整行，本身就没有多余空间可以居中

对比：text-align:center 是让盒子里面的文字 / 行内元素居中，不能让这个块盒子居中。

去除浏览器默认样式

浏览器会给元素加上一些默认的样式, 尤其是内外边距. 不同浏览器的默认样式存在差别. 为了保证代码在不同的浏览器上都能按照统一的样式显示, 往往我们会去除浏览器默认样式. 使用通配符选择器即可完成这件事情.

* {
    marign: 0;
    padding: 0;
}

弹性布局

初体验 创建一个 div, 内部包含三个 span

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Flex初体验</title>
<style>
div {
    width: 100%;
    height: 150px;
    background-color: red;
    /* 第2步打开弹性，取消注释看效果 */
    /* display: flex; */

    /* 第3步，打开这个 */
    /* justify-content: space-around; */

    /* 第4步，换成这个 */
    /* justify-content: flex-end; */
}
div>span {
    background-color: green;
    width: 100px;
}
</style>
</head>
<body>
<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>
</body>
</html>

分步效果

1.初始（无 flex） span是行内元素，width:100px不生效，绿色只包住文字，三个紧贴

2.给 div 加上 display:flex; 父盒子开启弹性，子 span 直接变成弹性项目 此时width:100px生效！span 拥有宽高，并排排在最左边。

变成弹性项目后，不再受行内元素限制，宽高可以生效。（效果和display inline-block)一样

3.再加 justify-content: space-around; 主轴分配空间：左右两边也有空白，每个元素两边都有相等空隙，三个绿色盒子均匀散开。

4.改成 justify-content: flex-end; 全部子元素跑到主轴右侧（右边对齐）

Flex 基础概念

flex 是 flexible box 的缩写. 意思为 "弹性盒子". 任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局.

flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式.

基础概念:

**1.**被设置为 display:flex 属性的元素, 称为 flex container

**2.**它的所有子元素立刻称为了该容器的成员, 称为 flex item

**3.**flex item 可以纵向排列, 也可以横向排列, 称为 flex direction(主轴)

使用前，一定要确定主轴方向

• row 默认：主轴水平，从左往右排
• column：主轴垂直，从上往下排

父盒子写了 display:flex，子元素变成弹性项目 flex item 这时子身上这 3 个属性直接不起任何作用 ： float、clear、vertical-align

1. float（浮动）失效 就算子写 float:left，浏览器直接忽略。 弹性盒子自有一套排列规则，不再使用浮动布局。
2. clear（清除浮动）失效 clear 本来用来解决浮动带来的高度塌陷，弹性布局根本不用浮动，所以 clear 没用。
3. vertical-align 失效【重点！】 vertical-align 原本是给行内 / 行内块（inline和inline-blcock)用来上下对齐的。 一旦变成弹性项目，vertical-align 直接作废 。 不能用 vertical-align 控制弹性子盒子垂直对齐 弹性布局垂直居中用父盒子的 align-items: center

常用属性 justify-content

值	通俗解释
flex-start	默认，全部子元素靠左排，紧贴左边
flex-end	全部子元素靠右排
center	全部子元素挤在一起，放到中间
space-between	左右两个贴紧容器两边，中间空隙平分，两头无空白
space-around	每个盒子左右都有空白，两端也留空隙（两端空隙大小是中间空隙的一半）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>justify-content全部取值演示</title>
<style>
.wrap{
    width:600px;
    height:160px;
    background:#cccccc;
    display:flex;
    /* 修改下面这一行，切换5个值看效果 */
    justify-content: flex-start;

}
.item{
    width:100px;
    height:100px;
    background:lightgreen;
    text-align:center;
    line-height:100px;
}
</style>
</head>
<body>
<div class="wrap">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>
</body>
</html>

space-between：

space-around：

align-items 讲解

主轴水平（默认flex-direction:row）时： justify-content → 水平（主轴） align-items → 垂直（侧轴 / 交叉轴）

值	大白话
stretch（默认）	子不设置 height，自动拉伸填满父高度；写了 height 就不会拉伸
center	侧轴居中（最常用！垂直居中）
flex-start	贴侧轴起点（顶部靠上）
flex-end	贴侧轴终点（底部靠下）

align-items 没有 space-between / space-around！

对比：

1. align-items：单行弹性，控制一行内子元素交叉轴对齐
2. align-content：多行弹性（flex-wrap:wrap 换行后） ，控制多行整体分布，才有space-between/space-around

一段代码看4 个取值效果（align-items）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>align-items全部取值演示</title>
<style>
/* 父盒子：弹性容器 flex container */
.father{
    width:500px;
    height:300px;
    background:#ccc;
    display:flex; /* 开启弹性布局，子元素变成弹性项目 */
    justify-content:center; /* 主轴（水平）居中 */
    /* 改这里切换4种效果：stretch / center / flex-start / flex-end */
    /* align-items：控制【单行】子元素在交叉轴(垂直)上的对齐方式 */
    align-items: stretch;
}
/* 子盒子：弹性项目 flex item */
.son{
    width:80px;
    /* 去掉下面height，stretch拉伸效果才会出现 */
    /* 如果子不设置height，stretch会把子高度拉伸填满父盒子 */
    height:80px;
    background:orange;
    margin:0 5px; /上下不留空隙，左右各留 5px 空隙/
    text-align:center; /* 文字水平居中 */
    line-height:80px; /* 文字垂直居中，和盒子高度一样 */
}
</style>
</head>
<body>
<!-- 父容器father，里面3个子盒子 -->
<div class="father">
    <div class="son">1</div>
    <div class="son">2</div>
    <div class="son">3</div>
</div>
</body>
</html>

注意上面的代码都先控制了 justify-content:center即水平居中;

1.align-items: stretch 默认

子不写 height ，自动拉高填满父盒子高度；子写 height 则拉伸失效 ✅ 测试方法：注释掉 .son 的 height:80px;

无height：

有height：

2.align-items: center

子盒子在侧轴（垂直方向）居中，最常用垂直居中

3.align-items: flex-start

全部子盒子贴在父盒子顶部

4.align-items: flex-end

全部子盒子贴在父盒子底部

问题怎么将一张图片水平居中？

现在如果将图片水平居中就可以有3种方式

方法 1：父盒子 text-align: center（最常用）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.father{
    text-align:center;
}
</style>
</head>
<body>
<div class="father">
    <img src="test.jpg" alt="">
</div>
</body>
</html>

方法 2：图片设置 display:block; margin:0 auto;

img默认是行内块 inline-block，自带图片本身的宽高（明确了width）

把图片转为块级元素，再用块居中方案

img{
    display:block;
    margin:0 auto;
}

方法 3：Flex 弹性布局（推荐，同时可以垂直居中）

父盒子开 flex，justify-content:center

.father{
    display:flex;
    justify-content:center;
}

link 标签

<link> 是单标签 ，写在 <head> 里面，用来引入外部资源。 最常用：引入外部 CSS 样式文件和设置网页小图标

<link rel="属性" href="文件地址">

两个核心属性：

1.rel：relationship，当前引入的文件和这个 html 是什么关系

• stylesheet = 样式表
• 含义：href 指向的文件，是 CSS 样式表，浏览器读到就当成 CSS 加载，用来美化页面

• icon = 图标
• 含义：href 指向的图片，是网页标签页小图标（浏览器左上角那个小图标）

2.href：资源路径（本地文件 / 网络网址）

1. 引入外部 CSS（最常用）

<link rel="stylesheet" href="style.css">

2.设置网页小图标（favicon，浏览器标签左上角图标）

<link rel="icon" href="./favicon.ico">

广告板实现：

要求：

效果：

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 最外层大盒子：广告板整体容器 */
        .box{
            width: 308px;       /* 盒子宽度308px */
            height: 204px;      /* 盒子高度204px */
            border: #d8dad8 solid 1px;  /* 边框：颜色#d8dad8，实线，1px粗细（你原来写10px会很粗，改成1px） */
            background-color: #fcfffc;  /* 盒子背景色 */
        }
        /* 标题区域 广告板 */
        .title{
            height: 40px;                /* 标题盒子高度40px */
            border-bottom: 2px dotted #e8ebe8; /* 下边框：圆点虚线，颜色#e8ebe8 */
            padding-left:20px;           /* 文字距离左边20px（内边距） */
            color:#9e9d9a;               /* 标题文字颜色 */
            font-size:18px;              /* 标题文字大小18px */
            line-height:40px;            /* 行高等于高度，文字垂直居中 */
        }
        /* 正文内容区域 */
        .item{
            font-size:16px;              /* 正文字号16px */
            color:#898b76;               /* 正文文字颜色 */
            padding-left: 25px;          /* 文字距离左侧25px */
            line-height: 28px;           /* 行高28px，控制每行文字间距 */
            padding-top: 10px;           /* 内容距离标题下方，上方内边距10px */
        }
    </style>
</head>
<body>
    <!-- 广告板外层盒子 -->
    <div class="box">
        <!-- 标题 -->
        <div class="title">广告板</div>
        <!-- 正文内容 -->
        <div class="item">
            赔钱清仓甩卖, 全场一律八折优惠!<br>
            赔钱清仓甩卖, 全场一律八折优惠!<br>
            赔钱清仓甩卖, 全场一律八折优惠!<br>
            赔钱清仓甩卖, 全场一律八折优惠!
        </div>
    </div>
</body>
</html>

热榜显示：

效果展示：

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 兼容旧版IE浏览器 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 视口设置，适配移动端 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度热榜</title>
    <!-- 引入阿里图标库css文件，提供刷新字体图标 -->
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_5242802_2yx3j8n7y97.css">
    <style>
        /* 全局清除样式，重置默认边距，统一盒模型 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        table {
            width: 536px;
            border-collapse: collapse; /* 合并表格边框，消除单元格之间缝隙 */
        }
        /* 表头单元格样式 */
        th {
            font-size: 20px;
            font-weight: bold;
            padding-bottom:10px;
        }
        /* 第一列：热榜标题，占表格宽度80%，文字左对齐 */
        .col-1 {
            width: 80%;
            text-align: left;
        }
        /* 第二列：热度，占表格宽度20%，文字居中 */
        .col-2 {
            width: 20%;
            text-align: center;
        }
        /* "换一换"链接样式 */
        .change {
            color: #0055db;
            text-decoration: none; /* 取消a标签默认下划线 */
            font-size:20px;
        }
        /* 鼠标悬浮在换一换链接，添加下划线 */
        .change:hover {
            text-decoration: underline;
        }
        /* 阿里字体图标样式 */
        .iconfont {
            font-size:20px;
            /* iconfont图标是特殊字体，每一个图标对应一个文字字符，所以用font-size控制大小 */
            vertical-align: middle; /* 和同行文字垂直居中对齐 */
            margin-left:4px; /* 图标和前面文字拉开一点距离 */
        }
        /* 表格内容单元格 */
        td {
            font-size:18px;
            padding:15px 0; /* 上下内边距，撑开行高 */
            border-bottom: 2px solid #f3f3f3; /* 底部灰色分割线 */
        }
        /* 排名序号方块通用样式，行内块可以设置宽高 */
        .num {
            display:inline-block;
            width:20px;
            height:20px;
            color:#fff; /* 序号文字白色 */
            text-align:center; /* 文字水平居中 */
            line-height:20px; /* 行高等于盒子高度，文字垂直居中 */
            margin-right:8px; /* 序号方块 和 标题文字 间隔8px */
        }
        /* 第1名红色背景 */
        .num1 {
            background-color:#f54545;
        }
        /* 第2名橙色背景 */
        .num2 {
            background-color:#ff8547;
        }
        /* 第3名黄色背景 */
        .num3 {
            background-color:#ffac38;
        }
        /* 第四名及以后蓝色背景 */
        .num-other {
            background-color:#8eb9f5;
        }
        /* 热榜标题链接 */
        .title-link {
            color:#0055db;
            text-decoration:none;
        }
        /* 鼠标悬浮标题，出现下划线 */
        .title-link:hover {
            text-decoration:underline;
        }
        /* 热度数字文字 */
        .hot {
            color:#000;
        }
    </style>
</head>
<body>
<!-- 热榜表格整体 -->
<table>
    <!-- 表头一行 -->
    <tr>
        <th class="col-1">百度热榜</th>
        <th class="col-2">
            <!-- 换一换文字 + 刷新字体图标 -->
            <a href="#" class="change">换一换<i class="iconfont icon-shuaxin"></i></a>
        </th>
    </tr>
    <!-- 第1条热榜 -->
    <tr>
        <td class="col-1">
            <span class="num num1">1</span>
            <a href="#" class="title-link">全国秋季招聘正式启动</a>
        </td>
        <td class="col-2 hot">474万</td>
    </tr>
    <!-- 第2条热榜 -->
    <tr>
        <td class="col-1">
            <span class="num num2">2</span>
            <a href="#" class="title-link">多地调整中小学放学时间</a>
        </td>
        <td class="col-2 hot">474万</td>
    </tr>
    <!-- 第3条热榜 -->
    <tr>
        <td class="col-1">
            <span class="num num3">3</span>
            <a href="#" class="title-link">油价新一轮调价窗口开启</a>
        </td>
        <td class="col-2 hot">474万</td>
    </tr>
    <!-- 第4条热榜 -->
    <tr>
        <td class="col-1">
            <span class="num num-other">4</span>
            <a href="#" class="title-link">国产手机发布全新系统</a>
        </td>
        <td class="col-2 hot">474万</td>
    </tr>
</table>
</body>
</html>