html/css d03

html5类型：

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

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

datalist

<input list="fu"><!--绑定名字才会提示-->
    <datalist id="fu">
        <option value="FIREFOX"></option>
        <option value="CHARM"></option>
        <option value="OPERA"></option>
        <option value="IE"></option>
    </datalist>

autofocus="autofocus"  自动获取焦点
required    输入框为空,验证提示
step        规定数字间隔,通常放在number当中
min=""  /   max=""    获取类型内容的范围
        <input type="number"step="5" min="50" max="60">
        <input type="date" min="2022-04-01" max="2022-04-03"><!--斜杠不好使,该用横线-->
        <input type="submit" value="提交">

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;
width:200px;
border:10px;
padding:50px;
总宽度为200px[设置的边框和内边距是包含在width中]
---->
div box-sizing:
width:150px;
border:10px;
padding-left:50px;

显示和隐藏:

重构
display:none; 隐藏
display:block; 显示

隐藏的时候不会占用空间,
也就是说该元素不但被隐藏了,而且该元素占用也从页面中消失.[对页面不太友好,导致重新布局]

重绘
visibility:hidden; 隐藏
visibility:bisible; 显示
隐藏时候不会占用空间的,也就是说该元素被隐藏时,该元素占用的空间不会从页面中消失.

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

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

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

常见的兼容性问题:

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

font-size:12px;[保护机制,过小对眼睛不好]

调整兼容性:

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:

• -0-transform:
• -ms-transform:
• -moz-transform:
• -Webkit-transform:

css精灵

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

placeholder input注释
letter-spacing 字间距