HMTL + CSS

1. DIV+CSS布局的好处

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

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

2. HTML 标签语义化

2.1 HTML语义化背景介绍

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

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

  1. 语义化，就是你写的HTML结构，是用相对应的有一定语义的标签表示的，因为HTML本身就是标记语言。不仅对自己来说，容易阅读，书写。别人看你的代码和结构也容易理解，甚至对一些不是做网页开发的人来说，也容易阅读。那么在开发的过程中，尽量使用官方有语义的标签，不要使用一堆无意义的标签去堆砌结构。

  2. 怎么知道自己的页面结构是否语义化，那就要看你的HTML结构，在去掉CSS样式表之后，是否依然能很好的呈现内容的结构，代码结构。也就是说，脱掉css的外衣，依然头是头，脚是脚。赤裸裸的完整的一篇文档。这也就是，语义化之后文档的效果。

  3. 其实语义化，也无非就是自己在使用标签的时候多使用有英文语义的标签，比如h标签，在HTML就是用来定义标题，还有p标签表示段落，table表格标签等等。

2.3 为什么要语义化

  1. 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构

  2. 用户体验：例如title、alt用于解释名词或解释图片信息的标签尽量填写有含义的词语、label标签的活用

  3. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重

  4. 方便其他设备解析如屏幕阅读器、盲人阅读器、移动设备，以有意义的方式来渲染网页

  5. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化

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

  1. 尽可能少的使用无语义的标签div和span

  2. 在语义不明显时，既可以使用div或者p时，尽量用p，因为p在默认情况下有上下间距，对兼容特殊终端有利

  3. 不要使用纯样式标签，如：b、font、u等，改用css设置

  4. 需要强调的文本，可以包含在strong或em标签中，strong默认样式是加粗(不要用b)，em是斜体(不要用i)。<b>是为了加粗而加粗，<strong>是加强，表示该文本比较重要，提示终端，为了达到这个目的，浏览器等终端会将其加粗。

  5. 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td

  6. 表单域要用 fieldset 标签包起来，并用 legend 标签说明表单的用途

  7. 每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来

  8. 不仅写 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 代码实例演示

image-20210410200005240

<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 容器中。
-->

image-20210410200235982

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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;
}

10. 实现居中

10.1 水平居中

父元素是块级元素，子元素是行内元素，给其父元素设置text-align:center

.father {width: 200px;height: 200px;background-color: antiquewhite;text-align: center;
}
.son {width: 50%;height: 50%;background-color: aqua;
}<div class="father"><span class="son">son</span>
</div>

子元素是块级元素，该元素设置margin:0 auto。或父元素为 flex 布局，子元素设置margin:0 auto

.son {margin: 0 auto;
}<div class="son">son</div>

使用 flex 布局，设置父元素的 justify-content: center

.father {display: flex;justify-content: center;
}

使用绝对定位和CSS3新增的属性 transform

.father {position: relative;
}
.son {position: absolute;left: 50%;transform: translate(-50%, 0);
}

使用绝对定位和 margin-left（元素定宽）

.father {position: relative;
}
.son {width: 100px;position: absolute;left: 50%;margin-left: -50px;
}

**子元素不定宽度时，设置 display 为 inline-block，父元素设置 text-align: center **

.father {width: 200px;height: 200px;background-color: antiquewhite;text-align: center;
}
.son {background-color: aqua;display: inline-block;
}<div class="father"><span class="son">son</span>
</div>

10.2 垂直居中

若元素是单行文本, 可设置line-height等于父元素高度

.son {line-height: 200px;
}<span class="son">box-center</span>

若是块级元素，设置父元素为flex布局，子元素设置margin: auto 0即可（子元素不需要定宽）

.box {display: flex;
}
.box-center {margin: auto 0;
}<div class="box-center">box-center</div>

多行的行内元素

.father {width: 200px;height: 200px;line-height: 200px;background-color: aquamarine;
}.son {display: inline-block;line-height: 1em;vertical-align: middle;
}<div class="father"><span class="son">这里是高度为150像素的标签内的多行文字，文字大小</span>
</div>

Flex 布局

.father {display: flex;align-items: center;
}

可用 transform，设置父元素相对定位

.box {position: relative;
}
.box-center {position: absolute;top: 50%;transform: translate(0, -50%);
}

居中元素高度固定 ：position: absolute + margin

.box {position: relative;
}
.box-center {height: 100px;position: absolute;top: 50%;margin-top: -50px;
}

.box {position: relative;
}
.box-center {height: 100px;position: absolute;top: 0;bottom: 0;margin: auto 0;
}

10.3 水平垂直居中

前提：定宽高
.box {width: 200px;height: 200px;border: 1px solid red;position: relative;
}.children-box {width: 100px;height: 100px;background: yellow;
}

1. 绝对定位和负magin值

position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;

2. 绝对定位 + transform

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

3. 绝对定位 + left/right/bottom/top + margin

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;

4. 父元素设置 flex 布局

display: flex;
justify-content: center;
align-items: center;

5. grid布局

display: grid;
//
margin: auto;

6. table-cell + vertical-align + inline-block/margin: auto

display: table-cell;
text-align: center;
vertical-align: middle;
//
margin: auto;
前提：不定宽高

1. 绝对定位 + transform

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

2. table-cell

display: table-cell;
text-align: center;
vertical-align: middle;
//
display: inline-block;

3. flex布局

display: flex;
justify-content: center;
align-items: center;

4. flex布局

display: flex;
//
margin: auto;

5. grid + flex布局

display: grid;
//
align-self: center;
justify-self: center;

6. gird + margin布局

display: grid;
//
margin: auto;

11. 伪类和伪元素的区别

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

11.1 区别

伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号(:

3万字总结 HTML + CSS，还不赶紧学起来✔️相关推荐

  1. Python2寿命只剩一个月啦！还不快赶紧学起Python3酷炫到爆的新特性！

    作者: Lateautumn4lin  来源:云爬虫技术研究笔记 Python3.8已经发布了将近一个月了,距离Python3.0第一个版本发布也将超过10年了.相信很多人还是依旧在使用Python2 ...

  2. 利用python在网上接单赚钱，兼职也能月入过万，还不赶紧学起来

    看完这篇回答至少给你省去95%找答案的时间. 我觉得python接单我是最有发言权的,从2016年进入大学,我就是一个不安分的学生,总是想着通过自己的技术来实现财富自由. 我崇拜雷军,我觉得雷布斯不仅 ...

  3. 夏季刮油蔬菜排行榜，还不赶紧学起来，看看是否有你的“菜”

    夏季炎热,很多人吃完饭都不愿意动,毕竟一动又是一身汗,再加上各种高糖分冰激凌和西瓜的摄入,小肚腩不知不觉又起来了,真是令人烦恼.为了能在炎热夏天依旧保持曼妙身材,下面的几种食材一定要吃,它们不仅可以帮 ...

  4. 利用python在网上接单赚钱，兼职也能月入过万，还不赶紧学起来！

    前言 学习python编程,不仅可以找一份高薪工作,而且如果不打算转行或者是在校学生的话,也能为你日常生活工作提供一些帮助.Python就是以其简单易学的特性而闻名于世的,所以不一定非得是程序员才学它 ...

  5. 利用python在网上接单赚钱，兼职也能月入过万，还不赶紧学起来...

    前言 学习python编程,不仅可以找一份高薪工作,而且如果不打算转行或者是在校学生的话,也能为你日常生活工作提供一些帮助.Python就是以其简单易学的特性而闻名于世的,所以不一定非得是程序员才学它 ...

  6. 一份你女朋友都能读懂的 Git 教程，还不赶紧学起来！

    点击上方"IT平头哥联盟",选择"置顶或者星标" 你的关注意义重大! 用游戏的方式来学习,是一种有趣而高效的方式. 从刚接触电脑时的打字练习软件 金山打字通,到 ...

  7. Python兼职接单也能月入过万，还不赶紧学起来，总结8个Python赚钱的接单平台

    学习python编程,不仅可以找一份高薪工作,而且如果不打算转行或者是在校学生的话,也能为你日常生活工作提供一些帮助.Python就是以其简单易学的特性而闻名于世的,所以不一定非得是程序员才学它,其他 ...

  8. 简单几步就教会你如何使用 dockerfile 制作 LNMP 镜像，还不赶紧学起来

    简单几步就教会你如何使用dockerfile制作LNMP镜像 前言 一.dockerfile撰写php镜像 二.dockerfile撰写mysql镜像 三.dockerfile撰写nginx镜像 四. ...

  9. 2万字系统总结，带你实现 Linux 命令自由?还不赶紧进来学习

    2万字系统总结,带你实现 Linux 命令自由?还不赶紧进来学习 前言 Linux 的学习对于一个程序员的重要性是不言而喻的.前端开发相比后端开发,接触 Linux 机会相对较少,因此往往容易忽视它. ...

最新文章

  1. Vue监听器与监听滥用
  2. zcmu1203（逆序对，归并排序）
  3. PyCaret：又一个神仙ML库
  4. 关于WannaCry勒索病毒 你需要知道的8个问题
  5. poj3187 穷竭搜索 挑战程序设计大赛
  6. 2016 年开发者应该掌握的十个 Postgres 技巧
  7. Educational Round 26 C. Two Seals
  8. 视图，触发器，事务，存储过程，函数与流程控制，索引
  9. matlab图片集成成视频
  10. 谷尼国际软件－企业竞争情报系统
  11. 7-1 厘米换算英尺英寸*宅家第一天
  12. 【项目实战-MATLAB】：基于机器学习的虹膜识别系统设计
  13. 保留至百位并且向上取整 例如:125631 ＞＞125700
  14. 用IDEA创建基于Spring Cloud的Feign的微服务：服务接口、服务提供者、服务使用者分离
  15. ElasticSearch之 ik分词器详解
  16. centos(5) : centos7 使用yum安装mysql并开启远程连接及重置密码
  17. 示波器探头各种作用及工作原理
  18. 笑谈XML,xsd与xsl文件的区别
  19. 少儿编程Scratch学习教程2--官方初学指南
  20. 基于工厂智能化改造——数字孪生映射应用案例解析

热门文章

  1. 深度学习环境配置超详细教程【Anaconda+PyTorch(GPU版)+CUDA+cuDNN】
  2. Qstring 打印会有双引号
  3. 计算机图形学实验四——投影变换
  4. Redis 知识点总结
  5. GDI+(绘制图片背景文字)
  6. mongo执行Bulk Update
  7. 情感分析badcase分析
  8. 业余无线电通信_其它业余无线电通信方式应避免占用业余卫星频率
  9. 在线教育APP开发功能需求有哪些？
  10. Open3d学习计划——1（简介与安装）