CSS（定位，精灵图，字体图标，画三角，界面样式，布局技巧）

最新推荐文章于 2025-03-21 00:44:33 发布

原创最新推荐文章于 2025-03-21 00:44:33 发布 · 415 阅读

CC 4.0 BY-SA版权

本文详细介绍了CSS中的定位模式，包括static、relative、absolute、fixed和sticky，以及它们的特点和应用场景。重点讨论了绝对定位的子绝父相原则和水平居中技巧。此外，还提到了浮动与定位的区别，以及元素的显示与隐藏方法。同时，文章涵盖了精灵图、字体图标、CSS画三角等实用技巧，并分享了界面样式的调整方法，如鼠标样式、表单元素处理和文本溢出处理。最后，文章列举了一些布局小窍门，如消除边框重叠、层级控制和居中方法。

定位

1. 定位 = 定位模式 + 边偏移
2. position：模式 4种
3. 边偏移（top,bottom,left,right）单位：像素

static

1. 默认的定位方式
2. 没有边偏移
3. 安装标准流摆放位置

相对定位relative

定义：相对于原来的位置进行偏移
特点：不脱标，原来的位置不会消失，继续保留
用途：一般用作 absolute 的爹

绝对定位absolute

定义：相对于父元素进行偏移
1. 如果没有定位父元素，以浏览器为准进行偏移
2. 如果有定位父元素，以定位父元素进行偏移
3. 绝对定位不在占有原来的位置
进行水平居中：
	1. 先移动父容器宽度的一半 left：50%
	2. 再移动自己宽度的一半 margin -left: -自己盒子宽度的一半

子绝父相

定义：子级使用绝对定位，父级则需要相对定位

固定定位 fixed

定义：浏览器在滚动页面的时候不会进行改变
1. 以浏览器的可视窗口来进行定位
2. 固定定位不占有原来的位置

粘性定位 sticky

定义：被认为是相对定位和固定定位的混合
1. 以浏览器的可视化窗口来进行定位（固定定位特点）
2. 粘性定位占有原先的位置
3. 必须添加（上，下，左，右）中的一个才能使用

定位的特殊性

1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度
2. 块级元素添加绝对或者固定定位，如果不给宽度和高度，默认大小是内容的大小
3. 脱标的盒子不会触发外边距合并的问题

浮动与定位的不同

1. 浮动的元素不会压住标准流的文字，
2. 定位的元素会压住标准流所有的内容

元素的显示与隐藏

1. display : none; 隐藏元素 
    特点：不仅隐藏元素，而且不在占有原来的位置
2. display: block; 显示元素

3. visiblility: hidden; 元素隐藏
    特点：不仅隐藏元素，而且继续占有原来的位置
4. visiblility: inherit; 元素可视

5. overflow ：hidden；元素隐藏
6. overflow ：scroll；溢出的部分显示滚动条（不超出也显示滚动条）
7. overflow  : auto;  溢出的部分显示滚动条(超出部分显示滚动条)

精灵图（sprite）

目的：减少请求和响应，减少服务器的压力
什么是精灵图：多个小图片组成的大图片
使用：通过background-position来实现

字体图标（iconfont）

展示的是图标，具有文字的属性
下载网站：iconfont.cn

css画三角

1. 一个盒子，宽高为0
2. 设置其边框的粗细，通过改变上下左右的透明度来改变箭头所指的方向

div {
            width: 0;
            height: 0;
            border-top: 10px solid pink;
            border-bottom: 10px solid red;
            border-left: 10px solid yellow;
            border-right: 10px solid greenyellow;
        }
        <div></div>

界面样式

 1. 更改用户鼠标样式
    coursor：属性
 2. 去除表单默认轮廓线样式
     outline： none    
 3. 去除文本域的拖拽效果
     resize：none
 4.  设置图片或者表单（行内块元素）和文字垂直对齐
     vertical-align：属性  
 5. 图片底部侧有一个默认空白缝隙的解决方案
     * 使用 vertical-align:  属性
     * 将图片转换成块级元素：display：block    
 6. 单行溢出的文字使用省略号来代替
	 * white-space: nowrap  //强制一行内显示
	 * overflow：hidden //溢出部分隐藏起来
	 * text-overflow：ellipsis //文字溢出的部分用省略号来显示
 7. 多行溢出的文字使用省略号来代替
     * overflow: hidden;
     * text-overflow: ellipsis;
     * display: -webkit-box; //弹性盒模型显示
     * -webkit-line-clamp：2；//限制在一个块元素显示的文本行数
     * -webkit-box-orient：vertical；//设置子元素的排列方式，如：垂直居中

布局技巧

1. 通过 margin-left: -1px 来取消因为两个边框重叠的情况
2. 通过相对定位和z-index 来改变盒子的层级，用于实现突出的效果
3. 通过text-align：center 行内块元素的水平居中
4. css的初始化