今天跟小常来给大家继续说一下HTML CSS整理笔记吧！
一起来最后跟我继续学习复习下吧，一起加油吧！
小常说一下：
灵感喜欢光顾勤劳的人,懒惰人不会遇到他
什么是“置换元素”？
置换元素会根据标签属性来显示的元素。反之就是非置换元素了。
如img根据src属性来显示，input根据value属性显示，因此可知img和input是置换元素，同理textarea、 select也是置换元素。
————
段落排版：
(1)letter-spacing：单个汉字间隔或单个字母间隔。
(2)word-spacing：按单词来设置间隔。
——
1、border-style 边框样式：
dashed（虚线）| dotted（点线）| solid（实线）。
2、border-color 边框颜色
3、border-width 边框宽度：
thin | medium | thick。常用像素(px)。
4、当margin(或padding或border)的left和right的值相同，如：
margin:10px 20px 30px 20px;
可缩写为：
margin:10px 20px 30px;
——
布局模型与盒模型一样都是 CSS概念。布局模型建立在盒模型基础上，不同于我们常说的 CSS 布局样式或 CSS 布局模板。CSS布局模板是外在的表现形式。
在网页中，元素有三种布局模型：
1、流动模型（Flow）
流动（Flow）是默认的网页布局模式。特征：块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
流动模型下，内联元素会在所处的包含元素内从左到右水平分布显示。
2、浮动模型 (Float)
任何元素默认是不能浮动的，可用CSS定义为浮动。
3、层模型（Layer）
让html元素在网页中精确定位，就像PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。
层模型有三种形式：
(1)绝对定位(position: absolute)
将元素从文档流中拖出来，然后用left、right、top、bottom属性相对最靠近它的一个带有定位属性的父包含块进行绝对定位。如果不存在这样的父包含块，则相对于body元素即相对于浏览器窗口。
(2)相对定位(position: relative)
元素在正常文档流中的偏移位置。首先按static(float)方式生成一个元素(元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留。
(3)固定定位(position: fixed)
始终位于浏览器窗口内视图的设置位置，不受文档流动影响，
另外属性background-attachment:fixed;的作用也是设置背景图片固定。
relative与absolute组合：
1、参照定位的元素必须是相对定位元素的前辈元素。
2、参照定位的元素必须加入position:relative。
3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
设置颜色的方法：
1、英文单词：p{color:red}
2、RGB颜色
由 R(red)、G(green)、B(blue)三种颜色比例来配色。
p{color:rgb(133,45,200)}
每一项的值可以是 0~255 的整数，也可以是0%~100% 的百分数。如：
p{color:rgb(20%,33%,25%)}
3、十六进制颜色
其原理也是 RGB 设置，每一项的值由 0-255 变成了十六进制 00-ff。p{color:#00ffff;}
——
相对单位长度值：
1、px像素
像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)。实际情况是浏览器和使用显示器的实际像素值有关。
2、em
(1)元素给定字体的 font-size 值，如果元素的 font-size 为 14px，那么 1em = 14px；如果font-size 为18px，那么 1em = 18px。
如 p{font-size:12px; text-indent:2em;}意思首行缩进 24px(即两个字体大小的距离)
(2)当 font-size 设置为 em时，计算标准以它父元素的 font-size 为基础。
如：
以这个例子为例
p{font-size:14px} span{font-size:0.8em;}
这里 span 字体大小就为11.2px(14 * 0.8 = 11.2px)
3、%百分比
p{font-size:12px; line-height:130%}
设置行高(行间距)为字体的130%（12 * 1.3 = 15.6px）
块状元素没有设置宽度时怎么居中?
1.加入 table 标签
2.设置 display: inline方法：显示类型设为行内元素，进行不定宽元素的属性设置
3.设置 position: relative 和 left:50%。利用相对定位，将元素从左偏移50%实现居中。
——
隐性改变display类型：
- position : absolute;
- float:left 或 float:right;
不论什么元素(display:none除外)，设置以上属性之一，该元素的display显示类型就会自动变为 以display:inline-block(行内块状元素)方式显示，此时可设置元素的 width 和 height，且默认宽度不占满父元素。
(如 a是行内元素，直接设置它的 width 无效，但设置 position:absolute 绝对定位后就可以设置宽度)
文本格式化标签：
文本加粗
文本加粗(加重语气)
斜体字
斜体(强调文字)
字体放大
字体缩小
定义下标字
定义上标字
插入字(字体下划线)
字体删除线
“计算机输出” 标签：
定义计算机代码
键盘输入
定义计算机代码样本
定义变量
预格式化文本(会保留文本的多个空格) 引文、引用、及标签定义： 缩写 地址联系信息 文字方向(设置dir="rtl"为从右到左显示)长文本引用(不会自带双引号，但会两边自动缩进)短句引用语(自带双引号) 定义引用、引证 定义一个定义项目。 title=""属性规定关于元素的额外信息。标签中加上title属性可实现鼠标移过时出现提示文字，如—— 元素: 描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接: 提示：在HTML中，标签没有结束标签。 —— HTML 颜色值RGB 由红(R)、绿(G)、蓝(B)组成。 每个颜色的最低值为0(十六进制为00)，最高值为255(十六进制为FF)。 十六进制值写法：#号后加3个或6个十六进制字符。 三位数表示法为：#RGB，转换为六位数表示为：#RRGGBB —— 常见的 URL Schemes http 超文本传输协议 以http:// 开头的普通网页，不加密。 https 安全超文本传输协议 安全网页，加密所有信息交换。 ftp 文件传输协议 用于将文件下载或上传至网站。 file 您计算机上的文件。 —— HTML5 多媒体标签 定义内嵌对象。HTML4不赞成，HTML5允许。 定义内嵌对象。 定义对象的参数。 定义声音内容 定义视频或者影片 定义media元素的多媒体资源(、) 规定media元素的字幕文件或其他包含文本的文件 (、) —— audio音频设置 1.最好的解决方法： 下例使用两个不同的音频格式。HTML5 元素会尝试以 mp3 或 ogg来播放音频。如果失败，代码将回退尝试 元素。 2.雅虎播放器使用免费，提供一个小型的播放按钮。 （1）如需使用它，需要把这段 JavaScript 插入网页底部：
（2）然后把MP3文件链接到页面中，JS会自动为每首歌创建播放按钮如：
音乐1
音乐2
3.用超链接
以下代码指向 mp3 文件链接。如果用户点击该链接，浏览器会启动"辅助应用程序"来播放该文件：
音乐1
——
video视频播放设置
1.最好的解决方法
下例中使用了4种不同的视频格式。HTML 5 元素会尝试以 mp4、ogg、webm其中一种格式来播放视频。如果都失败，则回退到 元素。
HTML5的source + object + embed。
2.优酷解决方案
如果要在网页中播放视频，可把视频上传到优酷等视频网站，然后在你的网页中插入 HTML代码即可播放视频：
3.使用超链接
如果网页包含指向媒体文件的超链接，大多数浏览器会使用"辅助应用程序"来播放文件。
以下代码指向 AVI文件的链接。如果用户点击该链接，浏览器会启动"辅助应用程序"如 Windows Media Player 来播放该 AVI 文件：
播放该视频
——
HTML中如何键入空格？
1.用空格占位符
但 有不间断的特性。即连续的 会在同一行内显示。即使有100个连续的 ，浏览器也不会把它们回车拆行。
2.段落间距
、换行
3.用JS动态给HTML添加空格：
例为照顾CSS样式或照顾特殊效果的实现。如果你不单单想让div之间是null，而是想动态添加空格的话，这样(jquery):
$("#id").innerHTML += " ";
——
display: none; 元素不显示也不会占位
visibility: hidden; 元素只是隐藏但仍然占位置
visibility: collapse; 隐藏但不占空间，类似display:none;
——
clip 剪辑一个绝对定位的元素。
clip : rect(top, right, bottom, left);
CSS 伪类：
1.Anchor伪类 (伪类如:link冒号和伪类名之间不能有空格)
在支持 CSS 的浏览器中，链接的不同状态可用不同的方式显示：
a:link {color:#FF0000;} /* 未访问的链接 /
a:visited {color:#00FF00;} / 已访问的链接 /
a:hover {color:#FF00FF;} / 鼠标划过链接 /
a:active {color:#0000FF;} / 已选中的链接 */
2.CSS类和伪类配合使用：
p : first-child{ } 匹配父级中第一个
子元素
p > i:first-child{ } 匹配所有
元素的第一个 子元素
p:first-child i{ } 匹配第一个
元素中的所有 元素
——
White-space属性：设置如何处理元素内的空白。
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似
标签。
nowrap 文本不会换行，文本在同一行上继续，直到遇到
为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 从父元素继承 white-space 属性的值。
——
浏览器兼容前缀：
-moz- 火狐等使用 Mozilla内核的浏览器
-webkit- 谷歌、Safari等使用 Webkit内核的浏览器
-o- Opera浏览器，使用Blink内核
-ms- IE，使用 Trident内核
——
viewport 是用户网页的可视区域。
