day15 怪异盒模型 h5新增标签 多媒体 新增表单 弹性盒

1. 标准盒模型

• box-sizing: content-box
• 总宽度 = 内容区width + 填充区左右(padding) + 边框左右(border) +margin

2. 怪异盒模型

• 触发怪异模型的两种方法：

  • 1. box-sizing: border-box
    • 总宽度=width+margin的左右
  • 1. 缺失文档声明，在ie678的时候触发

为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

3. h5新增标签

• 特点： 语义化
• 1）header 表示页面中一个内容区块或整个页面的标题
• 2）footer 表示页面中一个内容区块或整个页面的脚注
• 3）nav 表示页面中导航链接部分
• 4）article 文章
• 5） aside 侧边栏
• 6）section 板块，表示页面中的一个区块
• 7）main 表示页面中的主要的内容(ie不兼容)
• 8) figure和figcaption 类似于dl
• 9) mark 高亮标记, 是内联元素

4. 多媒体

1）音频 audio

• 属性值：

  • src：音频路径
  • controls：音频控件
  • autoplay：自动播放 谷歌和火狐禁止了 ie可以
  • muted： 静音 火狐静音后可以自动播放
  • loop： 循环

2）视频 video

• 属性值

  • src：音频路径
  • controls：音频控件
  • autoplay： 自动播放 谷歌和火狐禁止了 ie可以
  • muted： 静音 静音后可以自动播放
  • loop：循环
  • poster: 视频未播放之前显示的图片

5. 新增表单type类型

1）表单新增type类型，点击提交按钮的时候会提示

• email： 邮件格式
• url： 地址
• range：滑块
• number： 数字 min最小 max最大
• color：色块
• time：时间 时和分
• datetime-local 时间 年月日时分

2）表单新增属性

• required：必填
• placeholder：提示信息
• autocomplete：显示历史信息。默认是on打开，关闭是off。 必须结合name属性使用。
• autofocus：自动聚焦。 只能有一个
• pattern：正则表达式 限制输入的格式
• multiple 上传文件时，可选择多个

6. 弹性盒

1) 父元素

• 形成弹性盒 display:flex

• 主轴方向 flex-direction

  • row 从左向右
  • row-reverse 从右向左
  • column 从上向下
  • column-reverse 从下向上

• 主轴排列方式 justify-content

  • flex-start 主轴起点
  • flex-end 主轴终点
  • center 主轴中心
  • space-between 第一个和最后一个靠两边 中间平分
  • space-around 中间的间隙是两边的2倍
  • space-evenly 间隙平均分配

• 交叉轴排列方式 align-items

  • stretch 拉伸 纵向拉伸需要去掉子元素的高度
  • flex-start 交叉轴起点
  • flex-end 交叉轴终点
  • center 交叉轴中心
• 换行 flex-wrap: nowrap 不换行 wrap 换行

• 多行直之间的对齐方式 align-content

  • stretch 拉伸 纵向要拉伸 不要设置宽
  • flex-start 父元素起点
  • flex-end 父元素终点
  • center 父元素中心
  • space-between 父元素上下两边
  • space-around 中间的间隙是两边的2倍
  • space-evenly 间隙平均分配

2）子元素

• 重置子元素的交叉轴对齐方式 align-self

  • stretch 拉伸 纵向拉伸需要去掉子元素的高度
  • flex-start 交叉轴起点
  • flex-end 交叉轴终点
  • center 交叉轴中心