HTML5 混合APP开发学习笔记（四）——CSS样式设计

CSS样式设计

浮动和定位

• 浮动
  设置浮动
  默认情况下，HTML元素会从上到下或从左到右，将元素一个接一个的排列出来，这样排版就会显得非常单点混乱。
  使用浮动就能较好的解决这个问题
  float: left | right; 左右浮动，可以实现文字环绕功能和瀑布流的样子
  
  清除浮动
  clear: left|right|both; 可以限制浮动的范围，左右或是两边都限制

• 定位
  由定位方式和偏移量共同决定位置信息
  position: static｜relative｜absolute｜fixed
  
  定位后可以通过偏移属性 top、bottom、left、right 的组合来精确定义元素的位置
  z-index: 当对多个元素同时设置定位时，定位元素之间有可能会出现重叠。在CSS中，要想调整重叠定位的顺序，可以使用z-index属性控制，z-index是个整数，默认值为0，取值越大，定位元素在层叠中越在上面，可以实现层层叠叠的效果
  

• 块元素与行内元素
  块元素在页面中以区域块的形式出现，它会独自占据一行或多行，可以对其设置宽度、高度、对齐等属性，常用于页面布局和结构的搭建。常见的块元素标签有 h1~h6、div、p、ul、li 等
  行内元素不一样，它不需要在新的一行出现，也不强迫其他元素在新的一行显示。一个行内元素通常都会和它前后的行内元素显示在同一行中，不占独立的区域。但一般不能设置宽度、高度、对齐等属性。常见的行内元素标签有 span、a 等。
  
  块元素和行内元素之间的互相转换
  display: inline｜block｜inline-block｜none;

• inline：将标签显示为行内元素

• block：将标签显示为块元素

• inline-block：将标签显示为行内块元素，可以对其设置宽高和对齐等属性，但是不会独占一行

• none：标签元素被隐藏，不在页面上显示，也不占用页面空间

动画效果

1. 过渡
   元素的样式逐渐变化，因此需要两个参数：需要变化的属性，完成变化所需要的时间
   -webkit-transition: <属性名称> <过渡时间> [速度曲线] [过渡延迟时间]
   速度曲线：控制变化的速率
   

2. 2D及3D变换
   2D

   • 平移：-webkit-transform: translate(50px,100px);
   • 旋转：-webkit-transform: rotate(30deg);
   • 缩放：-webkit-transform: scale(0.5,0.5)
   • 倾斜：-webkit-transform: skew(10deg,10deg)

   3D

   • X轴旋转：-webkit-transform: rotateX(120deg);
   • Y轴旋转：-webkit-transform: rotateY(120deg);

3. 动画控制

   • 定义动画
     • 只设置起始和终止动画帧
       @-webkit-keyframes 动画规则名
       {
       from {/CSS属性设置/}
       to {/CSS属性设置/}
       }
     • 以百分比方式设定帧，设置关键节点的状态
       @-webkit-keyframes 动画规则名
       {
       0%{/CSS属性设置/}
       25%{/CSS属性设置/}
       50%{/CSS属性设置/}
       100%{/CSS属性设置/}
       }
   • 实现动画
     -webkit-animation: name duration timing-function delay iteration-count direction;
     • name：用@keyframes已定义好的动画规则名。
     • duraiton：动画花费时间。
     • timing-function：动画速度曲线
     • delay：动画延迟时间
     • iteration-count：动画播放次数，infinite表示反复播放
     • direction：动画逆向播放，默认值为normal，alternate表示动画轮流反向播放

在APP开发中常用的CSS属性

1. overflow：当容器的内容超过容器自身的大小时，内容溢出的显示方式
   overflow: visible｜hidden｜auto｜scroll;
   • visible:表示内容不会裁剪，但是会在元素之外呈现
   • hidden:溢出内容自动隐藏
   • auto:会形成滚动条，不丢失细节，不溢出
   • scroll:始终显示滚动条
2. list-style：设置列表项的样式，常用它消除列表项前的小黑点
   list-style:none;
3. border-collapse：设置表格显示方式
   border-collapse:separate ｜collapse;前者为默认模式，后者使得表格更加简单明了
4. -webkit-tap-highlight-color：用于设定元素在移动设备（如Android、iOS）上被触发点击事件时，响应的背景框的颜色。一般设置为透明色，防止元素被点击时出现背景色。
   -webkit-tap-highlight-color：transparent;
5. -webkit-user-select：也是App开发中常用的，用于设置是否允许用户选中文本
   -webkit-user-select:none｜text;