news 2026/10/6 2:50:39

HTML+CSS学习笔记.5

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
HTML+CSS学习笔记.5

1

关于CSS表格的属性:
之前说过使用border可以为CSS表格添加边框,使用上图的属性还可以进行对边框的一些拓展。border-width可以修改边框宽度,border-color可以修改边框颜色,border-style可以修改边框的风格(主要用于修改边框的样式,如是实现还是虚线。),border为边框复合属性,后面可跟随边框的所有属性,用法类似font,这四个边框属性也经常在其他元素使用。但实际上表格有些独有的属性,下面将举例:


以上5个标签只能在table标签中使用,table-layout可以设置列宽高,当属性为auto或者fixed时高度会默认或者均分,使用border-spacing时可以改变单元格间距,使用border-collaspe时可以合并或不合并单元格边框(若不使用该属性,则默认不合并)。empty-cells可以隐藏没有内容的单元格,caption-side用于设置表格的标题位置,但一般很少有,位置默认 在表格上方。

2

关于CSS背景属性:
之前说过background可用于改变背景颜色,但实际上background的功能有很多,用法与font和border也类似。bcakground-后加color,image,repeat和position可以设置被禁言是,图片,重复方式以及背景图的位置,当直接使用background时,后面也可跟有多个值,并且无顺序要求。

3


cursor可以设置鼠标的光标样式,除此处列举出的内容外,还可以自定义样式,但需要自己另行下载。

4


关于CSS的盒子模型:

CSS中的单位其实并不止px一种,还有em,rem和%,它们大多会受到其他元素的影响。em会受到font-size元素的影响,rem则会受到根字体的影响。%会继承父元素的字体的大小,父元素即所指定元素对应的上一级元素。

下面先补充一下元素的分类:

元素主要分为三类,即块级元素,行内元素和行内块级元素。但实际上,在早期并不存在行内块元素这一说,这是后面补充的,所以理论上讲,可以说元素分为两类,为行内元素和块级元素,行内块元素属于行内元素的一种。出了之前说过的是否独占一行有不同之外,块级元素默认宽度撑满父元素,高度由内容撑开,可通过CSS设置宽高。行内元素默认的宽度和高度都由内容撑开,无法通过CSS设置宽高。行内块元素默认的宽度和高度可以由内容撑开,但仍然可以通过CSS设置宽高。

下面将进行对三大元素的总结:


同时,元素对应的样式是可以改变的:

使用display属性可以修改元素的默认显示模式,none可以隐藏元素,block可设置成块级元素,inline可设置成行内元素,inline-block可设置成行内块元素。


盒子模型由4部分组成,即margin(外边框),border(边框),padding(内边框),connect(内容)。我们平时看到的内容一般显示在content区域。盒子的大小为connect+padding+border,外边框是不加入计算的。


对于盒子的content区域来说,有很多能用的CSS属性,它们通常用于设置对应的长度。但需要注意的是:不论height还是width属性,范围值和准确值一般都是不一起使用的。但这些属性不一定使用,因为content存在默认宽度。


当不设置width值的属性值的时候,元素会有一个默认宽度,宽度会受到上一级元素的content区域的影响。总宽度会变成上一级的content-自身margin,content的宽度会变成上一级content-自身margin-自身左右border-自身左右padding。


盒子的padding区域的大小也是可以控制的,可以单独控制上下左右的属性,也可以一起控制。当试图一起控制时,输入一个值则对应控制上下左右的长度,输入两个值则对应控制上下,左右的长度,输入三个值则控制对应上,左右,下的长度,输入四个值则控制对应上,右,下,左的高度。margin的控制方法也类似,下面直接举出:

关于border的属性其实比前两者稍微复杂一点,下面将列举一些属性:


border可以单独设计style,width和color属性,甚至可以设置上下左右各个边上的style,width和color属性。与padding和margin区域不同,border-color等属性实际上也属于复合属性,它也可以通过再次符合,用border单个标签对边框的整体进行修改,值的顺序和数量同样也没有特殊要求。

5

关于margin区域的其他问题:

刚刚讲述过了 如何对margin进行调整,现在说一下margin的其他问题。首先要说的就是margin的塌陷问题,第一个子元素的上margin区域会作用在父元素上,最后一个子元素会作用在父元素下。一般有三种解决方法,分别是给父元素设置一个不为0的padding,给父元素设置宽度不为0的border,还有给父元素设置CSS样式的overflow:hidden,一般来说更推荐最后一种。因为前两种在使用的时候伴随着某些苏左副作用,比如会使按下f12后产生的盒子模型的树枝数值产生偏差。

关于margin合并问题:

上面兄弟元素的下外边框和下面兄弟元素的上外边框会产生合并而不是相加。通常这个问题无需解决,只要记住遇到这种情况时单独给其中一个兄弟元素设置长度就行了。

6

关于处理内容溢出:

内容溢出就指我们输入的文字存在会溢出我们给它设定的区域的情况,这种情况可以使用overflow属性来处理溢出内容,我们可以使用visible,hidden,scroll和auto四个值让对应文字显示,隐藏,出现滚动条或自动显示滚动条。我们也可以使用overflow-x和overflow-y单独对任一方向进行修改,但这两个属于实验性内容,一般不使用。

7


关于隐藏元素的方法,当我们不想让某些元素显现的时候可以用visibility和dispaly:none来对文字进行设置,将visibility属性设置为hidden时会隐藏元素,但仍然占用原来的位置,使用display:none时则不会占用位置。

8

关于样式的继承:

CSS的一些属性会沿着父系→子系的规律继承,有些则不能,能继承的主要有字体属性,文本属性和文本颜色等,边框,背景,内边框,外边框,宽高,溢出方式等则不会继承。

9


关于元素的默认样式:

大部分元素都有对应的默认样式,在前面都已有所介绍,详细见上图。

10

关于布局技巧:

通过观察子元素的元素特点以及和父元素的关系,可以通过对父元素添加某些值从而实现某些效果,详细内容见上图。

11


关于元素之间的空白问题:

行内元素和块级元素之间换行时会产生一个空白,可以通过去掉换行这一动作和给父元素设置font-size:0来解决这个问题。(一般推荐第二种方法)

12

关于行内块元素产生空白的问题:

因为字体设计等问题,行内块元素底端会产生空白,一般有三种方案解决,即设置vertical属性,设置图片为display:block,或者给父元素设置成font-size:0。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/10/6 2:50:05

J组模拟赛4补题报告

总分:第一题:30分钟,100分,第二题:30分钟,100分第三题:1.5小时,50分,第四题:30分钟,10分第一题和第二题成功AC,于是又用bfs做第三题&a…

作者头像 李华
网站建设 2026/10/6 2:49:20

HWASan 只有十六进制地址看不懂:HarmonyOS Native 崩溃符号化排查链

HWASan 只有十六进制地址看不懂:HarmonyOS Native 崩溃符号化排查链 这不是一个 API 的问题 测试包出现 use-after-free 报告,日志里有地址却没有可读源码位置;开发者换了一个新编译的 so 去解析,得到完全错误的函数。地址只有和…

作者头像 李华
网站建设 2026/10/6 2:49:17

通信数据与视觉结果的映射,核心是**在 PLC 内存模型和视觉结果之间建立一张精确的“地址表”**,让双方对每一个字节的含义达成一致

通信数据与视觉结果的映射,核心是在 PLC 内存模型和视觉结果之间建立一张精确的“地址表”,让双方对每一个字节的含义达成一致。映射做错了,PLC 收到的是错位的数字,产线会做出错误动作。 映射的三个层次 第一层:数据类…

作者头像 李华
网站建设 2026/10/6 2:49:16

47.LangfuseOpenTelemetry与Prometheus分别监控什么

Langfuse、OpenTelemetry 与 Prometheus:分别监控什么? 码海寻道 大模型、智能体与 RAG 工程组件系列第 47 篇 三者都能出现在 AI 应用的监控架构里,但职责不同:Langfuse 更关注 LLM 调用和评估,OpenTelemetry 负责统…

作者头像 李华
网站建设 2026/10/6 2:48:11

怎么让 AI 引擎引用你的内容?抓取、理解、引用三阶段讲清楚

AI 引擎引用你的内容,本质上要过三道关:爬虫抓得到、模型读得懂、答案愿意引;三关缺一,内容就只是躺在服务器上的文本。本文把这三阶段拆开讲清楚,每一步给出可落地的配置位置和自查方法。 第一阶段:抓取—…

作者头像 李华