本篇是 css 最后的布局优化

元素的显示模式

块级元素

✏️举个例子：

1
2
3
4
5
6
7
h1 - h6
p
div
ul
ol
li
...

特点:

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

🔥值得注意的是：

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

行内元素

✏️举个例子：

1
2
3
4
5
6
7
8
9
10
11
a
strong
b
em
i
del
s
ins
u
span
...

特点:

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

🔥值得注意的是：

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

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

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

改变显示模式

✏️举个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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 改成行内块元素

✏️展示效果：

在这里插入图片描述

盒模型

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

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

🔥值得注意的是：

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

边框

✏️举个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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

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

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

🔥值得注意的是：

支持简写，没有顺序要求

1
border: 1px solid red;

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

1
border-top/bottom/left/right

内边距

✏️举个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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 (顺时针)

下面的外边框同理

✏️展示效果：

在这里插入图片描述

外边距

✏️举个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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

✏️展示效果：

在这里插入图片描述

块级元素水平居中

✏️举个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!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 是让文本居中

这三种写法均可：

1
2
3
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

🔥值得注意的是：

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

✏️展示效果：

在这里插入图片描述

去除浏览器默认样式

1
2
3
4
* {
    marign: 0;
    padding: 0;
}

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

弹性布局

✏️举个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!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 都会失效

主轴（横轴）

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

✏️举个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!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：项目在行之前、行之间和行之后留有空间

✏️展示效果：

在这里插入图片描述

侧轴（纵轴）

✏️举个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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>
  • stretch：默认值，行拉伸以占据剩余空间
  • center：朝着弹性容器的中央对行打包
  • flex-start：朝着弹性容器的开头对行打包
  • flex-end：朝着弹性容器的结尾对行打包
  • space-between：行均匀分布在弹性容器中
  • space-around：行均匀分布在弹性容器中，两端各占一半

🔥值得注意的是：

align-items 只能针对单行元素来实现，如果有多行元素，就需要使用 item-contents

✏️展示效果：

在这里插入图片描述

希望读者们多多三连支持

小编会继续更新

你们的鼓励就是我前进的动力！

请添加图片描述