深入解析CSS基础：全面掌握元素尺寸调整秘籍——height/width、max-height/max-width、min-height/min-width及line-height实战应用

## 引言

在Web前端开发的世界中，CSS是赋予网页形态与样式的灵魂。准确而巧妙地运用CSS属性，尤其是对元素尺寸的控制，是构建美观、响应式界面的关键。本文将带领您深入解析CSS基础中的核心尺寸属性——`height`/`width`、`max-height`/`max-width`、`min-height`/`min-width`以及`line-height`，并通过丰富的实例和代码演示，助您全面掌握这些属性的实战应用。

##

一、基本尺寸属性：height/width

1.1 定义与计算

css
div {
  height: 200px; /* 绝对单位 */
  width: 50%; /* 相对单位 */
}

`height`和`width`属性用于设置元素的高度和宽度。它们可以接受绝对单位（如像素px、厘米cm等）或相对单位（如百分比%、视窗单位vw/vh等），也可以设置为`auto`，让浏览器根据内容自动计算尺寸。

1.2 内容填充与边距影响

css
/* 计算元素总高度 */
元素总高度=height + padding-top + padding-bottom + border-top-width + border-bottom-width;

/* 计算元素总宽度 */
元素总宽度=width + padding-left + padding-right + border-left-width + border-right-width;

`height`和`width`只包含元素的内容区域，不包括内边距（padding）、边框（border）和外边距（margin）。若需计算元素总尺寸，需加上这些额外空间：

1.3 `box-sizing`属性的影响

css
div {
  box-sizing: border-box; /* 包含内边距和边框 */
  height: 200px;
  width: 50%;
  padding: 20px;
  border: 1px solid #ccc;
}

此时，元素的总高度和宽度不再随内边距和边框值的变化而变化。

##

二、尺寸限制属性：max-height/max-width、min-height/min-width

2.1 定义与作用

css
div {
  max-height: 400px; /* 最大高度限制 */
  max-width: 80%; /* 最大宽度限制 */
  min-height: 100px; /* 最小高度保证 */
  min-width: 300px; /* 最小宽度保证 */
}

`max-height`和`max-width`属性用于限制元素的最大高度和最大宽度，防止其超出预设范围。同样，`min-height`和`min-width`则用于设定元素的最小高度和最小宽度，确保其在任何情况下都不小于指定值。

2.2 与`height`/`width`的关系与优先级

当同时设置`height`/`width`与对应的限制属性时，实际应用的尺寸将是两者之间的较小（对于`max-`属性）或较大（对于`min-`属性）值。

2.3 响应式设计与自适应布局

`max-height`/`max-width`与`min-height`/`min-width`在响应式设计中尤为重要。通过设置合适的限制值，可确保元素在不同屏幕尺寸下保持良好的视觉效果和用户体验。

##

三、行高属性：line-height

3.1 定义与作用

css
p {
  line-height: 1.5; /* 行间距为字体大小的1.5倍 */
}

`line-height`属性用于设置元素内文本行间的垂直间距。它不仅影响文本行间距，还决定了元素的基线对齐方式，以及内联元素垂直居中对齐的基础。

3.2 单位与计算

`line-height`可以接受数值（表示相对于字体大小的倍数）、长度单位（如px、em等）或百分比。数值是最常用的设置方式，便于根据字体大小动态调整行间距。

3.3 实战应用：垂直居中对齐

css
.centered-text {
  height: 70px;
  line-height: 70px; /* 等于元素高度，实现垂直居中 */
  text-align: center; /* 水平居中对齐 */
}

利用`line-height`与元素高度相等的特性，可实现单行文本的垂直居中对齐：

3.4 实战应用：多行文本容器的垂直居中

css
.container {
  display: flex;
  align-items: center; /* 垂直居中 */
}

.container::before {
  content: "";
  flex: 1;
  margin-bottom: -webkit-line-clamp(2); /* 调整负值以适应多行文本 */
  line-height: 1.5; /* 文本行间距 */
}

##

四、综合实战：打造响应式卡片组件

4.1 需求分析

创建一个响应式卡片组件，要求如下：

- 卡片宽度不超过父容器的80%，且最小宽度为300px。

- 卡片高度根据内容自适应，但最大不超过500px。

- 卡片内文字采用1.5倍行距，标题居中对齐。

4.2 代码实现

html
<div class="card">
  <h2 class="card-title">卡片标题</h2>
  <p class="card-content">卡片内容...</p>
</div>

<style>
  .card {
    box-sizing: border-box;
    max-width: 80%;
    min-width: 300px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
  }

  .card-title {
    font-size: 1.2rem;
    line-height: 1.5;
    text-align: center;
  }

  .card-content {
    line-height: 1.5;
  }
</style>

4.3 效果展示与总结

通过上述代码，我们成功创建了一个满足需求的响应式卡片组件。本案例充分展示了`height`/`width`、`max-height`/`max-width`、`min-height`/`min-width`以及`line-height`属性的实际应用价值。熟练掌握这些基础尺寸属性，将使您在Web前端开发中游刃有余，轻松应对各种界面布局挑战。

---

本文详细解读了CSS基础中的核心尺寸属性，通过理论讲解、代码示例与实战演练，帮助您全面掌握了`height`/`width`、`max-height`/`max-width`、`min-height`/`min-width`以及`line-height`的用法与技巧。希望这些知识能助您在日常开发中更加得心应手，打造出更优雅、更响应式的Web界面。如果您有任何疑问或建议，欢迎在评论区留言交流！

作自己的网页链接, 及制作网站的流程

制作自己的网页链接是一个相对简单的过程，下面将介绍一种常见的方法。

首先，你需要有一个网页或者一个网站，这可以是一个你自己设计的静态网页，或者是一个动态的内容管理系统（CMS）网站（比如 WordPress）。无论选择哪种方式，你都需要有一个网页编辑器，比如 Visual Studio Code 或者 Dreamweaver。这些工具可以帮助你编辑和管理网页的代码。

接下来，你需要为你的网页或网站选择一个域名。域名是网站的地址，比如 。你可以在各大域名注册商（如 GoDaddy 或者 Namecheap）购买一个合适的域名。

一旦你有了域名，你就需要将其绑定到一个服务器上。服务器是你的网页或网站存储在互联网上的位置。你可以购买一个虚拟专用服务器（VPS），也可以使用共享主机，这取决于你的预算和需求。

在服务器上，你需要安装一个网页服务器软件，如 Apache 或 Nginx，并配置好你的域名和网站的根目录。通过 FTP 或 SSH 等协议，你可以将你的网页文件上传到服务器上。

现在，你的网页或网站已经可以通过域名访问了，但是如果没有建立相应的网页链接，访问者不知道如何跳转到其他页面。要创建一个网页链接，你需要在 HTML 代码中添加一个``标签。

例如，如果你有一个名为 "about.html" 的页面，你可以在其他页面添加一个链接到这个页面的代码，如下所示：

```htmlAbout```

这段代码会在页面中显示一个名为 "About" 的链接，当点击它时，浏览器会跳转到 "about.html" 页面。

你还可以在链接中添加其他属性，如 `target="_blank"`，以在新的标签页或窗口中打开链接。另外，你还可以使用 CSS 来美化链接，例如修改字体颜色、大小和样式。

制作一个网页或一个完整的网站需要经历以下流程：

1. 网站规划 - 确定所需的页面和内容，以及设计和功能要求。

2. 页面设计 - 使用设计工具或图形编辑软件创建网站的视觉布局和元素，包括标志、图像、导航栏等。

3. 内容编写 - 编写网站内容，包括文字、图片、视频等。

4. 网页开发 - 在网页编辑器中编写 HTML、CSS 和 JavaScript 代码，实现页面的结构、样式和交互功能。

5. 图片和媒体制作和优化 - 调整和优化网站使用的图片和其他媒体文件，以提高页面加载速度。

6. 网站测试 - 在不同的浏览器和设备上测试网站的功能和兼容性，并修复可能出现的问题。

7. 网站部署 - 将网站文件上传到服务器上，并配置域名和服务器设置。

8. SEO 优化 - 优化网站的内容和结构，以提高搜索引擎排名。

9. 网站上线 - 将网站公开发布，以便访问者可以访问和浏览。

10. 网站维护 - 定期更新网站内容和功能，修复漏洞和错误，并定期备份网站数据。

以上是制作自己的网页链接和制作网站的大致流程，其中每个步骤都可能涉及进一步的细节和工具选择，具体取决于你的需求和技能水平。希望这些信息对你有帮助！

ello,大家好，我是AbnerMing，从这篇文章起，我们开始进入为期10天的网页制作学习，具体怎么学习，及未来的就业前景，还请大家去看上一篇文章《零基础10天学会网页制作之前言》，这篇文章已经很详细的介绍了，废话不多说，进入正题吧。

第一天的课程，比较简单，基本上没有很难的知识点，目录如下：

1、简单介绍网页制作及市场前景

2、接下来如何学习，定好目标

3、网页是怎么制作的

4、什么是Html

5、什么是Css

6、如何进行开发（IDE的选择）

7、认识网页结构html，head，body

8、h1~h6标签

9、p标签

10、img标签

11、今日总结及作业

1、简单介绍网页制作及市场前景

这个在昨天的前言中已经很详细的介绍了，这里再重复一遍，什么是网页制作，顾名思义，就是在互联网上开发网页，对于互联网中网页，我们肯定司空见惯，你所浏览的任何网站，比如，百度，头条，淘宝，京东，大学网站，公司官网等等，都是网页，也就是说，你在Pc端或移动端中的浏览器，或者APP嵌套的H5，所看到的，都是一个网页，与我们的生活息息相关。

市场前景，像在一线城市，北上广深，需求量很大，中等的前端工程师，起码都在12K以上这个水平，当然了高级的更高，30多K,40多K的也大有人在，所以，只要学得扎实，实力雄厚，那么薪资这个也不在话下，大家可以去智联，Boss，拉钩等招聘渠道，自己搜一搜这个行业的薪资，是不是我说的这样，可以去验证一下。

2、接下来如何学习，定好目标

还是如昨天说的一样，学习，特别是自学，这个是需要很大毅力的，坚持是很重要的，一定要知道，学习是为自己而学，不是为了别人，想要拿到一个高薪，必定要付出更多的努力；给自己定好一个目标，比如学成后，我要找多少的钱的工作，这个很有必要的，因为它可以时长地去鞭策你前进。

3、网页是怎么制作的

我们在网上所看到的百度，淘宝，京东，等等，这些网页是怎么制作呢？这里先给大家一个定义，不需要刻意地去记，因为接下来的课程，都会一一地讲解，首先呢，肯定是由人进行开发的，这里的人一般都是指程序员，也就是以后对于我们的定义，说的高大尚些，就是前端工程师，通过使用IDE(开发工具)，编写代码，完成的一个个网页，通过上传到服务器，再由域名解析后，就是我们所看的各个网页，当然，中间还有一些流程，这些呢我们后续再说，毕竟我们才刚入门，先了解再说。

编写的是什么代码，才能组成的一个网页呢，不妨我们以百度为例子，打开百度的官网，点击鼠标右键，点击查看网页源代码。

我们看到了什么，是不是如下图：

当然了，不止百度，你打开任何的网站，查看源代码后，基本上都是如上图，这就是组成网页的代码，前端里俗称标签。

4、什么是Html

通过上述第三项，我们在网页源代码中不难发现，都是有一个一个的“<>”组成的，这里的左右尖括号，就是书写网页的代码，俗称标签，这些就是Html，是描述网页的一种语言，叫，超文本标记语言，英文是：HyperText Markup Language，简称：HTML。

这里简单的概述一下，HTML呢， 不是一种编程语言，而是一种标记语言，所谓的标记语言就是由一套标记标签组成的，和上述我们看到的源代码里类似，对于这些概念性的东西，大家不用死记硬背，只需要了解即可。

HTML发展至今，已经经历了很多版本的更新迭代，每个版本的出现，都是一次革故鼎新。

5、什么是Css

上述我们知道了什么是Html，知道了网页都是用Html进行开发的，那么什么是css呢？简单来说，就是样式。我们可以看到，很多的网站做得都比较高端，大气，上档次，非常漂亮，其实这些绝大数都是用css来开发修饰的，也就是说，通过css，我们可以控制页面的美观，文字的大小，颜色，各个标签的位置，动效等，使得html变得美观，大方。用一个很简单的例子，用人来比喻，HTML就好比是一个裸体，CSS呢就是各种不同的衣服，用房子来比喻，HTML是一个毛坯，CSS就是精装修所用的材料。

6、如何进行开发（IDE的选择）

俗话说的好，工欲善其事必先利其器，我们如何去书写代码呢，当然了，开始学的话，用记事本是最好的，因为记事本没有任何的联想提示，必须一个一个进行书写，特别能锻炼我们的标签意识，加深我们的代码能力，这个我是比较推荐的，后续如果对标签熟练了，我们可以再转到其他工具上。

熟练之后，我们选择的工具就比较多了，比如Dreamweaver,WebStorm,IntelliJ,pycharm等等，任何一个开发编程语言的IDE（开发工具），几乎都支持web开发，那么具体选择哪一款，主要是看个人喜好，目前市面上用的最多的是WebStorm,接下来的课程，我们也主要是选择这款开发工具进行开发，如何进行下载和安装，到时，我们选择它开发的时候会一点一点讲到，前边两三天，我们还是用原始的记事本进行开发，主要目的只有一个，加深大家对标签的熟练，多培养代码感。

7、认识网页结构html，head，body

前边，通过查看各个网页源代码，我们是不是发现了一个共同的问题，可以看看下面几个图：

源代码截图：

百度源代码部分截图：

Android干货铺源代码截图：

源代码太多了，截图并没有截全，希望大家可以实际去看下各个源代码，通过查看源代码，我们发现了一个什么现象，是不是都有这几个标签，这就一个网页的组成结构，如下图：

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容，声明有助于浏览器中正确显示网页。

通用的声明如下：

HTML5

HTML 4.01

"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

head标签，顾名思义，就是头部元素，在head里，我们可以声明文档的编码，标题，作者，描述，引入外部的css,JavaScript等资源，这个是个很重要的元素。

中文编码，我们就可以这样在head里去写

body标签是我们的主体内容，我们日后所有的标签代码都要书写在这里

虽然说标签的书写，不区分大小字母，但是html4.0后，一般规定使用小写字母，我们可以去看那些主流的网站，也基本采用的是小写字母，这个我们一定要注意。

还有一个需要注意的，HTML标签中，绝大部分标签，都是双标签，有开始有结尾，类似，也就说是成对出现的，当然了也有单标签，这个日后会介绍。

不妨，我们花个几分钟，在记事本上，把网页的主体结构给写一写吧，在视频中，我也会带着大家去写一写，在头条(北漂程序员老李)，微信公众号（一个北漂程序员），视频，文字教程，我会同步更新，记得关注我哦~

8、h1~h6标签

了解了网页的主体结构后，我们已经知道了，body标签里是书写网页内容的，我们在网上经常看到一些黑色的标题文字，那么这些内容，我们该如何显示呢？h1到h6就可以满足我们需求，来，我们一起来写一写吧，新建一个记事本文件，这里我起名“day_01.txt”，如下图：

打开文档，在文档里我写上标签内容，如下图：

点击保存后，更改后缀为“.html”:

右键，选择打开方式，在浏览器中打开，我们就看到了下图：

上边就是h1到h6所展示的效果，简单吧，以后比如在文章中定义标题，我们就可以选择对应的来写，在head里我们定义了一个title标签，其实就是网页的标题，我用红色箭头标了出来。

9、p标签

我们经常看新闻，一个新闻，除了标题之外，还有什么，新闻内容，对吧，也就是每段的内容，我们就可以使用p标签写展示。

我们还在，原来那个文件里写，右键，打开方式，选择记事本打开。

写好后，点击保存，右键，打开方式，使用浏览器打开。

对于p标签，也是一个很简单的标签，大家多练习一下，试着，多写几个段落吧。

10、img标签

当我们已经掌握了h标签和p标签后，基本上一个无图的新闻列表，我们就可以搞定了，有的朋友就要问了，我想加入图片，该如何实现呢，哎，加入图片就要说到这个img标签了，img标签是个单标签，这个我们注意一下，语法如下：

<img src="" />

src呢，是img的固有属性，指向的是一个图片路径，这个图片路径呢，可以是网上的一个图片链接，也可以是本地的一张图片。

比如我们要实现下图的效果，该怎么实现呢？

这里我们分析一下，一共两部分组成，上边是标题，下面是图片，标题，我们可以使用h系列标签实现，图片呢，我们就可以使用img来实现，这里使用本地的图片吧，后续我们会讲到，远程和本地图片，还有图片相关路径的选择，图片资源如下，大家可以右键选择保存。

这里我把图片保存到了同级的目录下，如下图：

接着，我们更改day_01.html:

效果如下图：

11、今日总结及作业

毕竟第一天，内容还是比较简单的，一是认识网页结构，知道一个网页都有哪些标签组成，是干什么的，二是掌握，h,p,img标签的使用。

今天作业，实现一个新闻列表：

图片素材如下（可右键保存）：

好了，第一天的课程就到这里吧，我是AbnerMing，一个北漂的程序员，期待您的关注！