web前端开发H5知识点

标签：top   back   ati   clip   mail   html   circle   htm   大小   

选择器
元素选择器

• 通配符
  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

web前端开发H5知识点

标签：top   back   ati   clip   mail   html   circle   htm   大小   

原文地址：https://blog.51cto.com/14584021/2451937