关于css碎知识点（3）

16.HTML元素的定位：

   (1)定位的组成：定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。定位=定位模式+边偏移。定位模式用于指定某一个元素在文档中的定位方式。

   (2)定位模式：定位模式决定元素的定位方式，它通过css的position属性来设置的，属性值：static静态定位，relative相对定位，absolute绝对定位，fixed固定定位,sticky粘性定位。

   1.relative相对定位：是元素在移动位置的时候，是相对于它原来的位置来说的，原来的标准流位置还继续占有，后面的盒子仍然以标准流的方式对待它（不脱标）。

   2.absolute绝对定位：绝对定位是元素在移动的时候，是相对于它祖先元素来说的，如果没有祖先元素或者祖先元素没有定位属性，则以浏览器为准进行定位。如果祖先有定位，则以最近一级有定位的祖先元素为参考点进行相对移动。绝对定位脱标。子级是绝对定位的话，父级要用相对定位。

   3.fixed固定定位：固定定位是元素固定在浏览器的某个可视区的位置。特点：（1）以浏览器的可视窗口为参考点移动元素（2）跟父元素没有任何关系（3）不跟随鼠标的滚动而滚动（4）固定定位不占有原先的位置（5）也是脱离标准流的;

   4.sicky粘性定位：当一个盒子设置为粘性定定位的时候，top属性设置为20px，，而且这个父元素是浏览器，当这个盒子margin-top为20px的时候会跟随浏览器进行向下滚动，而且位置不变。例如：

body{

            height: 5000px;

        }

.one{

            position: sticky;

            top: 20px;

            width: 300px;

            height: 200px;

            margin: 100px auto;

            background-color: blue;

}

效果图：

   (3)边偏移：定位的盒子移动到最终位置，position有top，left，right，bottom四个属性。如果一个盒子既有左属性还有右属性，则先执行左属性。

16.HTML元素定位的拓展：

(1)利用绝对定位使元素水平居中：例如：

.one{

            position: absolute;

            left: 50%;

            top: 50%;

            margin-top: -100px;

            margin-left: -100px;

            width: 200px;

            height: 200px;

            background-color: brown;

   }

效果图：

   (2)浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字和图片。浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。但是绝对定位（固定定位）会压住下面标准流多有的内容。

   (3)在使用定位布局时，会出现重叠的情况，此时用z-index来控制盒子的前后顺序。Z-index属性值为数字，数字越大被定为的盒子最先显示。只有定位得到盒子有此属性。

   (4)使用固定定位拓展：

.one{

            margin: 0 auto;

            width: 1000px;

            height: 2000px;

            background-color: aqua;

        }

.two{

            position: fixed;

            left: 50%;

            top: 500px;

            margin-left: 500px;

            width: 50px;

            height: 50px;

            background-color: blue;

        }

效果图：

蓝色的盒子会固定在那个位置，不会跟着页面的滑轮而改变。

17.精灵图的使用：精灵图的目的：为了减少服务器接收和发送请求的次数，提高页面的加载速度。主要核心：

   (1)精灵图的主要针对于背景图片的使用，就是把多个小背景图整合到一张大图片中。

   (2)这个图片页称为sprites。

   (3)移动背景图片位置，此时可以使用background-position属性进行调试。

   (4)移动的距离就是这个目标图片的x，y的坐标。

例如：

.one{

            width: 85px;

            height: 89px;

            background: url(222.png) no-repeat -22px -400px;

        }

.two{

            width: 85px;

            height: 89px;

            background: no-repeat url(222.png) -239px -400px;

        }

222.png图片为：

代码的效果图为：

17.HTML元素显示隐藏功能：本质：让一个元素在页面中吟唱或者显示出来。

显示隐藏有三种方法：分别是1。添加display属性进行显示隐藏。2.添加visibility属性进行显示隐藏。3.添加overflow属性进行溢出隐藏。

   (1)display属性：常见的属性值分别为：none隐藏对象，block显示元素。display隐藏元素以后，不在占有原来的位置。

   (2)visibility属性：常见的属性值分别为：hidden隐藏元素，visible显示元素。

   (3)overflow属性：常见的属性值为：scroll不溢出就可以在盒子里边显示滚动条，hidden溢出的时候显示滚动条。

18.css三角形的做法：例如：

 .one{

            width: 0px;

            height: 0px;

            border:transparent 50px solid;

            border-top-color: tomato;

        }

效果图：

会持续更新的！！！！！