HTML & CSS

已于 2022-08-10 20:14:35 修改
阅读量161 收藏
点赞数
分类专栏： 前端基础 文章标签： html css
于 2022-08-08 14:09:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lfm1010123/article/details/126130097
版权

HTML & CSS

一、块级标签与行内标签

块级标签(元素)

h1 - h6
p
div
ul
ol
li
...

行内标签(元素)

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

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

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

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

③ 块级标签默认的宽度就是和父标签一样，行内标签默认宽度就是和本身内容相关，如果没有内容，宽度就是 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>demo11</title>

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

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

展示结果：

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>demo12</title>

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

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

展示结果：

2

display 属性的用法

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

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

展示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>demo13</title>

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

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

</html>

展示结果：

3

二、盒模型

盒模型的效果图：

1

1. border 边框

展示1

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

<!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>demo1</title>

    <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 world</div>
</body>

</html>

展示结果：

1

展示2

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

* {
    box-sizing: border-box;
}

展示结果：

2

展示3

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

border: 10px solid green;

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

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>demo2</title>

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

    </style>
</head>

<body>
    <div>welcome to the world</div>
</body>

</html>

展示结果：

2

注意

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

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

padding: 10px 15px 20px 25px;

3

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>demo3</title>

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

            margin-bottom: 50px;
        }

    </style>
</head>

<body>
    <div>welcome to the world</div>
    <div>hello world</div>
</body>

</html>

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

展示结果：

4

注意

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

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

margin: 10px 20px 30px 40px;

4. 块级标签水平居中

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

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

展示

<!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>demo4</title>

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

展示结果：

5

注意

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

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

5. 去除浏览器默认样式

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

展示结果：

1

用法

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

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

展示结果：

2

注意：

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

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

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

<!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>demo5</title>

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

            margin: 10px;
        }

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

    </style>
</head>

<body>
    <div>hello world</div>
</body>

</html>

展示结果：

3

三、弹性布局

为什么要进行弹性布局

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

弹性布局的使用

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

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

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

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

1. justify-content 属性

0

<!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>demo6</title>
    <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>

注意

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

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

展示结果：

1

2. align-items 属性

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>demo7</title>
    <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>

展示结果：

3

注意

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

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

总结

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

十七ing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端HTML总结
m0_54066656的博客
08-05 652
前端笔记，HTML标签详解。
HTML-09.表单项标签
程小白的博客
08-05 184
【代码】HTML-09.表单项标签。
HTML-04.新浪新闻-标题-超链接
程小白的博客
08-02 231
【代码】HTML-04.新浪新闻-标题-超链接。
前端面试宝典【HTML篇】【5】
BDawn的专栏
08-05 53
form标签用于定义 HTML 表单，它用于收集用户输入的数据。而input 标签则是表单中最常用的元素之一，用于创建各种类型的输入控件。 template 标签是 HTML5 中引入的一个新元素，用于定义文档中的不可见模板。这些模板可以被脚本动态地克隆并插入到文档的可见部分中，从而实现动态内容的快速构建。
【日常记录-JS】HTML动态加载JS脚本
zhaoyaxuan001的博客
08-05 175
从外部系统跳到落地页，并将验签相关参数通过url参数传入落地页。由于后台对所有请求均增加了验签校验，导致js静态文件获取失败。由于HTML本身是静态的，动态加载JS文件，需要通过脚本来实现；
【Python】Python 转换 Html 为 Markdown
Young_Pro的博客
08-02 952
在将 HTML 转换为 Markdown 时，表格通常可以保留其基本结构，但可能无法保持所有的格式细节。函数读取 HTML 文件，将其内容转换 为Markdown，然后将 Markdown 内容写入新的文件。如果你需要保持表格的精确格式，可能需要手动调整转换后的 Markdown 或寻找支持更多特性的转换工具。使用这些技巧时，请记住，Markdown 的目的是为了简洁和可读性，而不是复杂的布局。或其他转换工具，结果可能有所不同，因为不同的库可能对HTML到Markdown的转换有不同的实现方式。
基于树莓派的智能家居中控系统：集成Flask、HTML、JavaScript与MQTT协议的文心一言AI接入（代码示例）
嵌入式极客小张
08-02 1114
本文介绍了基于树莓派的AI接入文心一言智能家居中控系统的搭建过程。该系统利用树莓派作为主控单元，通过DHT11传感器和继电器模块实现环境数据采集和设备控制。后端采用Flask框架和SQLite数据库，前端使用HTML、CSS和JavaScript构建可视化界面，支持用户手动控制设备。系统还接入了文心一言API，实时获取天气信息，提升智能家居的自动化水平。通过该项目，用户能够享受更便捷的智能家居体验。
HTML-03.新浪新闻-标题-样式2
程小白的博客
08-02 360
【代码】HTML-新浪新闻-标题样式2。
前端面试宝典【HTML篇】【6】
BDawn的专栏
08-05 165
canvas标签是 HTML5 中引入的一个新元素，它提供了一个矩形区域，可以在其中绘制图形或图像。canvas 本身并不具备绘图能力，它只是一个容器，所有的绘图工作都需要通过 JavaScript 来完成。 svg标签是用于定义可缩放矢量图形 (Scalable Vector Graphics, SVG) 的容器。SVG 是一种基于 XML 的图形格式，它允许开发者创建高质量的矢量图形，这些图形可以无限放大而不失真。SVG 图形不仅支持静态图像，还支持动画和交互式图形。
JavaWeb基础1：HTML/CSS/JS/HTTP
m0_53842576的博客
08-05 247
JavaWeb基础1：HTML/CSS/JS/HTTP (qq.com)
【前端编程小白】的HTML从零入门到实战
xingyu_qie的专栏
08-02 1505
之前有读了博客，想让我帮他找一些前端入门的内容，他们报的计算机专业，，我给他推荐了一些菜鸟教程呀什么的。后来想，看来还是很多人需要一些更加入门的可成的，而且很多教程不够实战，HTML章节都是匆匆而过。所以我想着，自己也写一些，基础的，加上实战的，希望可以帮助，想从零基础，到实战的小伙伴们。
基于STM32的智能能源管理系统：HTML/CSS/JavaScript与Flask框架下的Modbus通信
嵌入式极客小张
08-05 755
本项目旨在开发一个智能能源管理系统，能够实时监测电能、太阳能和风能等多种能源数据，通过有效的控制策略优化能源使用，降低能耗成本，提高能效。系统将支持多种通信协议，便于与不同设备进行数据交互，并将数据上传至云平台进行分析和决策支持。通过以上的实现，我们成功构建了一个智能能源管理系统，具备以下功能：数据采集：使用STM32单片机实时采集电能、太阳能和风能数据。这种实时监测能够帮助用户清晰了解各类能源的使用情况。电力电子控制：系统能够控制逆变器和充电控制器，以优化能源使用。
HTML常用标签和CSS的运用
最新发布
FHYAAAX的博客
08-05 408
HTML（超文本标记语言）是一种用于创建网页的标准标记语言。
项目中万能使用tailwindcss，无版本冲突、报错
xxx
08-02 183
新建两个css文件tailwindInput.css、tailwindOutput.css。
CSS mask-image 实现边缘淡出过渡效果
xachary的博客
08-02 898
CSS mask-image 实现边缘淡出过渡效果，关键是淡出，而非降低透明度。
web基础之CSS
Yunzhong_jiuxiao的博客
08-02 1024
css属性
软件设计之CSS
thm19990903的博客
08-05 705
Cascading Style Sheet 层叠级联样式表CSS：表现（美化网页）字体、颜色、边距、稿库、背景图片、网页浮动…
CSS学习 02 利用鼠标悬停制造按钮边框的渐变方向变化
weixin_57266891的博客
08-05 179
的按钮元素，按钮类型为。
css 数字平铺布局
℡メ㏑╭ァ小凯
08-02 284
【代码】css 数字平铺布局。
HTML&CSS入门指南：构建完美网站
"这是一本名为《使用HTML&CSS正确构建自己的Web网站》的书籍，适合初学者入门，教导读者如何使用HTML和CSS创建并美化自己的网站。书中涵盖了从设置基础到高级功能的多个主题，包括创建网页、添加样式、使用图片、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

十七ing

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值