html+css第四天

html5类型:

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

    <input type="color">
    <input type="date">
    <input type="datetime">
    <input type="datetime-local">
    <input type="week">
    <input type="time">
    <input type="email">
    <input type="number">
    <input type="file">

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

  datalist     规定输入框的选项列表

    <form>
        <input type="color">
        <input type="date">
    </form>

    <input list="aa">
    <datalist id="aa">
        <option value="firefox">111</option>
        <option value="chrome">222</option>
        <option value="opera">333</option>
        <option value="ie">444</option>
    </datalist>

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

<form>
  <input type="text" autofocus>
  <input type="text" required>
  <input type="number" step="5" min="50" max="60">
  <input type="date" min="2022-04-01" max="2022-04-03">
  <input type="submit" value="提交">
  <input type="reset"> 
</form>

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

        input{
            outline: none;
        
        }

    <input type="color">
    <input type="datetime-local">
    <input type="date">
    <input type="datetime">
    <input type="file">

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;  显示

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

<div class="a1"></div> 

      .a1{
          width: 300px;
          height: 200px;
          background-color: pink;

      }
      .a1:hover{
          display: none;
      }

兼容

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

常见的浏览器内核:

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]

2.css3样式太超前,有些浏览器不支持

  -o-         opera
  -ms-        IE
  -moz-       火狐
  -Webkit-    谷歌

例：transform:
        -o-transform:
        -ms-transform:
        -moz-transform:
        -Webkit-transform:

css精灵

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

        .a1{
            width: 44px;
            height: 44px;
            background: url(../image/navsprites_hover.gif) no-repeat 0px 0px;
        }
        .a2{
            width: 44px;
            height: 44px;
            background: url(../image/navsprites_hover.gif) no-repeat -45px 0px;
        }
        .a3{
            width: 44px;
            height: 44px;
            background: url(../image/navsprites_hover.gif) no-repeat -90px 0px;
        }
        .a1:hover{
            width: 44px;
            height: 44px;
            background: url(../image/navsprites_hover.gif) no-repeat 0px -45px;
        }
        .a2:hover{
            width: 44px;
            height: 44px;
            background: url(../image/navsprites_hover.gif) no-repeat -45px -45px;
        }
        .a3:hover{
            width: 44px;
            height: 44px;
            background: url(../image/navsprites_hover.gif) no-repeat -90px -45px;
        }

    <div class="a1"></div>
    <div class="a2"></div>
    <div class="a3"></div>

placeholder                    input注释
letter-spacing                 字间距

<td class="left">姓名</td>

    .left{
      width: 40%;
      height:50px;
      text-align: right;
      padding-right: 5px;
      letter-spacing: 10px;
    }