分类 H5&C3 下的文章

H5&C3之Flexbox弹性布局


布局的传统解决方案,基于盒状模型,依赖display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。

2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。

Flexbox弹性布局提供一个更加有效的方式来布置,对齐和分布在容器之间的各项内容,即使它们的大小是未知或者动态变化的。
弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间的能力。

一、基本概念

1、Flex容器和Flex项目

采用Flex布局的元素,称为Flex容器(flex container)简称"容器"。它的所有子元素自动成为容器成员,称为Flex项目(flex item)简称"项目"。
容器和项目关系




H5&C3之过渡效果和2D变换


一、transition过渡

  • transition-property: 要运动的样式(all || [attr] || none)
  • transition-duration: 运动时间
  • transition-delay:延迟时间
  • transition-timing-function: 运动形式

    - ease: 逐渐变慢(默认值)
    - linear: 匀速
    - ease-in: 加速
    - ease-out: 减速
    - ease-in-out: 先加速后减速
    - cubic-bezier: 贝塞尔曲线(x1, y1, x2, y2 )
    
    transition: all 2s;  // 所有属性,过渡时间2s
    transition: width 2s, height 3s;
    > 贝塞尔曲线在线编辑: http://cubic-bezier.com/


H5&C3之响应式布局


一、响应式布局原理

第一步:Meta标签
大多数移动浏览器将HTML页面放大为宽的视图(viewport)以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器,使用设备的宽度作为视图宽度并禁止初始的缩放。在标签里加入这个meta标签。<meta name="viewport" content="width=device-width, initial-scale=1
user-scalable=no">

第二步:HTML结构
由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素,更多都是百分比操作,这一条非常重要。
字体也不能使用绝对大小(px),而只能使用例如相对大小(em)、相对大小(rem)。






H5&C3之选择器


一、属性选择器

  • Element[attr]只使用属性名,但没有确定任何属性值

    p[cxy]{background: red;color: white;}
  • Element[type="text"]指定属性名,并指定了该属性的属性值

    p[cxy=html]{background: red;color: white;}
    p[cxy='css']{background: red;color: white;}