【前端基础】层叠宇宙的代码旅人：css（下）

原创已于 2025-06-23 15:47:14 修改 · 1.4k 阅读

48 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css

于 2025-06-23 15:44:41 首次发布

前端基础专栏收录该内容

5 篇文章

订阅专栏

文章目录

1.元素的显示模式
2.盒模型
2.4 块级元素水平居中
3.去除浏览器默认样式
4.弹性布局
- 4.1 主轴（横轴）
- 4.2 侧轴（纵轴）
希望读者们多多三连支持
小编会继续更新
你们的鼓励就是我前进的动力！

本篇是 css 最后的布局优化

1.元素的显示模式

1.1 块级元素

✏️举个例子：

h1 - h6
p
div
ul
ol
li
...

特点:

独占一行
高度宽度，内外边距，行高都可以控制.
宽度默认是父级元素宽度的 100% (和父元素一样宽)
是一个容器(盒子)，里面可以放行内和块级元素

🔥值得注意的是：

文字类的元素内不能使用块级元素，p 标签主要用于存放文字，内部不能放块级元素，尤其是 div

1.2 行内元素

✏️举个例子：

a
strong
b
em
i
del
s
ins
u
span
...

特点:

不独占一行，一行可以显示多个
设置高度，宽度，行高无效
左右外边距有效(上下无效)，内边距有效
默认宽度就是本身的内容
行内元素只能容纳文本和其他行内元素，不能放块级元素

🔥值得注意的是：

a 标签中不能再放 a 标签 (虽然 chrome 不报错，但是最好不要这么做)，a 标签里可以放块级元素，但是更建议先把 a 转换成块级元素

1.3 行内元素和块级元素的区别

块级元素独占一行，行内元素不独占一行
块级元素可以设置宽高，行内元素不能设置宽高
块级元素四个方向都能设置内外边距，行内元素垂直方向不能设置

1.4 改变显示模式

✏️举个例子：

<!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;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">这是个链接</a>
    </div>
</textarea>
</body>
</html>

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

display: block 改成块级元素 [常用]
display: inline 改成行内元素 [很少用]
display: inline-block 改成行内块元素

✏️展示效果：

在这里插入图片描述

2.盒模型

在这里插入图片描述
每个元素都相当于一个盒子，由四个部分组成

边框 border
内容 content
内边距 padding
外边距 margin

🔥值得注意的是：

数字表示长度，单位是 px，- 表示长度为 0

2.1 边框

✏️举个例子：

<!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>
        div {
            width: 200px;
            height: 100px;
            border-width: 10px;
            border-style: solid;
            border-color: green;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

粗细：border-width
样式：border-style，默认没边框，solid 实线边框 dashed 虚线边框 dotted 点线边框
颜色：border-color

在这里插入图片描述

按照正常来说应该是 200*100 的，但是边框撑大了盒子变成 220*120

* {
    box-sizing: border-box;
}
//* 为通配符选择器

可以用 box-sizing 来改变浏览器默认模式，使边框不再撑大盒子，下面的内外边距同理

🔥值得注意的是：

支持简写，没有顺序要求

border: 1px solid red;

可以改四个方向的任意边框

border-top/bottom/left/right

2.2 内边距

✏️举个例子：

<!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>
        div {
            width: 200px;
            height: 100px;
            padding: 10px 10px 10px 10px;
            border: 10px green solid;
        }
        * {
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>内边距</div>
</body>
</html>

默认内容是顶着边框来放置的，用 padding 来控制这个距离

可以给四个方向都加上边距，也可以用简写：

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; 表示上 5px，右 10px，下 20px，左 30px (顺时针)

下面的外边框同理

✏️展示效果：

在这里插入图片描述

2.3 外边距

✏️举个例子：

<!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>
        div {
            width: 200px;
            height: 100px;
            padding: 10px 10px 10px 10px;
            margin: 10px 10px 10px 10px;
            border: 10px green solid;
        }
        * {
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>盒子1</div>
    <div>盒子2</div>
</body>
</html>

控制盒子和盒子之间的距离，可以给四个方向都加上边距：

margin-top
margin-bottom
margin-left
margin-right

✏️展示效果：

在这里插入图片描述

2.4 块级元素水平居中

✏️举个例子：

<!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>
        div {
            width: 200px;
            height: 100px;
            /* padding: 10px 10px 10px 10px;
            margin: 10px 10px 10px 10px; */
            border: 10px green solid;
            margin: auto;
            text-align: center;
        }
        * {
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>盒子1</div>
    <div>盒子2</div>
</body>
</html>

margin: auto 表示块元素自适应，会自动居中，text-align: center 是让文本居中

这三种写法均可：

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

🔥值得注意的是：

对于垂直居中，不能使用 "上下 margin 为 auto " 的方式

✏️展示效果：

在这里插入图片描述

3.去除浏览器默认样式

* {
    marign: 0;
    padding: 0;
}

浏览器会给元素加上一些默认的样式，尤其是内外边距，不同浏览器的默认样式存在差别，为了保证代码在不同的浏览器上都能按照统一的样式显示，往往我们会去除浏览器默认样式

4.弹性布局

✏️举个例子：

<!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>
        div{
            width: 200px;
            height: 200px;
            background-color: green;
            display:flex;
        }
        span{
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <span>盒子1</span>
        <span>盒子2</span>
        <span>盒子3</span>
    </div>
</body>
</html>

前面的图片是没加 display:flex 的，后面的是加了的，这段代码的作用是让块元素里的成员能够按照代码弹性布置，而不是自适应文本的大小
在这里插入图片描述

当父元素设置为 display: flex 之后，子元素的 float、clear、vertical-align 都会失效

4.1 主轴（横轴）

justify-content 用于设置主轴上的子元素排列方式

✏️举个例子：

<!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>
        div{
            width: 200px;
            height: 200px;
            background-color: green;
            display:flex;
            justify-content: space-around;
        }
        span{
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <span>盒子1</span>
        <span>盒子2</span>
        <span>盒子3</span>
    </div>
</body>
</html>

flex-start：默认值，项目位于容器的开头
flex-end：项目位于容器的结尾
center：项目位于容器中央
space-between：项目在行与行之间留有间隔
space-around：项目在行之前、行之间和行之后留有空间

✏️展示效果：

在这里插入图片描述

4.2 侧轴（纵轴）

✏️举个例子：

<!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>
        div{
            width: 200px;
            height: 200px;
            background-color: green;
            display:flex;
            justify-content: space-around;
            align-items: center;
        }
        span{
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <span>盒子1</span>
        <span>盒子2</span>
        <span>盒子3</span>
    </div>
</body>
</html>