day15-李大人part1

day15

一：诡异盒模型：

1·1：标准盒模型：box-sizing:content-box;

​ 总宽度：内容区+padding左右+border左右+margin

1·2：怪异盒模型：box-sizing:border-box;（css3属性）

​ 在IE7以下不支持
​ 总宽度：width+margin
​ 浏览器的兼容：-moz-box-sizing：border-box

1·3：怪异盒模型的触发条件：

​ 1·设置box-sizing
​ 2·不写文档声明

二：H5新增标签

H5标签具有的语义化的作用（一看就知道该标签是用来干嘛的）

• header（头部）
• nav（导航）直接生成类似于导航栏的导航【类似于ul li】
• section（版块）【类似于div】
• main（主要区域）
• artical（文章）【类似于p】
• figure（自定义）里面可以嵌套img和figurecaption【类似于dl dt dd】
• aside(侧边栏)
• mark（高亮显示）【类似于b】
• footer(底部）

三：多媒体标签

3·1 音频

audio标签，默认没有控件显示，

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

3·2 视频

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

四：表单新增

4·1：表单新增加的type属性值，点击提交按钮的时候会提示

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

4·2：表单新增属性

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

五：弹性盒子

父元素

形成弹性盒子->display：flex

父1，主轴方向 flex-direction：

• row 从左向右（默认）
• row-reverse 从右向左
• column 从上向下
• column-reverse 从下向上

父2，主轴排列方式 jusitify-content：（整体）

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

父3， 交叉轴排列方式 align-items：

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

父4，多行值之间的对齐方式 align-content：

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

父5，换行 flex-wrap:

• nowrap 不换行
• wrap 换行

子元素

两边

• space-around 中间的间隙是两边的2倍
• space-evenly 间隙平均分配

父5，换行 flex-wrap:

• nowrap 不换行
• wrap 换行

子元素

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