菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: css技巧胡宇林11.16 [打印本页]

作者: ther12 时间: 2022-11-17 00:46
标题: css技巧胡宇林11.16

元素的显示与隐藏

display显示与隐藏（常用的隐藏元素属性）

display:block;除了转化为块元素的功能外，还能将元素给显示出来

dispaly:none;隐藏对象

dispaly来隐藏元素时，隐藏的元素不再占有原来的位置，一般会和js在一起进行搭配使用。

visibility显示隐藏

visibility:visible;元素可视

visibility:hidden;元素隐藏

用visibility隐藏元素之后，继续占有原来的位置

如果隐藏元素之后不占位置就用display，如果要占位置就用visibility。

overflow溢出的显示与隐藏

overflow:visible;不剪切内容，也不添加滚动条。

overflow:hidden;将超出盒子的内容给隐藏掉

overflow:scroll;不管盒子里的内容有没有超出盒子的范围，都显示滚动条

overflow:auto;内容超出盒子的话就显示滚动条，不超出盒子就不显示。

CSS的其他技巧

精灵图

为什么要使用精灵图

将多张小图片整合到一张大的图片中返回给浏览器，可以减少对服务的重复请求，以减轻服务器的压力

使用方法：

利用背景图片的方式来将精灵图插入

将精灵图移动到指定位置即可，利用的属性是bacground-position，一般移动的数值都是负值（X轴向右是正值，Y轴向下是正值，精灵图一般都是向上和向左进行移动，所以取负值）

鼠标样式

属性cursor

属性值

default默认的鼠标样式

pointer小手的鼠标样式

text文本鼠标样式

move拖动时的鼠标样式

not-allowed禁止鼠标样式

输入框删除外框

outline:none；

文本域取消拖拽

resize:none;

行内元素的对齐方式

属性：

vertical-align

属性值：

top顶线对齐

middle中线对齐

baseline基线对齐（默认值）

bottom底线对齐

CSS的三角制作

原理

盒子的四个边框的联结处是分别平分的样式

将盒子的宽高设置为0直接利用边框可生产四个三角形状

将边框的颜色设置为透明，需要哪个三角，单独设置哪个边框的颜色即可

CSS的省略号制作

步骤：

1、让文字一行显示

2、将多余的文字隐藏掉

3、将隐藏的文字用省略号代替

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)