HTML+CSS学习笔记整理-七七八八

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

一、标签

1.角标标签

2.超链接标签

3.特殊符号

二、CSS

1.盒子模型

2.隐藏一个元素

3.解决高度塌陷

4.BFC

5.溢出显示三个圆点

---

前言

可能用到的七七八八

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、HTML

1.角标标签

sub下角标   sup上角标

^{文本/数值}

H₂O CO₂。// H₂O

2.超链接标签

1. 在不同页面之间跳转
   1. href：想要跳转页面的链接
   2. target：目标链接的打开方式，默认在本页面打开
      1. _self：在本页面中打开
      2. _blank：在新的空白页面中打开
      3. _parent：腹肌框架打开
      4. _top：顶部框架打开
2. 在页面的不同区域跳转---锚点

   <a href="#锚点名称">跳啦～</a>

   <div id="锚点名称"></div>

3.特殊符号

&nbsp;    半角空格

&emsp;    全角空格：代替一个文字的位置

<     &lt;

>     &gt;

&copy;    版权©️

&reg;    圈R商标

&trade;    商标™️

---

二、CSS

1.盒子模型

• w3c官方盒子模型（content-box）
  • 实际的宽度=内容(w)+左右的内边距+左右的边框+左右的外边距
  • 内容不包括内边距+边框
• IE怪异模型（border-box）
  • 实际的宽度=内容(w 内容，内边距，边框)+左右外边距
  • 内容包括内边距+边框

2.隐藏一个元素

1. display:none  渲染树上不包含，不占据页面位置，不会响应绑定的事件
2. visibility:hidden  元素在页面中占据位置，不会响应绑定的事件
3. opacity:0  元素在页面中占据位置，会响应绑定的事件
4. position:absolute  定位到可视范围外
5. z-index:负值  用别的元素来遮盖
6. tranform:scale(0,0). 缩放为0，元素在页面中占据位置

display和visibility的区别：

display会造成文档重排，visibility只会造成本文档重绘

3.解决高度塌陷

1. 给父元素设置一个固定的高度（弊端：内容过多会溢出）

2. 清除浮动，不让补位元素补位置

3. 可以在浮动元素后面悄悄地补一个元素

4. 给父元素添加overflow：hidden==(溢出隐藏),触发一个BFC形成一个独立的区域，不会受到外部的影响，也不会把内部的设置影响到外界，同时还能让浮动的元素参与高度的计算用于解决高度塌陷

4.BFC

• 块级格式化上下文，是一个独立的渲染区域。就是形成一个独立的空间，让空间中的子元素不会影响到外界的布局

• 作用：

     1. 避免margin重叠

     2. 自适应两栏布局

     3. 清除浮动（高度塌陷）

• 触发：

     1. 浮动---float不为none

     2. 绝对定位元素---position：absolute/fixed

     3. overflow：hidden / auto / scroll  (不为visible）

     4. display：inline-block ，table-cell ， table-caption

5.溢出显示三个圆点

设置宽度=============width:10px;

设置文本不折行=======white-space:nowrap;

溢出的文本裁剪掉=====overflow:hidden;

溢出内容显示三个圆点=text-overflow:ellipsis;