持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情
本文整理了Html以及css中非常重要的知识点，包括了一些基础用法以及新特性、另外也对前端优化知识做了总结，希望能够帮助大家更好学习基础内容。
1.white-space：空白空间的处理
normal：默认值 多余空白空间会被浏览器忽略只留一个
pre：空白会被浏览器保留
pre-wrap：会保留一部分空白空间 可以进行换行
pre-line：合并空白空间 会保留换行符
***nowrap：文本不会换行 直到碰到br强制换行
//文本换行
word-wrap:break-word;首先把长单词换到下一行进行显示，如果在一行还是有超出，单词内断句
word-break:break-all;不会把长单词换到下一行，直接在单词内进行断句
2.overflow：内容溢出
visible：默认值 内容不会被裁剪 会在元素外边显示
hidden：内容会被裁剪 超出的看不到
scroll：内容会被裁剪 浏览器显示滚动条 可以进行查看
auto：内容别裁剪 浏览器显示滚动条 可以进行查看
text-overflow：文本溢出显示符号
clip：不显示省略号
ellipsis：会显示省略号
3.各元素类型的特点：
(1)s级元素的特点：
- 块状元素，在页面中以矩形区域显示
- 块级元素，能直接添加宽高
- 块级元素，在页面中显示，独占一行(默认占满父元素的所有宽度)，从上往下排列
- 块级元素，一般作为内容或者其他元素的容器
(2)内联元素的特点：
- 内联元素，不能设置宽高，由内容撑开，最小显示单位为矩形
- 内联元素，在一行内，从左往右排列
- 内联元素支持盒模型的规则,但是个别不能进行正确的显示（margin-top/margin-bottom）
(3)可变元素
根据布局流规则，生成块或者内联
4.常见元素
块级元素：
div -最常用的块级元素
dl - 和dt-dd 搭配使用的块级元素
form - 交互表单
h1 -h6- 大标题
hr - 水平分隔线
ol – 有序列表
p - 段落
ul - 无序列表
li
fieldset - 表单字段集
colgroup-col - 表单列分组元素
table-tr-td 表格及行-单元格
内联元素：
a –超链接（锚点）
b - 粗体(不推荐)
br - 换行
i - 斜体
em - 强调
**img - 图片
**input - 输入框
label - 表单标签
span - 常用内联容器，定义文本内区块
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
u - 下划线
select - 项目选择
5.图片默认多的三像素的下间距
display:block;
vertical-align:middle;
6.position的属性值：
（1）static静态定位
position的默认值 默认的文档流
不会识别top bottom left right
（2）absolute绝对定位
a.如果父元素或者父元素没有设置参考 以整个文档作为参考
b.脱离文档流，不占据页面空间
c.参照物：有定位的（除默认值 static外）的父级元素
d.一般与父元素relative相对定位一起使用
（3）relative 相对定位
a.参照物为元素本身的位置
b.始终占据页面 不会脱离文档流
（4）fixed 固定定位
a.参照物：浏览器窗口
b.脱离文档流，不占据页面空间
（5）sticky 粘性定位
relative和fixed结合体
如果没有达到临界值，按照relative来执行
如果达到了临界值 按照fixed执行
7.在浏览器窗口进行水平垂直居中:
方式1：
position：fixed；
top：0；
bottom：0；
left：0；
right：0；
margin：auto；
方式2：
position：fixed；
top：50%；
left：50%；
margin-top：元素高度的一半；
margin-left：元素宽度的一半；
方式3：
位移实现水平居中：
div{
width:500px;
height:500px;
background:tomato;
/* 参照物 */
position:relative;
}
p{
width:100px;
height:100px;
background:#d2d;
position:absolute;
top:50%;
left:50%;
/* margin-top:-50px;
margin-left:-50px; */
/* 百分比指的是元素本身宽高的大小 */
transform:translate(-50%,-50%);
}
8.子元素在父元素进行水平垂直居中
父元素：position：relative;
子元素：position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
9.宽高自适应：
（1）宽度自适应：
块级元素不设置宽度或者宽度完成100% 当前元素随父元素的变化而变化
（2）高度自适应：
a.当height不去设置高度，或者设置为height：auto；
当前元素由内容撑开
b.min-height：80px；
如果超出最小高度 由内容撑开自适应
如果内容非常少 或者根本没有内容 容器保持min-height设置的最小高度
例：
pm: 内容足够多的时候 要去撑开
内容足够少的时候，要有最小高度
最小高度的设置
10.全屏页面：
让子元素跟随父元素高度变化
父元素必须有高度 给子元素设置height：100%；
固定设置：
html，body{
height：100%；
}
11.高度塌陷：
高度塌陷出现的场景： 如果子元素浮动了，父元素没有设置高度，父元素就会出现高度塌陷
解决高度塌陷的问题：
（1）给父元素设置固定的高度
（2）给父元素设置overflow:hidden;
原理：overflow:hidden;触发了BFC
BFC：规定浮动元素也参与高度的计算
弊端：overflow:hidden；溢出隐藏，会对定位元素有影响
（3）在浮动元素后面添加一个空标签
给空标签设置css样式： clear:left/right/ *both;
弊端：会出现很多无意义的标签，代码冗余
（4）万能清除法
高度塌陷的父元素:after{
content:"";
display:block;
clear:both;
height:0;
overflow:hidden;
visibility:hidden; //隐藏
}
项目中的使用：
reset.css里面去定义：
.clear:after{
content:"";
display:block;
clear:both;
height:0;
overflow:hidden;
visibility:hidden; //隐藏
}
然后再html中的使用
<div class="clear"></div>
备注：display:none;与visibility:hidden;的区别
display:none; 隐藏元素，不占据空间
visibility:hidden; 隐藏元素，占据空间
12.BFC
BFC：块级格式化上下文
BFC(Block formatting context)直译为“块级格式化上下文”。
它是一个独立的渲染区域，只有Block-level box（块）参与，
它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC布局规则：
一、内部的Box会在垂直方向，一个接一个地放置。
二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）
三、每个元素的margin box的左边， 与包含块border box的左边相接触
四、BFC的区域不会与float box重叠。
五、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
六、计算BFC的高度时，浮动元素也参与计算
触发BFC:
根元素(html)
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, **flex, inline-flex
overflow不为visible
13.浏览器前缀
css3:
很多的css3属性：还是预览版，没有形成最终版，造成很多属性在不同浏览器有兼容问题
浏览器为了兼容这些属性，每个浏览器厂商提供了自己浏览器的语法规则，一般需要添加浏览器前缀
主流浏览器：谷歌 ie 火狐 欧鹏
浏览器前缀：
谷歌 -webkit- 谷歌浏览器
ie -ms- ie浏览器
火狐 -moz- 火狐浏览器
欧鹏 -o- 欧鹏浏览器
浏览器内核
谷歌旧版本 Webkit -webkit-
IE Trident -ms-
火狐 Gecko -moz-
欧鹏 Blink -o-
谷歌 Blink
css3事件:
pointer-events:none; 禁止一些事件的触发
pointer-events:none; 穿透蒙层
14.H5新特性
（1）H5语义化标签
重要：
section元素 表示页面中的一个区块,偏向区域的划分
article元素 表示一块与上下文无关的独立的内容,倾向内容的展示
aside元素 表示在article之外的，与article内容相关的辅助信息
header元素 表示页面中一个内容区块或整个页面的标题
footer元素 表示页面中一个内容区块或整个页面的脚注
nav元素 表示页面中导航链接部分
figure元素 表示一段独立的内容，使用 figcaption元素为其添加标题(第一个或最后一个子元素的位置)
main元素 表示页面中的主要的内容
拓展：
hgroup标题的一个分组
mark定义高亮显示的文本(span)，内容的高亮显示，默认有黄色背景，是内联元素
time时间
dialog标记定义一个类似微信的对话框(会话框)
（2）多媒体标签
视频：<video></video>
src: 资源路径
controls 添加默认的控件
autoplay 自动播放
loop 循环播放
muted 静音
poster 视频正在加载时显示的图像
音频：<audio></audio>
src: 资源路径
controls 添加默认的控件
autoplay 自动播放
loop 循环播放
muted 静音
<source>标签：定义媒介资源
type:视频类型 video/ogg video/mp4 video/avi video/webm
音频类型： audio/mpeg audio/ogg
（3）表单 input
新增type类型：
Type=“email” 限制用户必须输入email类型,验证@
Type=“url” 限制用户必须输入url类型,验证的http
Type=“range” 产生一个滑动条表单
Type=“number” 验证用户输入是否数字number类型
Type=“search” 产生一个搜索意义的表单
Type=“color” 生成一个颜色选择的表单
Type=“time” 限制用户必须输入时间类型
Type=“month” 限制用户必须输入月类型
Type=“week” 限制用户必须输入周类型
Type=“datetime-local” 选取本地时间
type=”date”
新增表单属性
重要：
***autocomplete="off/on"
***placeholder="提示文字"
***required 检测是否为空
拓展：
min 最小字段
max 最大字段
step 步幅 ，确定一个法定值。 -3 0 3 6 9
autofocus 自动聚焦。一个页面只能有一个。
pattern 属性值是一个正则表达式。
novalidate 取消验证
multiple 选择（上传）多个文件
list 必须结合datalist标签，绑定datalist id名称。
15.css3变化
（1）例子：变形 过渡 文本阴影 渐变
（2）渐进增强：针对低版本浏览器进行构建页面，保证最近本功能
然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
（3）优雅降级： 针对高版本的设备进行项目的开发，功能/体验都很好
项目完成后，向下兼容
（4）渐进增强与优雅降级的区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，
而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。
降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
16.响应式布局
响应式网页：
为了适应不同的设备（pc / 平板端/手机端）、分辨率
响应式网页优势：
一个项目能适应不同的设备，比较灵活
从显示来说：相对而言用户的体验感还可以
能解决多设备显示适配问题
响应式的缺点：
开发比较高：
前端多套css代码
产品的原型图需要多个
ui设计图也要多个
后端
数据
代码冗余
17.图片整合（精灵图、css sprites、css精灵、雪碧图）
把网站里面的小图标有规则的整合在一起，利用 background-position 改变背景图的位置，每个图标应用。
优点:
（1）CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，
也是其被广泛传播和应用的主要原因；
（2）CSS Sprites能减少图片的字节；
（3）CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，
不需要对每一个小图片进行命名，从而提高了网页制作效率。
（4）CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。
缺点:
（1）图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。
（2）图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。
（3）图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。
（4）可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，
进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。
18.前端优化
（1）页面主题优化
实事求是的写下自己网站的名字，网站的名字要合理，最好包含网站的主要内容。
（2）页面头部优化
<meta name="keywords" content="" />向搜索引擎说明你的网页的关键词；
<meta name="description" content=""/>告诉搜索引擎你的站点的主要内容；
说明：
1、“描述”部分应该用近乎描述的语言写下一段介绍你网站的文字，在这其中，你应该适当的对你网站的特色内容加以重复以求突出；
2、“关键字”部分应该列出你认为合适的，能突出网站内容的关键字就可以了，关键字不要设置太多，可设置10---8个，搜索引擎只会浏览靠前的几个关键字。
（3）超链接优化
1、采用纯文本链接，少用，最好是别用Flash动画设置链接，因为搜索引擎无法识别Flash上的文字.
2、按规范书写超链接，这个title属性，它既可以起到提示访客的作用，也可以让搜索引擎知道它要去哪里.
3、最好别使用图片热点链接，理由和第一点差不多
（4）图片优化
图片优化并不是修改图片的大小、颜色，而是你应该为每个标签加上alt属性，alt属性的作用是当图片无法显示时以文字作为替代显示出来，而对于SEO来说，它可以令搜索引擎有机会索引你网站上的图片，对于一些确实没什么意义的图片，最好也不要省略alt，而应该留空，即 alt=""。
（5）PageRank（pr值,友情链接
PR值是Google提出的一个重要参数，它标明了某个网站的重要程度，那么pr值是如何确定的呢？
目前普通的解释为：假如有ABC三个网站，彼此互作友情链接，那么当一个访客通过A上的友情链接来到B时，Google就认为A为B投了“一票”，同理，如果有人从C访问B，那么B又得一票，如果全世界的网站上都有B的友情链接，B就是世界上最重要的网站了！
19. ie经典的bug:
1)图片有边框BUG
当图片加<a href=“#”></a>在IE上会出现边框
Hack:给图片加border:0;或者border:0 none;
2)图片间隙
div中的图片间隙BUG
描述：在div中插入图片时，图片会将div下方撑大大约三像素。
hack1:将</div>与<img>写在一行上；
hack2:将<img>转为块状元素，给<img>添加声明：display:block;
3) 双倍浮向（双倍边距）（只有IE6出现）
描述：当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界（margin）加倍显示。
hack:给浮动元素添加声明：display:inline;
4)默认高度（IE6、IE7）
描述：在IE6及以下版本中，部分块元素拥有默认高度（在16px左右；）
hack1:给元素添加声明：font-size:0;
hack2：给元素添加声明：overflow:hidden;
非ie的bug:
5)表单元素对齐不一致
描述：表单元素行高对齐方式不一致
hack:给表单元素添加声明：float:left;
6)按钮元素默认大小不一
描述：各浏览器中按钮元素大小不一致
hack1： 统一大小/（用a标记模拟）
hack2:input外边套一个标签，在这个标签里写按钮的样式，把input的边框去掉。
hack3:如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。
8)鼠标指针bug
描述：cursor属性的hand属性值只有IE9以下浏览器识别，其它浏览器不识别该声明，cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明。
hack: 如统一某元素鼠标指针形状为手型，
应添加声明：cursor:pointer
cursor: ;
auto默认
crosshair加号
text文本
wait等待
help帮助
progress过程
inherit继承
move移动
ne-resize向上或向右移动
pointer手形
9)透明属性
兼容其他浏览器写法：opacity:value;(value的取值范围0-1;
例：opacity:0.5;)
IE浏览器写法：filter:alpha(opacity=value);取值范围 1-100(整数)
20.伪类选择器
a:link {} 未访问
a:visited{} 已访问
a:hover{} 悬停
a:active{} 点击
注：选择符的顺序不能更改
21.选择符的权重
!important（一般不用）>内联样式(1000)>id选择符(0100)> (伪)类选择符 (0010)> 标签选择符 (1)>通配符(<1)
后代选择符的权重为父元素的权重加子元素的权重
群组选择符：本身选择符的权重
注：当权重相同时 采取就近原则
22.css层叠性
含义：值得就是样式的优先级，当有冲突时，优先显示优先级高的。
1.开发者样式>读者样式>浏览器样式
2.id选择符>(伪）类选择符>类型选择符
3.当权重相同时，显示后面定义的样式
