前言

可能用到的七七八八

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

一、HTML

1.角标标签

sub下角标 sup上角标

<sup>文本/数值</sup>

H<sub>2</sub>O CO<sub>2</sub>。// H₂O

2.超链接标签

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

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

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

3.特殊符号

  半角空格

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

< <

> >

© 版权©️

® 圈R商标

™ 商标™️

二、CSS

1.盒子模型

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

2.隐藏一个元素

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

display和visibility的区别：

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

3.解决高度塌陷

给父元素设置一个固定的高度（弊端：内容过多会溢出）
清除浮动，不让补位元素补位置
可以在浮动元素后面悄悄地补一个元素
给父元素添加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;

HTML+CSS学习笔记整理-七七八八相关推荐

移动web——学习笔记整理
目录 Day1 00.流式布局 00.1目标 00.2目录 01.移动端浏览器 02.视口(layout viewport) 03.meta视口标签(单标签) 04.物理像素&物理像素比 05 ...
jqGrid 学习笔记整理——基础篇
jqGrid 学习笔记整理--基础篇 jqGrid 实例中文版网址:http://blog.mn886.net/jqGrid/ 国外官网:http://www.trirand.com/blog/ 本人 ...
jqGrid 学习笔记整理——进阶篇（一）
jqGrid 学习笔记整理--进阶篇(一 ) 本篇为基础篇的扩展,使其具有增.删.改.查的基本功能. 在浏览导航栏添加所需按钮 <!DOCTYPE html> <html>&l ...
【mysql学习笔记整理】
/*mysql学习笔记整理*/ /*常用的数据库操作对象*/ #库的操作 #创建 #数据库的创建 USE mysql; CREATE DATABASE db_x; #删除 #删除数据库 DROP DA ...
Deep Learning（深度学习）学习笔记整理系列之（五）
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法参考文章: (1)CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 (2)https://www.cnblogs. ...
Deep Learning（深度学习）学习笔记整理系列之（二）
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
python eval 入门_Python学习笔记整理3之输入输出、python eval函数
Python学习笔记整理3之输入输出.python eval函数来源:中文源码网浏览: 次日期:2018年9月2日 Python学习笔记整理3之输入输出.python eval函数 ...
Deep Learning（深度学习）学习笔记整理系列之（八）
Deep Learning(深度学习)学习笔记整理系列之(八) 分类: Deep Learning 机器学习 Linux驱动2013-04-10 11:4257652人阅读评论(25)收藏举报 ...

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

文章目录

前言

一、HTML

1.角标标签

2.超链接标签

3.特殊符号

二、CSS

1.盒子模型

2.隐藏一个元素

3.解决高度塌陷

4.BFC

5.溢出显示三个圆点

HTML+CSS学习笔记整理-七七八八相关推荐

最新文章

热门文章