css学习笔记3（技巧）

最新推荐文章于 2024-08-17 22:24:13 发布

仔仔有点困

最新推荐文章于 2024-08-17 22:24:13 发布

阅读量127

点赞数

文章标签： css 学习前端

本文链接：https://blog.csdn.net/weixin_63010951/article/details/125998635

版权

一、精灵图

为减少服务器接收和发送请求次数，提高页面加载速度，出现css精灵技术（CSS Sprites、css雪碧）

核心原理：将网页中一些小背景图整合到一张大图中，使得服务器只需请求一次即可。

使用核心：

1、主要用于背景图，多个小背景图整合到一张大图，这个大图称为sprites 精灵图雪碧图

2、移动背景图片位置用background-position，移动距离为目标图片的x、y坐标

3、一般都是往上往左移，所以数值是负值

4、要精确测量每个小背景图大小及位置

使用方法：

1、不要移动图片位置，切片工具框起来所需小图片，可得大小位置数据（ps可用矩形工具看属性）

2、建立和所需小图片一样大的盒子，加背景background：url（路径）；

3、移动精灵图background-position：-180px 0；

【可连写background：url（路径） no-repeat -180px 0；】

二、css三角

1、常见

常见的小三角（一些弹窗盒子会多一个小三角）用css就可实现

原理：

 .box1 {
            width: 0;
            height: 0;
            border-top: 10px solid red;
            border-right: 10px solid yellow;
            border-bottom: 10px solid blue;
            border-left: 10px solid green;
        }

 .box1 {
            width: 0;
            height: 0;
            line-height: 0;    /*为了提高兼容性，可以不需要*/
            font-size: 0；     /*为了提高兼容性，可以不需要*/
            border: 10px solid transparent;
            border-left: 10px solid green;
        }

2、强化（实心三角）

直角三角形

调整边宽，该长的长该0的0再改透明色，得到

 .box2 {
            width: 0;
            height: 0;
            border-color: transparent red transparent transparent;
            border-style: solid;
            border-width: 20px 10px 0 0;
        }

红盒子里要包一个i盒子做三角，子绝父相移位置

3、强化（线形三角）

写出两条边然后旋转。

        div {
            position: relative;
            width: 250px;
            height: 35px;
            border: 1px solid black;
        }
        
        div::after {
            content: "";
            position: absolute;
            top: 9px;
            right: 15px;
            width: 10px;
            height: 10px;
            border-right: 1px solid black;
            border-bottom: 1px solid black;
            transform: rotate(45deg);
        }

三、css用户界面样式

1、鼠标样式cursor

属性值

default  默认
pointer  小手
move    移动
text 文本
not-allowed 禁止

2、取消表单轮廓线outline

给表单添加outline：0；或outline：none；，可去掉默认蓝色边框（点击输入，边框会变成蓝色）

3、防止拖拽文本域resize

为实现文本域右下角不可以拖拽用textarea{ resize： none；}

四、vertical-align属性

1、行内块和文字垂直居中对齐

用于设置图片或表单和文字垂直对齐，只针对行内元素或行内块元素有效

vertical-align ：baseline / top / middle / bottom

属性值：
baseline 默认，元素放在父元素基线上（a的底端）
top 把元素顶端与行中最高元素的顶端对齐
middle 把此元素放在父元素中部
bottom 把元素顶端与行中最低元素的顶端对齐（j的底端）

2、解决图片底部默认空白缝隙问题

图片和基线对齐，不是底线，所以会有缝隙

解决方法（两种）：

①给图片加vertical-align：bottom / top / middle；（推荐）

②把图片转化为块元素display：block；

五、溢出文字省略号显示

1、单行文本溢出显示省略号

white-space:nowrap; （强制一行内显示文本，不换行）
overfloe:hidden; （超出部分隐藏）
text-overflow:ellipsis; （文字用省略号替代超出部分）

2、多行文本溢出显示省略号

有较大兼容性问题，适合webKit浏览器或移动端（移动端大部分是webKit内核）一般交给后台人做

overflow：hidden；
text-overflow：ellipsis；
display：-webkit-box；/*弹性伸缩盒子模型显示*/
-webkit-line-clamp：2；/*限制在一个块元素显示的文本的行数*/
-webkit-box-orient：vertical；/*设置或检索伸缩盒子的子元素的排列方式*/