CSS盒子定位的扩张

BoyBoy!2023-10-10 9:10

定位的扩展

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

css 复制代码

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

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

css 复制代码

.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的容器
三角形的制作

css 复制代码

<style>
        .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>
<style>
        .tudou {
            width: 0;
            height: 0;
            margin: 30px auto; 
            border: 10px solid transparent;
            border-top-color: 10px solid #000;
        }
    </style>