网络公司网站报价方案wordpress文章类插件
-------------------------------------------------------------------------------------------------------
CSS的浮动
float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
float 属性定义元素在哪个方向浮动。
可能的值：
none - 默认值。元素不浮动。
left - 元素向左浮动。
right - 元素向右浮动。
inherit - 规定应该从父元素继承 float 属性的值。
-------------------------------------------------------------------------------------------------------浮动的原理 浮动以后脱离了文档流，不占据文档流的位置，只有左右浮动，没有上下浮动。
浮动的元素会生成一个块级框，而不论它本身是什么类型的元素。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
当容器不够时，会另起一行。
在两个行内块元素之间通常存在空隙，当这两个元素浮动起来便可以消除这个空隙.
-------------------------------------------------------------------------------------------------------
浮动元素还会造成父元素的高度塌陷，解决办法：任选其一
1. 给父元素设置高度
2. 给父元素设置overflow:hidden;
(搭配clear:both;使用清除浮动)
3. 给父元素设置浮动
4. 给父元素设置display:inline-block;
5. 给父元素设置伪元素：.clearfix::after{content: "";display: block;clear: both;}6, 给父元素设置display:flex;7,受影响的元素设置clear:both;
clear :left;清除左侧浮动
clear :right;清除右侧浮动
clear :both;清除左右两侧的浮动所以浮动在特殊情况时会出现一些问题，所以我们要尽量避免使用浮动。
将浮动应用到列表的<li></li>标签上，会使<li></li>标签变成行内块元素，横向排列，例如导航栏。
-------------------------------------------------------------------------------------------------------
CSS的定位
position 属性指定元素的定位类型。
可能的值：
static - 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。relative - 生成相对定位的元素，相对于其正常位置进行定位。
相对定位元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
注意：相对定位元素的位置是相对于其正常位置进行定位的，所以即使元素的位置发生了变化，但是它的相对位置是不变的,还是处于标准流。absolute - 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位,与相对定位不同的是脱离了文档流。
脱离文档流的元素不会占据文档流的位置，不会影响文档流的布局。与浮动类似，会浮在文档流的上方。
与普通浮动不同的是，每次绝对定位都创建一个浮动层，所以会造成层叠问题。
元素的位置也是通过 "left", "top", "right" 以及 "bottom" 属性进行规定。上述两种定位方式的区别在于，相对定位是相对于上一个具有定位的父元素进行定位。如果父级元素没有定位，则继续向上查找。
如果所有的父元素都没有定位，则相对于浏览器窗口进行定位。
-------------------------------------------------------------------------------------------------------
fixed - 生成固定定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed元素的位置是相对于浏览器窗口进行定位的,所以即使元素的位置发生了变化,但是它的相对位置是不变的。
鼠标滑动时，元素不会随着鼠标的移动而移动。
-------------------------------------------------------------------------------------------------------
z-index 属性指定一个元素的堆叠顺序（哪个元素在前，哪个元素在后）。
z-index 只对定位元素有效(position:absolute, position:relative, position:fixed)。
z-index 的值可以是负数。
z-index 的值越大，元素就会越靠前。大的值覆盖小的值。
-------------------------------------------------------------------------------------------------------
CSS的动画
animation 属性是一个简写属性，用于设置六个动画属性：
animation-name - 规定需要绑定到选择器的 keyframe 名称。
animation-duration - 规定完成动画所花费的时间，以秒或毫秒计。
例如：
animation: myfirst 5s;
animation: myfirst 5s linear;
animation: myfirst 5s linear 2s;animation-timing-function - 规定动画的速度曲线。
例如：
animation-timing-function: linear;匀速
animation-timing-function: ease;逐渐变慢
animation-timing-function: ease-in;加速
animation-timing-function: ease-out;减速
animation-timing-function: ease-in-out;先加速后减速
animation-timing-function: cubic-bezier(n,n,n,n);自定义速度曲线
animation-timing-function: step-start;animation-delay - 规定在动画开始之前的延迟。
animation-iteration-count - 规定动画应该播放的次数。
animation-direction - 规定是否应该轮流反向播放动画。
例如：
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;
animation-play-state - 规定动画是否正在运行或暂停。
例如：
animation-play-state: running;
animation-play-state: paused;animation-fill-mode - 规定对象动画时间之外的状态。
例如：
animation-fill-mode: none;
animation-fill-mode: forwards;@keyframes 规则
@keyframes 规则用于创建动画。
@keyframes 规则是 CSS3 中新增的功能。
@keyframes 规则由 @keyframes 关键字开始，后面跟着动画名称和动画内容。
动画名称可以是任何名称，但是必须以 @keyframes 关键字开始。
动画内容是由一个或多个百分比值和 CSS 样式组成的。
-------------------------------------------------------------------------------------------------------
1. 浮动属性（float）
定义：float 属性用于创建浮动框，将元素移动到一边，直至其左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法：
.element {float: left; /* 也可以是 right、none、inherit */
}
属性值：
none：默认值，元素不浮动。left：元素向左浮动。right：元素向右浮动。inherit：规定从父元素继承float属性的值。
2. 浮动原理
- 浮动元素脱离文档流，不占据文档流的位置，仅有左右浮动，无上下浮动。
- 浮动的元素会生成一个块级框，不论其原本的元素类型是什么。
- 浮动框可向左或向右移动，直到外边缘碰到包含框或另一个浮动框的边框。
- 文档普通流中的块框表现得如同浮动框不存在。
- 当容器空间不足时，浮动元素会另起一行。
- 两个行内块元素浮动后可消除它们之间通常存在的空隙。
3. 浮动导致的父元素高度塌陷及解决办法
问题：浮动元素会使父元素的高度塌陷，因为浮动元素脱离了文档流，父元素无法感知其高度。
解决办法：
- 给父元素设置固定高度：
.parent {height: 200px;
}
- 使用
overflow:hidden（搭配clear:both使用清除浮动）：
.parent {overflow: hidden;
}
.clear {clear: both;
}
- 给父元素设置浮动：
.parent {float: left; /* 或 right */
}
- 给父元素设置
display:inline-block：
.parent {display: inline-block;
}
- 给父元素设置伪元素清除浮动：
.clearfix::after{content: "";display: block;clear: both;
}
- 给父元素设置
display:flex：
.parent {display: flex;
}
- 给受影响的元素设置
clear属性：
.clear-left {clear: left; /* 清除左侧浮动 */
}
.clear-right {clear: right; /* 清除右侧浮动 */
}
.clear-both {clear: both; /* 清除左右两侧的浮动 */
}
注意：浮动在特殊情况时会引发一些问题，应尽量避免过度使用浮动。
4. 浮动在列表中的应用
将浮动应用到列表的 <li> 标签上，会使 <li> 标签变成行内块元素，横向排列，常用于制作导航栏。
html
<ul class="nav"><li>首页</li><li>产品</li><li>关于我们</li>
</ul>
.nav li {float: left;list-style: none;margin-right: 10px;
}
九、CSS 的定位
1. 定位属性（position）
定义：position 属性指定元素的定位类型。
语法：
.element {position: relative; /* 也可以是 static、absolute、fixed */
}
属性值：
static：默认值，没有定位，元素出现在正常的流中，忽略top,bottom,left,right,z-index声明。relative：生成相对定位的元素，相对于其正常位置进行定位，通过left,top,right,bottom属性规定位置，且元素仍处于标准流中。
.relative-element {position: relative;left: 20px;top: 10px;
}
absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位，脱离文档流，不占据文档流位置，会浮在文档流上方，可能造成层叠问题，通过left,top,right,bottom属性规定位置。
.absolute-element {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);
}
fixed：生成固定定位的元素，相对于浏览器窗口进行定位，位置通过left,top,right,bottom属性规定，元素相对位置不变，鼠标滑动时元素不会随之移动。
.fixed-element {position: fixed;right: 10px;bottom: 10px;
}
2. 堆叠顺序属性（z-index）
定义：z-index 属性指定一个元素的堆叠顺序，确定哪个元素在前，哪个元素在后。
适用范围：只对定位元素（position:absolute, position:relative, position:fixed）有效。
属性值：可以是负数，值越大，元素越靠前，大的值会覆盖小的值。
.element1 {position: relative;z-index: 1;
}
.element2 {position: relative;z-index: 2; /* 会覆盖 element1 */
}
十、CSS 的动画
1. 动画属性（animation）
定义：animation 是一个简写属性，用于设置六个动画属性。
语法示例：
.element {animation: myfirst 5s linear 2s infinite alternate paused forwards;
}
具体属性及解释：
animation-name：规定需要绑定到选择器的keyframe名称。animation-duration：规定完成动画所花费的时间，以秒或毫秒计，如5s或5000ms。animation-timing-function：规定动画的速度曲线。linear：匀速。ease：逐渐变慢。ease-in：加速。ease-out：减速。ease-in-out：先加速后减速。cubic-bezier(n,n,n,n)：自定义速度曲线。step-start：动画开始即达到最终状态。
.element {animation-timing-function: ease-in-out;
}
animation-delay：规定在动画开始之前的延迟时间，如2s表示延迟 2 秒开始动画。animation-iteration-count：规定动画应该播放的次数，可以是具体数字，也可以是infinite（无限循环）。
.element {animation-iteration-count: 3; /* 播放 3 次 */
}
animation-direction：规定是否应该轮流反向播放动画。normal：正常播放。reverse：反向播放。alternate：在奇数次（1、3、5 等）正向播放，在偶数次（2、4、6 等）反向播放。alternate-reverse：在奇数次（1、3、5 等）反向播放，在偶数次（2、4、6 等）正向播放。
.element {animation-direction: alternate;
}
animation-play-state：规定动画是否正在运行或暂停。running：运行。paused：暂停。
.element {animation-play-state: paused;
}
animation-fill-mode：规定对象动画时间之外的状态。none：默认值，动画结束后，元素回到原来的状态。forwards：动画结束后，元素停留在动画的最终状态。
.element {animation-fill-mode: forwards;
}
2. @keyframes 规则
定义：@keyframes 规则用于创建动画，是 CSS3 中新增的功能。
语法：由 @keyframes 关键字开始，后面跟着动画名称和动画内容，动画内容由一个或多个百分比值和 CSS 样式组成。
@keyframes myAnimation {0% {opacity: 0;transform: translateX(0);}50% {opacity: 0.5;transform: translateX(50px);}100% {opacity: 1;transform: translateX(100px);}
}
上述 @keyframes 定义了名为 myAnimation 的动画，在动画的 0%、50%、100% 阶段分别设置了不同的 opacity（透明度）和 transform（变换）样式。