应用视觉设计

HTML 元素排列

HTML 元素皆为盒子，也就是通常所说的盒模型。
块级元素自动从新的一行开始（比如标题、段落以及 div），行内元素排列在上一个元素后（比如图片以及 span）。

text-align

text-align 属性创建视觉平衡。

text-align: justify;可以让除最后一行之外的文字两端对齐，即每行的左右两端都紧贴行的边缘。
text-align: center;可以让文本居中对齐。
text-align: right;可以让文本右对齐。
text-align: left;是text-align的默认值，它可以让文本左对齐。

strong 标签加粗文本

p {
    text-align: justify;
    font-weight:bold;==》<strong></strong>
 }
<p>Google 由在<strong>斯坦福大学</strong>攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。</p>

u 标签给文本添加下划线

 p {
    text-align: justify;
    text-decoration: underline;==》<u></u>
  }
<p>Google 由在<strong>斯坦福大学</strong>攻读<u>理工博士</u>的拉里·佩奇和谢尔盖·布林共同创建。</p>

em 标签强调文本

<p><em> 由在<strong>斯坦福大学</strong>攻读<u>理工博士</u>的拉里·佩奇和谢尔盖·布林共同创建。</em></p>
 p {
    text-align: justify;
    font-style: italic;==》<em></em>
  }

s 标签给文本添加删除线

text-decoration: line-through;==》<s></s>
<h4><s>Alphabet</s></h4>

hr 标签创建水平线

<hr>

box-shadow

用来给元素添加阴影，该属性值是由逗号分隔的一个或多个阴影列表

 #thumbnail{
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  }

opactiy

设置元素的透明度:
值 1 代表完全不透明。
值 0.5 代表半透明。
值 0 代表完全透明。

.links {
    text-align: left;
    color: black;
    opacity:0.7;
  }

text-transform

给文本添加大写效果。

 h4 {
    text-align: center;
    background-color: rgba(45, 45, 45, 0.1);
    padding: 10px;
    font-size: 27px;
    text-transform:uppercase;
  }

line-height

设置行间的距离，设置每行文字所占据的垂直空间。

 p {
    font-size: 16px;
    line-height:25px;
  }

锚点的悬停状态

a:hover {
  color: blue;
}
<a href="http://freecatphotoapp.com/" target="_blank">猫咪相册 App</a>

定位

position属性:
relative：相对位置
absolute:绝对定位，将元素从当前的文档流里面移除，周围的元素会忽略它。元素的定位参照于最近的已定位祖先元素。
fixed：固定定位，特殊的绝对（absolute）定位

**

fixed定位和absolute定位的最明显的区别是fixed定位元素不会随着屏幕滚动而移动

**

z-index

更改重叠元素的位置。

.base{
z-index：2
}

线性渐变

第一个参数指定了颜色过渡的方向 - 它的值是角度，90deg 代表垂直渐变，45deg 的渐变角度和反斜杠方向差不多。剩下的参数指定了渐变颜色的顺序
background: linear-gradient(gradient_direction, 颜色 1, 颜色 2, 颜色 3, ...);

条纹元素

 repeating-linear-gradient( 90deg,
      yellow 0px,
      blue 40px,
      green 40px,
      red 80px)

更改元素的大小

  #ball1 {
    left: 20%;
  }
  #ball2 {
    left: 65%;
    transform:scale(1.5);//放大多少倍
  }
  div:hover { 
    transform: scale(1.1);//悬浮时放大1.1倍
  }
  #bottom {
    background-color: blue;
    transform:skewX(-21deg);//沿着 X 轴翻转段落元素 -21 度
  }
  #top {
    background-color: red;
    transform: skewY(-10deg);//沿着 y 轴翻转段落元素 -10 度
    transform:rotate(-10deg);
  }
<div class="ball" id= "ball1"></div>
<div class="ball" id= "ball2"></div>
<div></div>
<div id="bottom"></div>

before和after

before和after必须配合content来使用

这个属性通常用来给元素添加内容
.heart:after {
  background-color: pink;
  content: "";
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0px;
  left: 25px;
}
.heart:before {
  content: "" ;
  background-color: pink;
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: -25px;
  left: 0px;
}

元素添加动画

animation属性控制动画的外观，@keyframes规则控制动画中各阶段的变化。
animation-name设置动画的名称;
animation-fill-mode:forwards指定在动画结束时元素的样式；
animation-iteration-count控制动画循环的次数，infinite一直运行；
@keyframes能够创建动画；
opacity渐隐；
animation-timing-function规定动画的速度曲线：
（默认的值是ease，动画以低速开始，然后加快，在结束前变慢。
ease-out，动画以高速开始，以低速结束;ease-in，动画以低速开始，以高速结束；linear，动画从头到尾的速度是相同的。）

#anim {
  animation-name: colorful;
  animation-duration: 3s;
}
@keyframes colorful {
  0% {
    background-color: blue;
  }
  100% {
    background-color: yellow;
  }
}
//悬浮动画
#anim:hover {
    animation-name: background-color;
    animation-duration: 500ms;
    animation-fill-mode:forwards;
    animation-iteration-count: infinite;
  }

  @keyframes background-color{
    100% {
    background-color: #4791d0;
    opacity:0.1;
   animation-timing-function:linear(2);
  }
  }
<div id="anim "></div>

贝塞尔曲线的原理cubic-bezier

所有的函数都是从坐标为 (0, 0) 的p0开始，在坐标为 (1, 1) 的p3结束。
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);