3万字总结 HTML + CSS，还不赶紧学起来✔️_js 取左右id 以开头-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43477721/article/details/120621218

本文详细介绍了HTML+CSS布局的优势与挑战，涵盖了语义化标签、CSS选择器、BFC、浮动与定位技巧，以及前端SEO最佳实践。还讨论了如何通过CSS实现响应式设计和性能优化，包括动画、图片格式和性能调整策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

HMTL + CSS

1. DIV+CSS布局的好处

代码精简，且结构与样式分离，易于维护
代码量减少，减少了大量的带宽，页面加载更快，提升了用户的体验
对SEO搜索引擎更加友好，H5新增了许多语义化标签
允许更多炫酷的页面效果，丰富了页面
符合W3C标准，保证网站不会因为网络应用的升级而被淘汰

缺点: 不同浏览器对web标准默认值不同，所以更容易出现对浏览器的兼容性问题。

2. HTML 标签语义化

2.1 HTML语义化背景介绍

HTML结构语义化，是最近几年才提出来的，以前的html结构，一打开就是一堆div+css，为了改变这种这种状况，开发者们和官方提出了让HTML结构语义化的概念，并且官方也在HTML5中给出了几个新的语义化标签。

2.2 什么是语义化，语义化之后文档会有什么效果

语义化，就是你写的HTML结构，是用相对应的有一定语义的标签表示的，因为HTML本身就是标记语言。不仅对自己来说，容易阅读，书写。别人看你的代码和结构也容易理解，甚至对一些不是做网页开发的人来说，也容易阅读。那么在开发的过程中，尽量使用官方有语义的标签，不要使用一堆无意义的标签去堆砌结构。
怎么知道自己的页面结构是否语义化，那就要看你的HTML结构，在去掉CSS样式表之后，是否依然能很好的呈现内容的结构，代码结构。也就是说，脱掉css的外衣，依然头是头，脚是脚。赤裸裸的完整的一篇文档。这也就是，语义化之后文档的效果。
其实语义化，也无非就是自己在使用标签的时候多使用有英文语义的标签，比如h标签，在HTML就是用来定义标题，还有p标签表示段落，table表格标签等等。

2.3 为什么要语义化

为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构
用户体验：例如title、alt用于解释名词或解释图片信息的标签尽量填写有含义的词语、label标签的活用
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重
方便其他设备解析如屏幕阅读器、盲人阅读器、移动设备，以有意义的方式来渲染网页
便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化

2.4 写 HTML 代码时，应该注意什么

尽可能少的使用无语义的标签div和span
在语义不明显时，既可以使用div或者p时，尽量用p，因为p在默认情况下有上下间距，对兼容特殊终端有利
不要使用纯样式标签，如：b、font、u等，改用css设置
需要强调的文本，可以包含在strong或em标签中，strong默认样式是加粗(不要用b)，em是斜体(不要用i)。<b>是为了加粗而加粗，<strong>是加强，表示该文本比较重要，提示终端，为了达到这个目的，浏览器等终端会将其加粗。
使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td
表单域要用 fieldset 标签包起来，并用 legend 标签说明表单的用途
每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来
不仅写 html 结构时，要用语义化标签，给元素写css类名时，也要遵循语义化原则，不要随便起个名字就用，那样等以后，再重构时，非常难读。最忌讳的是不会英文，用汉语拼音代替。

2.5 HTML5新增了哪些语义化标签

header，footer，nav，aside，article，video，audio，canvas

3. 行内元素/块级元素有哪些

行内元素：相邻的行内元素会排列在同一行，不会独占一行设置宽高无效: a br I em img input select span sub sup u textarea

块级元素：会独占一行可以设置宽高等属性: div h1-h6 hr p ul ol table address blockquote dir from menu

可变元素：根据上下文预警决定该元素为块元素还是内联元素块级元素：button del iframe ins

4. CSS选择器及优先级

!important
内联样式（1000）
ID选择器（0100）
类选择器/属性选择器/伪类选择器（0010）
标签选择器/伪元素选择器（0001）
关系选择器/通配符选择器（0000）

5. 浏览器怎么解析 CSS 选择器

CSS选择器的读取顺序是从右向左。

.mod-nav h3 span {
   font-size: 16px;}

读取顺序变成：先找到所有的span，沿着span的父元素查找h3，中途找到了符合匹配规则的节点就加入结果集；如果直到根元素html都没有匹配，则不再遍历这条路径，从下一个span开始重复这个过程（如果有多个最右节点为span的话）。

6. link和@import的区别

从属关系
- link：link是HTML提供的标签，不仅可以加载CSS，还可以定义rel等属性
- @import：@import是css提供的语法，只有导入样式表的作用
加载顺序
- link：link在页面加载时CSS同时被加载
- @import：引入的CSS要等页面加载完毕后再加载
兼容性问题
- link是HTML提供的语法，不存在兼容性问题
- @import是css2.1提供的语法，ie5以上才兼容
DOM可控性
- js控制DOM时，可以通过插入link标签来改变样式，不能通过@import改变

建议使用link，慎用@import

CSS 文字超出部分以省略号结尾

文字只有一行时

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

指定多行文字

overflow: hidden;
/* 将对象作为弹性伸缩盒子模型显示; */
display: -webkit-box;
/* 溢出部分用省略号代替 *//* autoprefixer: off */
text-overflow: ellipsis;
/* 设置文本显示两行 */
-webkit-line-clamp: 2;
/* 从上到下排列子元素; */
-webkit-box-orient: vertical;

7. BFC

7.1 什么是BFC

BFC 全称为块级格式化上下文 (Block Formatting Context) 。BFC是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位以及与其他元素的关系和相互作用，当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。有点类似一个BFC就是一个独立的行政单位的意思。可以说BFC就是一个作用范围，把它理解成是一个独立的容器，并且这个容器里box的布局与这个容器外的box毫不相干。

7.2 BFC触发的条件有哪些

根元素或其它包含它的元素
浮动元素 (元素的 float 不是 none)
绝对定位元素 (元素具有 position 为 absolute 或 fixed)
弹性盒（flex或inline-flex）
内联块 (元素具有 display: inline-block)
表格单元格 (元素具有 display: table-cell)
表格标题 (元素具有 display: table-caption)
具有overflow 且值不是 visible 的块元素

7.3 BFC的布局规则

内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个的常规流）
处于同一个BFC中的元素相互影响，可能会发生外边距重叠
每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算
浮动盒区域不叠加到BFC上

7.4 BFC可以解决的问题

防止margin重叠
清除内部浮动
自适用两列布局（float + overflow）
防止字体环绕

7.5 代码实例演示

<style>
  div {
     
    width: 100px;
    height: 100px;
    background-color: aqua;
    margin: 100px;
  }
</style>

<body>
  <div></div>
  <div></div>
</body>
<!--
	因为两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠，所以两个盒子之间距离只有 100px，而不是 200px。
-->

<style>
  .container {
     
    overflow: hidden;
  }
  p {
     
    width: 100px;
    height: 100px;
    background: aqua;
    margin: 100px;
  }
</style>

<div class="container">
  <p></p>
</div>
<div class="container">
  <p></p>
</div>
<!--
	如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。
-->

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sVr6UML0-1633482194973)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20210410200423783.png)]

<div style="border: 1px solid #000;">
  <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>
<!--
由于容器内元素浮动，脱离了文档流，所以容器只剩下 2px 的边距高度。
-->

<div style="border: 1px solid #000;overflow: hidden;">
    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>
<!--
如果使触发容器的 BFC，那么容器将会包裹着浮动元素。
-->

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sSIo5fmC-1633482194976)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20210410200626846.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4ru6NQhq-1633482194978)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20210410200718428.png)]

<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div>
  <div style="width: 200px; height: 200px;background: #eee">我是一个没有设置浮动,
    也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;</div>
<!--
	第二个元素有部分被浮动元素所覆盖，(但是文本信息不会被浮动元素所覆盖) 如果想避免元素被覆盖，可触第二个元素的 BFC 特性，在第二个元素中加入 overflow: hidden，
-->

<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div>
  <div style="width: 200px; height: 200px;background: #eee; overflow: hidden;;">我是一个没有设置浮动,
    也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eRfrwgJf-1633482194980)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20210410200847925.png)]

8. 盒模型

包括内容区域、内边距区域、边框区域和外边距区域。

box-sizing: content-box（W3C盒子模型）：元素的宽高大小表现为内容的大小。

box-sizing: border-box（IE盒子模型）：元素的宽高表现为内容 + 内边距 + 边框的大小。背景会延伸到边框的外沿。

IE5.x 和 IE6在怪异模式中使用非标准的盒子模型，这些浏览器的width属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

9. 如何实现左列定宽,右列自适应

DOM结构

<div class="box">
  <div class="box-left"></div>
  <div class="box-right"></div>
</div>

9.1 利用`float + margin`实现

.box {
   
 height: 200px;
}

.box > div {
   
  height: 100%;
}

.box-left {
   
  width: 200px;
  background-color: blue;
  float: left;
}

.box-right {
   
  margin-left: 200px;
  background-color: red;
}

9.2 利用`calc`计算宽度

.box {
   
 height: 200px;
}

.box > div {
   
  height: 100%;
}

.box-left {
   
  width: 200px;
  background-color: blue;
  float: left;
}

.box-right {
   
  background-color: red;
  width: calc(100% - 200px);
  float: right;
}

9.3 利用`float + overflow`实现

.box {
   
 height: 200px;
}

.box > div {
   
  height: 100%;
}

.box-left {
   
  width: 200px;
  float: left;
  background-color: blue;
}

.box-right {
   
  overflow: hidden;
  background-color: red;
}

9.4 利用`flex`实现

.box {
   
  height: 200px;
  display: flex;
}

.box > div {
   
  height: 100%;
}

.box-left {
   
  width: 200px;
  background-color: blue;
}

.box-right {
   
  flex-grow: 1;
  overflow: hidden;
  background-color: red;
}