CSS盒子定位的扩张

本文介绍: background: url(图片地址) no–re pe a t -493px -378px;//这里的是向右和向下移动背景图到所要的方框中。浮动元素不会压住下面标准流的文字，而绝对定位或固定位会压住下面标准流的所有内容。除了转换为块级元素外，开可以有显示元素的意思。精灵技术为了有效的减少服务器接受和发送请求次数，提高页面的加载速度。1、将下载的图标文件夹中的fonts 文件放到制作网页的同一目录中。4、将声明的字体样式给body的容器。元素隐藏后，继续占有原来的位置。隐藏后不继续保留原有的位置。

定位的扩展

绝对定位（固定定位）会完全压住盒子
浮动元素不会压住下面标准流的文字，而绝对定位或固定位会压住下面标准流的所有内容
如果一个盒子既有向左又有向右，则执行左，同理执行上
显示隐藏
display: none；隐藏对象
display: block; 除了转换为块级元素外，开可以有显示元素的意思
隐藏后不继续保留原有的位置
vi s i bi li t 指定一个元素应可见还是隐藏
vi s i bi li t y:visible；元素可视
vi s i b i lity: h id den；元素隐藏
元素隐藏后，继续占有原来的位置

overflow: visible;将文字超出方框的文字也显示
overflow: hidden;只显示方框内的文字
overflow: scroll;溢出方框内的文字显示滚动条,不溢出也显示滚动条
overflow：auto;溢出的时候才显示滚动条

如果想图片自动和父类一样长，就这样设置

.tudou {
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 30px auto;
        }

        .tudou img {
            width: 100%;
            height: 100%;
        }

精灵技术为了有效的减少服务器接受和发送请求次数，提高页面的加载速度

background: url(图片地址) no-repeat -493px -378px;//这里的是向右和向下移动背景图到所要的方框中。

字体图标本质是文字，展示是图标
1、将下载的图标文件夹中的fonts 文件放到制作网页的同一目录中
2、将图标文件里边的style.css 声明复制到style或css 文件下
3、在body把标志性的符号复制进行引用
4、将声明的字体样式给body的容器
三角形的制作

<style&gt;
        .tudou {
            width: 0;
            height: 0;
            background-color: pink;
            /* margin: 30px auto; */
            border-top: 10px solid #000;
            border-left: 10px solid blue;
            border-bottom: 10px solid yellow;
            border-right: 10px solid pink;
        }
    </style&gt;
<style&gt;
        .tudou {
            width: 0;
            height: 0;
            margin: 30px auto; 
            border: 10px solid transparent;
            border-top-color: 10px solid #000;
        }
    </style&gt;