阶段性总结（CSS）五

1.定位

定位：将盒子固定在某个位置上。结构：定位模式+边偏移

定位模式：position

static	默认值，静态定位，表示没有定位，元素会按照正常的位置显示，此时 top、bottom、left 和 right 4 个定位属性也不会被应用。
relative	相对定位，即相对于元素的正常位置进行定位，您可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于正常位置的偏移量，在此过程中不会对其它元素造成影响。
absolute	绝对定位，相对于第一个非 static 定位的父级元素进行定位，可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于父级元素位置的偏移量。如果没有满足条件的父级元素，则会相对于浏览器窗口来进行定位。使用绝对定位的元素不会对其它元素造成影响。
fixed	固定定位，相对于浏览器的创建进行定位，可以使用 top、right、bottom、left 这 4 个属性来定义元素相对于浏览器窗口的位置。使用固定定位的元素无论如何滚动浏览器窗口元素的位置都是固定不变的。
sticky	粘性定位，它是 relative 和 fixed 的结合体，能够实线类似吸附的效果，当滚动页面时它的效果与 relative 相同，当要滚动到屏幕之外时则会自动变成 fixed 的效果。

边偏移：top bottom,left right

2.定位堆叠顺序

z-index=i;   i越大元素位置越靠近读者（显示优先级越高，类似卡片堆放，z-index越大就越放在最顶）

• 绝对定位盒模型的居中显示

设置了绝对定位的盒子margin:0 auto 将不再起作用，通过transform+position边偏移来重新居中定位。

left:50%;                                        //元素距离父元素左边框偏移父元素宽度的50%

transform:translateX(-50%);        //元素相对自己的位置向左偏移自身宽度的50%

 注意：浮动的盒子不会压住标准流文字（文字环绕），但定位盒子会压住文字。

3.元素的显示与隐藏

.box{
    display: none;
    /* 隐藏，且不在占有原来的位置 */
    display: block;
    /* 显示 */

    visibility: inherit;
    /* 可视性   
    参数：inherit  继承上一个父元素的可视性
         visible   可视
         hidden    隐藏（原位置仍保留）
         collapse  隐藏表格的行或列
    */

    overflow:hidden;
    /* 对溢出部分进行修剪并隐藏
    visible  内容不会被修剪，会呈现在元素框之外 
    hidden   对溢出部分进行隐藏
    scroll   溢出部分进行隐藏，设置滚动条可以滚动查看剩余内容
    auto     根据内容溢出情况自动调整，若溢出则显示滚动条，否则正常显示。
     */
}

4.精灵图

由于浏览器需频繁向服务器请求图像，为减少图像请求次数提高加载速度，出现了精灵图技术。

原理：将网页中的不经常变动的小背景图像整合到一张大图中。仅向服务器请求一次大图即可满足多处用图所需，再利用background-position来实现背景图像位置的偏移。

 5.其他样式

• 鼠标样式

cursor: default/pointer/move/text/not-allowed

• 表单轮廓线

outline:0;                //去除表单轮廓线

resize:0;                 //防止文本域拖拽

vertical-align: baseline/top/middle/bottom;        //图片表单与文字的垂直方向对齐方式

 

• 溢出文字用省略号替代

1).强制文本在一行内显示  white-space:nowarp;

2).溢出隐藏                over-flow:hidden

3).text-overflow :        ellipsis

6.CSS3新特性

• 属性选择器

input [class*="child"]{
        color: red;
     }
     /*[value="x"]选择属性值value="x"的元素
     [value^="x"]选择属性值value以x开头的元素，例如class="xia"
     [value$="x"]选择属性值value以x结尾的元素，例如class="max"
     [value="x"]选择属性值value包含x的元素，例如class="exam"
*/

• 结构伪类选择器

ele:first-child{
        background-color: red;
     }
    /* ele:last-child
     ele:nth-child(N)
     N可以为具体的数字、关键字、公式。
     even偶数,odd为奇数
     f(n)即n的函数(n=0,1,2……),例如(n-2),则是选出从第三个子元素开始之后的所有子元素。

     ele:nth-of-type()
     作用类似于nth-child,但nth-child是把父元素的所有子元素一起排序取第N个
     而nth-of-type,是针对指定类的子元素元素ele排序，然后取第N个
    */

• 伪元素选择器

伪元素：用于创建一些不在DOM树中的元素，并为其添加样式。例如，我们可以通过:：before来在一个元素之前添加一些文本，并为这些文本添加样式，虽然用户可以看见这些文本，但是它实际上并不在DOM文档中。

.box::before{
        width: 20px;
        height: 20px;
        background-color: blue;
        /* 这样可以在.box盒子前添加一个盒子,但添加的这个盒子不会出现在DOM树中，使结构更清晰 */
    }

• CSS3过渡

transition过渡动画，使元素从一个状态过渡到另一个状态

格式 transition: 要过渡的属性  花费时间  运动曲线  何时开始；

    width: 200px;
        height: 200px;
        background-color: blue;
        transform: all 0.5s ease 0s;
    }
    .box:hover{
        width: 50px;
        height: 50px;
        background-color: red;
    }