H5&Css3 复习

coffee
118 阅读9分钟

H5

重点在于页面的语义化；

新增布局标签

  1. header：区域的头部
  2. footer：区域的底部
  3. nav：导航
  4. article：文章，帖子，杂志，新闻，博客，评论等
  5. section：页面中的某段文字，或文章中的某段文字（里面文字通常里面会包含标题）
  6. aside：侧边栏
  7. main (几乎不用)
  8. hgroup(w3c已删除，几乎不用)

QA

  1. 关于article与section的区别：
    • article里面可以有多个section；
    • section强调的是分段或分块，如果你想将一篇内容分成几段的时候，可以使用section；
    • article比section更强调独立性，一块内容如果比较独立且完整，应该用article；

新增状态标签

  1. meter 类似手机电量的那种状态的的一种标签；已知范围内的标量；
  2. progress：进度的指示器

新增列表标签

  1. datalist：用于搜索框的关键字提示；
  2. details：用于展示问题和答案，或者对专有名词进行解释； 跟summary一起使用； 写在标签details里面，用于指定问题或专有名词；

新增文本标签

  1. ruby：包裹需要注音的文字； rt标签：写在ruby标签里面，用来写注音；
  2. mark：表示语义强调；

新增表单控件标签

新增的表单控件属性

  1. placeHolder：占位符；
  2. required：必须；
  3. autofocus: 自动聚焦；
  4. autocomplete: 自动填充（之前输入过的内容）； 不能用于密码/radio/checkbox/textarea; 但其实一般不建议用；
  5. pattern：正则表达式； 不能用于textarea;

input新增type标签

  1. email：邮箱格式；
  2. url: 网址；
  3. number：数值； step,上下增加；max会影响输入框的宽度；
  4. search：侧重语义化；
  5. tel: 电话； 重点在于移动端，弹出的是电话键盘；
  6. range: 范围选择器；
  7. color: 颜色选择器；
  8. date: 日期选择器；
  9. month: 月份；
  10. week： 周；
  11. time: 时间；
  12. datetime-local: 本地时间选择器；

新增媒体标签

视频 video

src: width: height:宽高尽量不要同时给，保持原有比例； controls：控制条； muted：默认静音； autoplay: 自动播放，最好静音状态下； 媒体参与度：有的时候，即使没静音，视频也可以自动播放，就是浏览器发现你经常访问这个网站播放视频，认为该网站的媒体参与度高，就不会对自动播放进行限制； poster: 封面；默认第一帧； loop: 循环播放； preload: 预加载；auto,none,metadata;

音频 audio

大多数同video；

新增全局属性

  1. contenteditable: 内容的可编辑性； 富文本编辑器：wang editor;
  2. draggable: 可拖动，配合js进行交互； ondragend: 拖动结束事件；
  3. hidden: 隐藏元素；
  4. spellcheck： 拼写检查；
  5. contextmenu: 右键菜单；
  6. data-X: 私有性属性；

兼容性处理

  1. 引入谷歌写的html5shiv.js文件； 
    <!--[if lt ie 9]>
<script src="./html5shiv.js"></script>
<![endif]-->
  2. 让IE处于最优的渲染模式； 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">

。。。

CSS3

(兼容性网站)[caniuse.com]；

新增长度单位

rem: 自适应布局： vw:视口的宽度；多用于移动端；使用比较多； vh:视口的高度； vmax:视口的宽度/高度中取最大的； vmin:视口的宽度/高度中取最小的；

新增盒子属性

  1. box-sizing: 盒子模型； 默认是标准盒模型content-box: 内容大小； 怪异盒模型border-box: 比较常用 = 内容宽度 + padding + border；
  2. resize:可以调整大小；
  3. box-shadow:盒子阴影：特别常用； box-shadow: 水平方向阴影 垂直方向阴影 阴影颜色； box-shadow: 水平方向阴影 垂直方向阴影 模糊程度； box-shadow: 水平方向阴影 垂直方向阴影 模糊程度 阴影颜色； box-shadow: 水平方向阴影 垂直方向阴影 模糊程度 阴影外延值 阴影颜色； box-shadow: 水平方向阴影 垂直方向阴影 模糊程度 阴影外延值 阴影颜色 内阴影；
  4. opacity: 透明度；

新增背景属性

  1. background-origin: 背景图的原点；默认是容器padding的左上角；
    • padding-box
    • content-box
    • border-box
  2. background-clip:背景图裁剪，默认是border-box,border之外的不可见；
    • border-box
    • content-box
    • padding-box
    • text: 背景图呈现在文字上；
  3. background-size: 背景图的大小，默认保留图片的大小进行渲染；
    • 像素值
    • 百分比
    • contain
    • cover
  4. background: 符合属性；

新增边框属性

  1. border-radius: 圆角； 每个角可以单独设置； 椭圆：设两个值；
  2. outline边框外轮廓：（不常用）； 不占位； outline-offset：偏移量；

新增文本属性

  1. 文本阴影text-shadow
  2. 文本换行white-space
  3. 文本溢出text-overflow
  4. 文本修饰text-decoration
  5. 文本描边text-stroke(测试性)

新增渐变

  1. 线性渐变 linear-gradient():渐变函数； - 可指定方向；（方向关键字:eg:right...,角度:45deg...,） - 渐变范围；
  2. 径向渐变 radical-gradient()：径向函数； - 调整圆心的位置；（方向关键字:eg:right...,像素值:100px...,） - 通过circle调整为正圆； - 通过水平盒垂直方向设置为同一半径，调整为正圆； - 渐变范围；
  3. 重复渐变 repeating-linear-gradient()：从来没用过这个🧐； repeating-radical-gradient()； 在没有发生渐变的区域重复渐变；

web字体

iconfront:阿里字体

2D变换

transform：

  1. 位移：translate()...
  2. 缩放：scale()...
    • 可以利用缩放实现比12px更小的文字；
    • 不能用于行内元素；
  3. 旋转:rotate()...,默认是沿Z轴旋转；
  4. 扭曲：skew(),不常用；
  5. 多重变换：空格分隔；顺序不同，效果不同；建议旋转放到最后；
  6. 变换原点：transform-origin;

3D变换

3D空间和景深

给父元素身上添加： - 开启3D空间：transform-style:preserve-sd; - 设置景深(观察者距Z轴原点的距离)：perspective: 500px;有了透视效果，近大远小；

3D透视点位置

透视点位置通俗点讲就是“观察者的位置”；默认是开启3D空间的正中间的位置； perspective-origin：调整透视点的位置；

3D位移

translateZ()配合3D透视点位置perspective-origin来实现3D效果； translate3d(x,y,z): 其实3d效果都不是很太明显；

3D旋转

rotate（）：旋转； rotateX(): rotateY(): rotate3d():使用比较少；

3D缩放

scale(): scaleZ():html元素没有厚度；所以调整的是景深的放大和缩小；直接设置看不出什么变化，可以配合roate旋转一定角度后看出变化；

3D多重变换

transform：translateZ(45deg) scaleZ(2) rotateY(45deg); 顺序很重要，具有破坏性的放到最后，比如旋转；

背部可见性

镜像的感觉 backface-visibility:hidden;当反转到背部的时候就看不见了；

过渡

transition：复合属性； transition-property: 过渡属性；all(所有能过渡的属性) transition-duration: 过渡时间； transition-delay: 过度延迟； transition-timing-function: 过渡效果； - ease: 平滑效果； - linear：匀速； - ease-in: 慢-》快； - ease-out: 快-》慢； - ease-in-out: 慢-》快-》慢; - step-start:没有过度效果； - step-end:等过渡时间到了，瞬间变化； - steps(数字):分阶段变化； - cubic-bezier:贝塞尔曲线；

动画

animation： 帧： 关键帧 定义一个动画：@keyframes 动画名 {} 子属性跟过渡的差不多； 动画的播放次数； 反转； 往复运动：alternate； animation-fill-mode: 动画以外的状态（不动的时候停在哪）； animation-play-state: 动画的播放状态； steps()连续动画还是有点意思！

动画和过渡的区别

  1. 动画不需要触发条件，过渡需要一定的触发条件；
  2. 动画可以通过关键帧进行精细的设计，过渡只关注起始点和结束点；

多列布局

column-count: 容器中列的数量； column-width: 列的宽度，自动计算列的数量； columns：复合属性(指针对上面两个)，不推荐使用； column-gap: 调整列间距； column-rule-width: 列的边框相关属性； column-rule-style： column-rule-color: column-rule：列的边框复合属性; column-span: 跨列；all(跨所有列)；针对某个元素；

伸缩盒

flex布局：YYDS； align-items的默认值是strech; flex-basis:设置伸缩项目在主轴上的基准长度；默认auto； flex-grow: 按比例拉伸剩余空间； flex-shrink:按比例压缩剩余空间；默认值为1；收缩比的计算方式； 收缩的极限保证内容的呈现； flex：复合属性（flex-grow，flex-shrink，flex-basis）； flex: auto <==> flex: 1 1 auto; flex: 1 <==> flex: 1 1 0; flex: none <==> flex: 0 0 auto;不压缩不拉伸不设置基准长度； order:排序； align-self: 调整自己在侧轴方向的对齐方式；

响应式布局

媒体查询

  1. 媒体类型：
// 只有在打印机或者打印预览才应用的样式
@media print {}
// 屏幕
@media screen {}
// 所有
@media all {}
  1. 媒体特性：
// 视口宽度为800px的时候
@media (width: 800px) {}
// 视口宽度小于等于800px的时候
@media (max-width: 800px) {}
// 视口宽度大于等于800px的时候
@media (min-width: 800px) {}
......
// 设备宽度
@media (device-width: 800px) {}
先后顺序的样式覆盖问题；
// 检测视口旋转的方向（横屏/竖屏）
  1. 运算符：
// and 且，可多个
@media (min-width: 800px) and (max-width: 900px) {}
// 或 ,/or
@media (max-width: 800px),(min-width: 900px) {}
// 否定 not
@media not screen {}
// only 肯定(之前多用于处理IE浏览器的兼容性问题)
@media only screen {}
  1. 常用阈值 (以具体需求为准；) 超小屏幕：<= 768; 中等屏幕：<= 992; 大屏幕： <= 1200; 超大屏幕：>=1200;
<link media=>

BFC

定义：块格式化上下文（Block Formatting Context）; 开启BFC之后可以解决的问题： - 其子元素不会产生margin塌陷问题； - 自己不会被其他浮动元素所覆盖； - 就算其子元素浮动，自身高度也不会发生塌陷；

怎么开启BFC： - 跟元素，html； - 浮动元素； - 绝对定位，固定定位元素； - 行内块元素； - 表格单元格。。。； - overflow的值不为visible的块元素； - 伸缩项目 - 多列容器 - column-span为all的元素 - display为flow-root;建立一个BFC上下文，几乎没啥副作用；

avatar
文章
阅读
粉丝