HTML & CSS

一、块级标签与行内标签

块级标签(元素)

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

行内标签(元素)

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

块级标签与行内标签的区别与联系

① 一般来说，块级标签显示效果独占一行，行内元素不独占一行。

② 块级标签高度、宽度、内外边距…都是可以设置的，行内标签高度宽度…设置都是无效的，行内标签设置左右外边距有效，内边距有效，上下边距无效。
这是比较重要的一点，如果不注意这一点，在日常写代码的过程中，出现了设置行内标签样式这一错误，怎么找也找不出来。

③ 块级标签默认的宽度就是和父标签一样，行内标签默认宽度就是和本身内容相关，如果没有内容，宽度就是 0 了。

④ 块级标签的内部可以容纳其他块级标签和行内标签，行内标签的内部只能包含行内标签，不能包含块级标签。

展示1

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>demo11title>

    <style>
        .parent {
            width: 500px;
            height: 500px;
            background-color: green;
        }

        .child {
            /* 不写 width, 默认和父标签一样宽 */
            /* 但是不写 height, 默认为 0 (看不到了) */ 
            height: 200px; 
            background-color: aqua;
        }
    style>
head>

<body>
    <div class="parent">
        <div class="child">
            child1
        div>

        <div class="child">
            child2
        div>
    div>
body>

html>
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
31
32
33
34
35
36
37

类选择器是 .clild，这对应的标签是 div ，也就是块级标签，所以显示结果是独占一行的。

展示结果：

展示2

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>demo12title>

    <style>
        .parent {
            width: 500px;
            height: 500px;
            background-color: green;
        }

        .child {
            height:200px;
            background-color: aqua;
        }
    style>
head>

<body>
    <div class="parent">
        <span class="child">
            child1
        span>

        <span class="child">
            child2
        span>
    div>
body>

html>
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
31
32
33
34
35

我们将 div 换成 span，结果显示不独占一行，这是连在一起的。
此外，在我们为 “span” 标签设置高度样式为 200px 的时候，我们发现，这并不起作用，原因就是 “span” 属于行内标签，无法设置高度样式，它的目的只是显示内容，但字体大小可以显自由设置。

展示结果：

display 属性的用法

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

将行内标签转换成块级标签是比较常用的，因为许多块级标签可以设置的样式，在行内标签中是不可以设置的。

展示3

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>demo13title>

    <style>
        a {
            display: block;
            width: 300px;
            height: 100px;
            background-color: gray;
        }
    style>
head>

<body>
    <a href="#">链接1a>
    <a href="#">链接2a>
    <a href="#">链接3a>
    <a href="#">链接4a>
body>

html>
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

展示结果：

二、盒模型

盒模型的效果图：

1. border 边框

展示1

border-width:  边框宽度
border-style:  边框样式
border-color:  边框颜色
1
2
3

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>demo1title>

    <style>
        div {
            width: 400px;
            height: 200px;
            background-color:aquamarine;

            border-width: 10px;
            border-style: solid;
            border-color: red;
        }
    style>
head>

<body>
    <div>welcome to the worlddiv>
body>

html>
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

展示结果：

展示2

在展示1 中，div 标签的实际内容大小应为 400x200，但实际上，由于添加了边框，显示结果为 420x220. 这其实就是因为边框撑大盒子的缘故，如果需要取消这一现象，就可以使用如下代码：

* {
    box-sizing: border-box;
}
1
2
3

展示结果：

展示3

另外，代码也可以使用如下形式，对于上下左右四个边框也能采取不同的格式与尺寸，这些都可以参照 CSS参考手册，进一步设置。

border: 10px solid green;
1

border-top: 10px double green;
border-right: 10px double yellow;
border-bottom: 10px solid red;
border-left: 10px solid blue;
1
2
3
4

2. padding 内边距

展示1

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>demo2title>

    <style>
        div {
            width: 400px;
            height: 300px;
            background-color: aquamarine;
            padding: 10px;

    style>
head>

<body>
    <div>welcome to the worlddiv>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

展示结果：

注意

① 在上面的展示结果中，我们发现直接使用内边距也会使得盒子撑大，此处的解决办法依然和解决 border边框的方式相同。

② padding 也可以使用如下写法，四个参数值的顺序是：上右下左 ( 顺时针 )，这个在 Chrome 浏览器中，当然也能够看到。

padding: 10px 15px 20px 25px;
1

3. margin 外边距

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>demo3title>

    <style>
        div {
            width: 400px;
            height: 200px;
            background-color:aquamarine;

            margin-bottom: 50px;
        }

    style>
head>

<body>
    <div>welcome to the worlddiv>
    <div>hello worlddiv>
body>

html>
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

将外边距的底部设置为 50px，就可以实现两个标签之间的间隔效果，这个下面展示中体现了出来，当然，左右之间也能设置间隔。

展示结果：

注意

① 直接设置外边距的时候，没有类似于 border、padding 那样的撑大盒子的效果。

② 外边距和内边距的写法是一样的，也可以将上下左右的宽度设置为不同的值。

margin: 10px 20px 30px 40px;
1

4. 块级标签水平居中

可以对于某个块级标签使用如下代码，使得整个标签水平居中。

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

展示

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>demo4title>

    <style>
        .parent {
            width: 400px;
            height: 200px;
            background-color: gray;
        }

        .child {
            width: 100px;
            height: 50px;
            background-color:aquamarine;
            
            margin-left: auto;
            margin-right: auto;
            
            margin-top: auto;
            margin-bottom: 50px;
            
            text-align: center;
            line-height: 50px;

        }
    style>
head>

<body>
    <div class="parent">
        <div class="child">
            hello world
        div>
    div>
body>

html>
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
31
32
33
34
35
36
37
38
39
40
41
42

展示结果：

注意

① 在上面使用代码的时候，将 margin-left 和 margin-right 设为 auto，即自动的意思，那么浏览器就会自动设置为水平居中的方式。但当我们将 margin-top 和 margin-bottom 设为 auto 的时候，结果却不会变成垂直居中。

② 这种 margin 设置的方式，是使得标签居中，我们需要将此方式与 text-align 和 line-height 区别开来，后者是文本的水平居中和文本的垂直居中。

5. 去除浏览器默认样式

在我们日常直接为某个标签设置样式的时候，这些样式是存在于 CSS 代码中的，但最终将代码展示在浏览器上，浏览器为了美观，也会自动设置一些样式，如下图所示：

展示结果：

用法

下面代码是一个较为典型的去除浏览器样式的方法，直接使用通配符，将所有的标签都去除这种默认样式。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
1
2
3
4
5

展示结果：

注意：

这种通配符的方式并不会一刀切。也就是说，这种通配符的去除浏览器默认样式的方式，并不会影响我们自己写的代码中运用到相关的属性。

这其实是和 CSS 设置样式的覆盖和叠加有关：

多个选择器选中了一个元素，
若尝试给这个元素设置不同的样式，此时这些样式可能会叠加，最终呈现多种效果。
若尝试给这个元素设置相同的样式，此时这些样式就可能会覆盖，最终只呈现一种效果。
1
2
3

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>demo5title>

    <style>
        div {
            width: 400px;
            height: 200px;
            background-color:aquamarine;

            margin: 10px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

    style>
head>

<body>
    <div>hello worlddiv>
body>

html>
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
31

展示结果：

三、弹性布局

为什么要进行弹性布局

前端在进行网页布局的时候，本质上就是先一行一行的布局，然后再一列一列的布局。而块级元素就是一行一行排列的。因此，重点就是要解决一行之内的列之间的布局，接着就能解决多行的多列布局，从而就能将网页布局做好了。

弹性布局的使用

弹性布局的大前提是将 display 属性设置为 flex，而 flex 是 flexible box 的缩写，意为 “弹性盒子”。任何一个 html 标签，都可以指定为【 display: flex 】来完成弹性布局。

在将 display 设置成 flex 后，就会破坏原有的块级标签和行内标签的规则，也就是说，任何一个 html 标签，都有被弹性布局的资格。

而大前提设置好后，又有两个常用属性：justify-content 和 align-items

justify-content:   设置主轴上的子标签的排列方式 (水平)
align-items: 	   设置侧轴上的子标签排列方式 (垂直)
1
2

1. justify-content 属性

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>demo6title>
    <style>
        
        .aaa {
            width: 600px;
            height: 200px;
            background-color: gray;
            display: flex;
            justify-content: space-around;
        }

        .child {
            width: 90px;
            height: 40px;
            background-color: aquamarine;
            
        }

        .bbb {
            width: 600px;
            height: 200px;
            background-color: green;
        }
    style>
head>

<body>
    <div class="aaa">
        <div class="child">
            卡布达
        div>

        <div class="child">
            卡布达巨人
        div>
        
        <div class="child">
            车轮滚滚
        div>
    div>

    <div class="bbb">金龟次郎div>

body>

html>
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

注意

如果我们需要将 .aaa 类的子标签进行弹性布局设置，必须在 .aaa 这个父级元素的选择器进行设置【 display: flex; 】，而不是对其子类 .child 进行设置，这个和 margin 设置不同。

之后将水平布局设置为 space-around，此效果就是让标签之间产生了平均间隔的水平效果，还是较为美观的。至于其他的效果，小伙伴可以自己试一下。

展示结果：

2. align-items 属性

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>demo7title>
    <style>
        
        .aaa {
            width: 600px;
            height: 200px;
            background-color: gray;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .child {
            width: 90px;
            height: 40px;
            background-color: aquamarine;
            
        }

        .bbb {
            width: 600px;
            height: 200px;
            background-color: green;
        }

    style>
head>

<body>
    <div class="aaa">
        <span class="child">
            卡布达
        span>

        <span class="child">
            卡布达巨人
        span>
        
        <span class="child">
            车轮滚滚
        span>
    div>

    <div class="bbb">金龟次郎div>

body>

html>
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

展示结果：

注意

① 将 align-items 属性设置为 center，这是常用的，也是较为推荐的垂直居中的办法。此外，align-items 和 jutify-content 这两个属性可以叠在一起用，可以产生很多不同的效果，小伙伴可以自己试一下。

② 在上面的代码中，我将 div 的子标签改为了 span 标签，可以看到，弹性布局，无关于块级标签或行内标签。

总结

CSS基础到这里就结束了，总体来说，CSS 代码还是很多的。将 CSS代码拆解开来，或许很简单，但一旦将 CSS代码组合起来，就比较难了，因为很多需要自己动手一遍遍的实践，否则就理解不了，更别提记住了。

相关阅读:
java应用提速(速度与激情)
7_spring-cloud-config-center
2024年湖北专升本C语言模拟试卷（1）
在winform中如何实现双向数据绑定？
物联网应用中蓝牙模块怎么选？_蓝牙模块厂家
 如何根据波特率计算设备每秒传输多少字符
 【CPP】slt-list由认识到简化模拟实现深度理解~
用于时间触发的嵌入式软件的IDE
vue中时间控件
 DNS解析流程
原文地址：https://blog.csdn.net/lfm1010123/article/details/126130097