HTML/CSS部分
1、 /*清除浮动
由于浮动元素会影响到其前后的元素及父级元素width，height等属性，
解决：清除浮动，减少对其他元素造成的影响
1、为父级元素指定宽高--只适合高度固定的布局
2、在浮动元素末尾增加空div，并设置clear:both; <div style="clear:both;"></div>
3、利用父元素：伪类after实现
4、让父级元素一起浮动
5、为父元素定义 display:table;
6、为父级元素设置 overflow: hidden
*/
2、边框绘制三角形：transparent--透明属性
3、外边距--margin 允许有负值
水平的margin累加
垂直排列
1、标准流的排列，margin合并取最大值
2、特例
(1)d1浮动d2清除浮动，margin合并，以浮动元素为主
(2)d1不动，d2浮动，margin累加
(3)d1浮动，d2不动（d2在d1之下），且d1 d2之上为浏览器，d2设置上外边距，则d1与d2一起移动
4、/* 标准盒子模型与怪异盒子模型
一、定义 特点
标准盒子模型（严格模式strictmode，浏览器按W3C模式解析执行代码）
盒子实际占宽：width+border+padding+margin
怪异盒子模型（兼容模式quirkmode，使用浏览器自己的方式解析执行代码，由于不同浏览器解析执行方式不一样，所以称之为“怪异模式”）
盒子实际占宽：width+margin
二、如何区分
怪异模式：忽略DTD的声明，即省略网页中上面的声明
标准模式：html5 声明<!DOCTYPE html>
html4 声明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
盒子模型与 内容 边框 外边距 内边距 有关
*/
/*css3新增盒子模型设置属性*/
/*box-sizing:border-box;按怪异盒子模型显示*/
/*box-sizing: content-box;按标准盒子模型显示*/
5、 /*outline不占空间，悬停时用来解决串位问题*/
/*border占空间*/
6、表单
--a、CSS获取焦点 focus
--b、form的五个属性
<!--action 提交地址
method 提交方式 get-默认 post
enctype 表单信息提交的编码方式
enctype="application/x-www-form-urlencoded" 默认
multipart/form-data 图片 文件 等多媒体应用
text/plain 文本传递
name 表单名
target 提交页面打开方式
-->
--c、placeholder html5提供的默认值
multiple 多选
<textarea cols="20" rows="20"></textarea> 多文本控件
<input type="hidden"> 隐藏控件
<input type="file"> 文本控件
<input type="reset" value="重置按钮">
<input type="range" value="25" min="0" mzx="100" step="3">范围选择控件
--d、HTML5新增表单
<input type="email">
<input type="url">
<input type="tel">
<input type="color">
<input type="date">
<input type="number">
<input type="datetime">
<input type="datetime-local">
<input type="time">
<input type="month">
<input type="week">
7、<!--表格
水平对齐text-align
center left right
垂直对齐
vertical-align
top middle bottom
border-spcing：20px 30px;
调整单元格边距距离：水平 垂直-->
<!--如何实现表格边框1px
1、table给个颜色设boeder-spacing:1px 1px; td给个颜色
2、border-collapse:collapse表格边框合并为单一边框
-->
8. /*浏览器兼容性
css Hack(黑客)：指不同浏览器对CSS解析结果不同，
会导致相同的CSS输出页面的效果不同，
此时需要CSS HACK 来解决CSS局部兼容性问题
原理：利用书写顺序和不同浏览器对一些特定书写方法解析方式
不同而达到的效果
ie6 _
ie6/7 *
ie7及以上 !important
ie8及以上 \0
ie6-ie10 \9
ie7-ie8 >
常见兼容性问题
1、IE6、7浮动问题
一个元素浮动，后面的元素会紧随其后
(1)clear :both
(2)单独处理IE6、7
*position:absolute;
*left:0px;
*right:0px;
*z-index:-1;
2、不同浏览器默认外边距不一致(ie6、7)
body{
margin:0;
padding:0;
}
3、IE6外边距加倍问题（浮动元素）
_display:inline;
_margin-left:15px;
4、IE6、7超链接问题,省略href 伪类失效
解决：不省略href=""
5、IE6不支持png
(1)png换成gif
(2)_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src="img/pp1.png")
6、IE6 1光标问题
overflow: hidden;
7、透明度问题IE6-8 opacity不好使，设置filter
opacity: 0.3;（0-1）
filter: alpha(opacity=30);（0-100）
8、input padding问题（IE8 IE9？及以下内容超长时padding会消失）
解决：套个div
9、input高度问题：如没有height属性，高级浏览器会采用line-height作为高度
而IE不会采用line-height，而使用默认的高度
解决：统一高度
10、3像素bug 问题
解决：图片加 display: block/vertical-align: middle
*/
9、兼容性注意事项
1、每个浏览器都有默认的字体及大小，尽量不要小于浏览器的最小字体
2、重置 common.css defaule.css reset.css放通用代码
3、ie的条件注释（IE的if条件hack）ie10及以上不支持
<!--[if gte ie 8]>
<style>
@media all and (-webkit-min-device-pixel-ratio:0){
div{
color:yellow;
}
}
@-moz-document url-prefix() {
div{
color:blue;
}
}
</style>
<![endif]-->
<!--if ie 7 仅仅指IE7
if lt IE 7 小于7
if lte 小于等于 less than or equal
gt 大于
gte 大于等 于 greater than or equal-->
10、<!-- js判断用户浏览器-->
document.write(navigator.userAgent);
谷歌 ：webkit
IE ： trident--IE内核：用于解析代码以及决定如何显示
欧朋 wenkit
Safari webkit
火狐 ：Gecko
11、页面重定向 document.location.href="test01.html";
12、 /*css图片精灵：css sprites
是一种css图片合成技术，该方法将多个小图标合并到一张大图
再利用css的背景定位来显示的图片部分
目的：1、减少加载网页图片时对服务器的请求次数
2、提高页面的加载速度*/
13、ps图片格式
BMP 位图格式 无压缩图片格式，比较大，图片清晰
jpg 有损压缩，压缩方式是去除冗余的图像和色彩数据，
不支持透明格式
GIF 可以保存背景透明格式，只能呈现256色，适合较少
色彩的图片，可做多帧动画
png 汲取了GIF和jpg的特点，压缩率高不失真
14-1、 /*垂直居中
1、单行文本
行高 line-height：200px;
2、多行文本/行级元素 块级元素
方法1、 display：table-cell；
vertical-align:middle;
方法2、 padding-top: 150px;
padding-bottom: 150px;
3、定位法
固定宽高：
父相对子绝对
top:50%;
margin-top:-（高的一半）px;
4、定位法
未知宽高
position: absolute;
top:50%;
transform:translateY(-50%)；
5、css3
display:flex;
flex-direction: column;
justify-content: center;
6、伪类法
*/
14-2、水平居中：
1.text-align//文本
2.margin:0 auto;//固定宽高
3.position/margin-div宽高//固定宽高
4不固宽：display:table
margin:0 auto
套一个div：text-align:center;
5.浮动元素居中：套一个父元素；不考虑宽高；
6.不考虑宽高： position:absolute;left:0;right:0;top:0;bottom:0;
7.css3 box布局实现：
display: -webkit-box;//开启盒子模型
-webkit-box-orient: horizontal;//水平
-webkit-box-pack: center;
8,css3水平居中：
width:
-webkit-fit-content;
margin-left: auto;
margin-right: auto;
15、/*水平垂直都居中
1、固定宽高--定位法
position: absolute;
top:50%;
left:50%;
margin-top:-40px;
margin-left: -40px;
2、未固定宽高--定位法
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
3、未固定宽高
display:flex;
justify-content: center;
align-items: center;
*/
16、CSS技巧
/*
1.连续书写字符：自动换行:word-wrap: break-word;
2.单词按照整个单词换行,单词折断： word-break: break-all-------不考虑单词完整性;
3.不让单词换行：空白格处理 处理元素中的空白，在一行内显示
4.超出部分显示省略号（文本只有一行时）text-overflow: ellipsis;
5./* display: run-in;根据上下文，作为内联或块级元素显示，如果display：run-in是块级元素（）display：block，
则这个元素会变成inline属性,同时嵌入到后面的block元素中去，若display: run-in;元素后面不是block元素，则该元素保持本身属性*/
17、css2
:after
:before
css3
::after;
::before;
特点：content:(
内容可以有：
1.字符串[可以进行属性设置]
2.图片(引用多媒体;改不了宽高)
3.调用当前元素的属性；
4.可以调用计数器：counter(不用列表实现序号)
18、图片热点
rect coords="10,10,200,200"前两个值是左上角坐标，后两个值是右下角坐标
circle coords="50,50,50" 圆心坐标，半径
poly多边形
来源：CSDN
作者：JOY_LiuLiu
链接：https://blog.csdn.net/JOY_LiuLiu/article/details/77530080