关于css: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 穿插轴核心