首先h5里面有几个通用的格式,不再像之前每次用div定义。 header nav section aritcle aside footer 视频和音频的格式 video:ogg webm mp4 audio:mp3 ogg wav 属性: width height src controls autoplay loop poster src 文件源 controls插件,也就是下面的进度条一栏 loop循环播放 poster暂停 表单 text password textarea checkbox radio file select button submit reset
H5 表单: email,url,date,week,month,time,number,color,range,search H5表单属性 required 必填项 autocomplete 自动记忆 plactholder 提示信息 pattern 正则表达式pattern=[a-z]{3} 意思就是输入三个字母 了解一下 autofocus 自动聚焦 去边距间距: html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img *{}

选择器 元素选择器

  • 通配符 e 标签选择器 #id id选择器 .class 类选择器 关系选择器 e f 包含选择器 e>f父子选择器 e+f 相邻选择器 :e元素后所有的f元素 e~f 兄弟选择器 e后面所有的兄弟元素f 伪类选择器 :link 访问前 :hover 鼠标悬停时 :active 点击激活状态 :visited 访问后 :focus 获取焦点时 UI元素状态伪类选择器 e:checked 选中状态 (只针对单选按钮和复选框) e:enabled 可编辑状态 (默认状态) e:disabled 禁用状态 属性选择器 e[attr] e[attr="value"] e[attr~="value"] 包含空格及value的e元素 e[attr|="value"] 有分隔符-的e元素 e[attr^="value"] 以value开头的e e[attr$="value"] 以value结尾的e 有[attr*="value"] attr中包含value的e标签 伪对象选择器 e:first-letter 第一个字符 e:first-line 第一行 e:before 前 e:after 后 e::selection 选中状态时触发的效果 结构伪类选择器 :root 根选择器 e:first-child 第一个子元素e e:last-child 最后一个子元素e e:only-child 唯一的一个子元素e e:nth-child(n) 第n个子元素e n=odd even 数字 公式
    e:nth-last-child(n) 倒数第n个子元素e e:first-of-type 第一个同类型元素 e:last-of-type 最后一个同类型元素 e:only-of-type 唯一同类型元素 e:nth-of-type(n) 第n个同类型元素e n=odd even 数字 公式
    e:nth-last-of-type(n) 倒数第n个同类型元素e e:empty 空元素 ———————————————————————————— box-shadow 盒子阴影 box-shadow:水平位置 垂直位置 模糊距离 阴影大小 阴影颜色 [内置或外置] background-origin:border-box,padding-box,content-box background-clip::border-box,padding-box,content-box background:linear-gradient(方向,颜色,……)线性渐变 background:repeating-linear-gradient(方向,颜色……) 重复线性渐变

径向渐变 background:radial-gradient(中心坐标,形状 大小,颜色……) 大小: /closest-side 最近的边 farthest-side 最远的边 closest-corner 最近的角 farthest-corner 最远的角/ 形状: circle 或 ellipse(默认椭圆) background:repeating-radial-gradient() 重复径向渐变

多列 column-count:分列数 column-gap:栏间距 column-rule:分隔线 弹性盒子 父元素中添加 display:flex; display:-webkit-flex; 子元素排列方式 :(父元素添加) justify-content:flex-start/flex-end/center/space-between/space-around 子元素垂直对齐方式(父元素中添加) align-item:flex-start/flex-end/center/baseline/stretch 顶端/底端/居中/基线/默认auto 子元素换行方式(父元素添加) flex-wrap:nowarp/wrap/wrap-reverse/initial/inherit 单行(不换行,会溢出)/多行,自动换行/换行,反转排列/初始化默认效果相似/默认(不换行) align-content 设置行对齐方式 (添加到父元素中) 前提条件是flex-wrap为wrap时才可以用 align-content:stretch/flex-start/flex-end/center/space-between/space-around 默认/顶端、底端、居中、两端、平均分布 子元素顺序(子元素添加) order:1,值越小越靠前 可以为负值 子元素对齐(子元素添加) margin:auto;对象自动留白 按比例分配元素(子元素添加) flex:比例值 如: div>div*3
子元素按顺序添加flex:1 flex:3 flex:1 结果:1:3:1