html5类型

html5类型:

color 颜色类型
date 日期
datetime 日期
datetime-local 日期与时间
month 月份
week 周
time 时间
email 邮箱
number 数值
file 文件

H5中的新的表单元素和属性

datalist 规定输入框的选项列表

autofocus=“autofocus” 自动获取焦点
required 输入框为空,验证提示
step 规定数字间隔,通常放在number当中
min – max 规定类型内容的范围

outline: none; 去掉获取焦点时蓝色的线,黑色框

box-sizing 定义如何计算一个元素的总宽度或者总高度

ontent-box
默认值:如果你设置一个元素的宽度为100px,那么这个元素的内容区域会有100px;并且任何边框和内边距的宽度都会被添加到最后绘制出来的元素宽度上
注:不包含margin

width(宽度)+padding(内边距)+border(边框)=总宽度

border-box
告诉浏览器,你要设置的边框和内边距是包含在width中的
也就是说,如果你设置一个元素的宽度为100px,那么这个100px会包含它的border和padding
注:不包含margin

div box-sizing:border-box; 总宽度:200
width:200px;
border:10px
padding:50px;

显示和隐藏:
display:none; 隐藏
display:block; 显示

隐藏的时候不会占用空间,也就是说该元素不但被隐藏了,而且该元素占用的空间也从页面中消失.

visibility:hidden; 隐藏
visibility:visible; 显示

隐藏的时候会占用空间,也就是说该元素被隐藏时,该元素占用的空间不会从页面中消失

兼容
浏览器兼容性问题,是指因为不同的浏览器对同一代码有不同的解析,造成页面展示效果的不统一.

常见的浏览器内核:
Trident内核 Gecko内核 Blink内核 Webkit内核

IE: Trident内核
谷歌:Webkit内核 现在是Blink内核
火狐:Gecko内核
opera:Webkit内核 现在是Blink内核
360:IE和谷歌双内核
百度: IE内核
QQ浏览器:Trident内核 和 Webkit内核

常见的兼容性问题:
1.不同的浏览器的标签的自带的内外边距不同
解决:*{ margin:0; padding:0;}
2.当标签的高度小于10px;在IE6,IE7中会超出自己设置的高度.
解决:overflow:hidden;
3.图片默认有间距,而且使用内外边距清除也不好使.(一般出现在很多图片放在一起的时候)
解决:使用float进行布局

调整兼容性:
1.之前老版本浏览器(IE)

<!--[if IE]>  如果是IE    <![endif]-->
<!--[if IE 6]>  如果是IE6    <![endif]-->
<!--[if IE 7]>  如果是IE7    <![endif]-->

<!--[if gt IE 7]>  如果是IE7以上    <![endif]-->
<!--[if lt IE 7]>  如果是IE7以下    <![endif]-->
<!--[if gte IE 7]>  如果是IE7及以上    <![endif]-->
<!--[if lte IE 7]>  如果是IE7及以下    <![endif]-->
<!--[if !IE ]>  如果不是IE    <![endif]-->


	<!--[if IE]> 
		
		<link href="new_file.css" rel="stylesheet" type="text/css" />
		
	<![endif]-->	

2.css3样式太超前,有些浏览器不支持.
-o- opera
-ms- IE
-moz- 火狐
-Webkit- 谷歌

transform:
-o-transform:
-ms-transform:
-moz-transform:
-Webkit-transform:

css精灵
通常还被称为"css图像拼合"或者是"css贴图定位".
其实就是通过将多张图片融合到一张图片里,然后通过css background背景定位布置网页背景.
好处:降低http请求次数,增加了网站的性能
合适用在图片较多的网站,或者人流量大的网站

placeholder input注释
letter-spacing 字间距