笔记 #CSS

CSS-三角的做法

div { width: 0; height: 0; line-height: 0; font-size: 0; border: 100px solid transparent; /* 上三角 */ ▲ border-bottom-color:

发布于 2024-05-20

笔记 #CSS

CSS-精灵图的使用

精灵技术主要针对于背景图片的使用，就是把多个小背景图片整合到一张大图中这个大图也称sprites精灵图或者雪碧图移动背景图片位置，此时可以使用 background-position 移动的距离就是这个目标图片的x和y轴，注意网页中的坐标有所不同因为一般情况下都是往上往左移动的，所以数值是负值

发布于 2024-05-20

笔记 #CSS

本质：让一个元素在页面中隐藏或者显示出来 display 显示隐藏 display: none; /* 隐藏对象 */ display: black; /* 除了转换块级元素之外，同时还有显示元素的意思 */ display隐藏元素后，不在占有原来的位置

发布于 2024-05-20

笔记 #CSS

绝对定位的盒子居中显示加了绝对定位的盒子不能通过 margin: 0 auto; 水平居中，但是可以通过以下计算方法实现水平垂直居中 left: 50%; 让盒子的左侧移动到父级元素的水平中心位置 margin-left: -100px; 让盒子向左移动自身宽度的一半（-100px是盒子自身宽度的

发布于 2024-05-20

笔记 #CSS

在使用定位布局时，可能会出现盒子重叠的情况。此时可以使用 z-index 来控制盒子的前后次序（z 轴）选择器 { z-index: 1; } 数值可以是正整数、负数或 0，默认是 auto，数值越大，盒子越靠上如果属性值相同，则按照书写顺序，后来者居上

发布于 2024-05-20

笔记 #CSS

固定定位 fixed 固定定位是元素固定于浏览器可视的区域选择器 { position: fixed; } 特点：以浏览器的可视

发布于 2024-05-20

笔记 #CSS

为什么需要定位浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子定位组成定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。定位 = 定位模式 + 边偏移

发布于 2024-05-20

笔记 #CSS

属性书写顺序 .box { /* 布局类型 */ display: block; position: relative; float: left; /* 盒子模型+背景 */

发布于 2024-05-20