css-使用技巧

傷城~ 2022-02-23 09:50 364阅读 0赞

# css-高级技巧 #

## 1. 元素的显示与隐藏 ##

1.  display 显示（重点）  
    \- display 设置或检索对象是否及如何显示。  
    display: none 隐藏对象  
    display：block 除了转换为块级元素之外，同时还有显示元素的意思。  
    \- 特点： 隐藏之后，不再保留位置。
2.  visibility 可见性 (了解)  
    \- 设置或检索是否显示对象。  
    visibility：visible ; 　对象可视  
    visibility：hidden; 　 对象隐藏  
    \- 特点： 隐藏之后，继续保留原有位置。（停职留薪）
3.  overflow 溢出部分隐藏  
    \- 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。  
    属性值 描述  
    visible 不剪切内容也不添加滚动条  
    hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉  
    auto 超出自动显示滚动条，不超出不显示滚动条  
    scroll 不管超出内容否，总是显示滚动条
4.  显示与隐藏总结

## 2. CSS用户界面样式 ##

1.  鼠标样式 cursor
2.  轮廓线 outline  
    是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。  
    outline : outline-color ||outline-style || outline-width  
    但是我们都不关心可以设置多少，我们平时都是去掉的。 li  
    去除轮廓线的写法  
    outline: 0;  
    outline: none;  
    outline-style:none;
3.  防止拖拽文本域resize  
    提示内容
4.  用户界面样式总结

## 3. vertical-align 垂直对齐 ##

1.  图片、表单和文字对齐  
    vertical-align：middle;
2.  去除图片底侧空白缝隙，  
    就是图片底侧会有一个空白缝隙。  
    \- 原因：  
    图片或者表单等行内块元素，他的底线会和父级盒子的基线baseline对齐。  
    \- 解决的方法就是：  
    给img图片vertical-align: top |middle | bottom等等。 让图片不要和基线对齐。  
    常用  
    vertical-align: top

## 4. 溢出的文字省略号显示 ##

1.  white-space  
    white-space:normal ；默认处理方式  
    white-space:nowrap ；　强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。
2.  text-overflow 文字溢出  
    设置或检索是否使用一个省略标记（…）标示对象内文本的溢出  
    text-overflow : clip ；不显示省略标记（…），而是简单的裁切  
    text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（…）  
    注意：  
    一定要首先强制一行内显示，再次和overflow属性 搭配使用
3.  总结三步曲  
    /*1. 先强制一行内显示文本*/  
    white-space: nowrap;  
    /*2. 超出的部分隐藏*/  
    overflow: hidden;  
    /*3. 文字用省略号替代超出的部分*/  
    text-overflow: ellipsis;

## 5. CSS精灵技术（sprite) 重点 ##

1.  为什么需要精灵技术  
    为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。
2.  精灵技术讲解
3.  精灵技术使用的核心总结  
    首先我们知道，css精灵技术主要针对于背景图片，插入的图片img 是不需要这个技术的。  
    1. 精确测量，每个小背景图片的大小和 位置。  
    2. 给盒子指定小背景图片时， 背景定位基本都是 负值。
4.  制作精灵图(了解)

## 6. 滑动门 ##

1.  滑动门出现的背景
2.  核心技术  
    核心技术就是利用CSS精灵（主要是背景位置）和 盒子padding撑开宽度, 以便能适应不同字数的导航栏。  
    因为整个导航栏都是 链接 所以 a 要包含 span  
    a 是 设置 左侧 背景 （左门）  
    span 是设置 右侧 背景 （右门）

## 7. 拓展@ ##

1.  margin负值之美  
    负边距+定位：水平垂直居中  
    应用场景：相邻的盒子，共用边框
2.  CSS三角形之美  
    1. 我们用css 边框可以模拟三角效果  
    2. 盒子的宽度高度为0  
    3. 我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了  
    4. 为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;