CSS(4)---补充知识
这里写自定义目录标题
- 1. 元素的显示与隐藏
- 1.1 display显示隐藏
- 1.2 visibility显示隐藏
- 1.3 overflow溢出显示隐藏
- 1.4 案例
- 2. 精灵图
- 3. 字体图标
- 4. CSS三角
- 5.CSS用户界面样式
- 6.vertical-align属性应用
- 7.溢出的文字省略号显示
- 8.常见布局技巧
1. 元素的显示与隐藏
类似于网页广告,当我们点击关闭就不见了,但是刷新页面会重新出现
本质:让一个元素在页面中隐藏或者显示出来
1.1 display显示隐藏
display属性用于设置一个元素应如何显示
属性值 | 作用 |
---|---|
display: none | 隐藏对象 |
display:blick | 除了转换为块级元素外,同时还有显示元素的意思 |
- display隐藏元素后,不再占有原来的位置
1.2 visibility显示隐藏
visibility属性用于指定一个元素应可见还是隐藏
属性值 | 作用 |
---|---|
visibility:visible | 元素可视 |
visibility:hidden | 元素隐藏 |
- visibility隐藏元素后,继续占有原来的位置
1.3 overflow溢出显示隐藏
overflow属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度)时,会发生什么
一般情况下,我们都不想让溢出的内容显示出来,因为溢出的部分会影响布局;但是如果有定位的盒子,请慎用overflow:hidden,因为它会影响多余的部分
属性值 | 作用 |
---|---|
visible | 不剪切内容,不添加滚动条 |
hidden | 不显示超过对象尺寸的内容,超出的部分隐藏 |
scroll | 不管超出内容与否,总是显示滚动条 |
auto | 超出自动显示滚动条,不超出不显示滚动条 |
1.4 案例
总结:
- display显示隐藏元素,但是不保留位置
- visibility显示隐藏元素,但是保留原来位置
- overflow溢出显示隐藏,但是只会对于溢出的部分处理
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.tudou {position: relative;width: 444px;height: 320px;margin: 30px auto;}.tudou img {width: 100%;height: 100%;}.mask {display: none;position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.3) url(images/th.jpg) no-repeat center;}.tudou:hover .mask {display: block;}</style></head><body><div class="tudou"><div class="mask"></div><img src="images/img.jpg" /></div></body>
</html>
效果如下:
2. 精灵图
一个网页中往往会应用很多小的背景图像作为装饰,当网页中的图像过多时,服务器就会频繁的接受和发送请求图片,造成服务器请求压力较大,这将大大降低页面的加载速度,因此,为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS Sprites、 CSS雪碧)
核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要请求一次就可以了
使用精灵图核心:
- 精灵技术主要针对与图片背景使用。就是把多个小背景图片整合到一张大图片中
- 这个大图片也称为sprites 精灵图 或者 雪碧图
- 移动背景图片位置,此时可以使用background-position
- 一般情况下精灵图都是负值
缺点:
- 图片文件比较大
- 图片本身放大或者缩小会失真
- 一旦图片制作完毕,想要更换非常复杂
3. 字体图标
使用场景: 主要用于显示网页中通用、常用的一些小图标
字体图标iconfont可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体
- 优点:
- 轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,减少了服务器请求
- 灵活性:本质其实是文字,可以很随意的更改颜色、产生阴影、透明效果、旋转等
- 兼容性:几乎支持所有的浏览器,可放心使用
- 注:文字图标不能代替精灵技术,只是对工作中图标部分技术的提升和优化
- 总结:
- 如果遇到一些结构和样式比较简单的小图标,就用字体图标
- 如果遇到一些结构和样式比较复杂的小图片,就用精灵图
- 使用:
- 字体图标的下载
- icomoon字库http://icomoon.io
- 阿里iconfont字库http://www.iconfont.cn
- 字体图标的引用(引入到我们的HTML页面中)
- (下载完毕之后,注意原先的文件不要删,后面会用)
- 把下载包里的fonts文件夹放入页面根目录下
- 在CSS样式中全局声明字体:简单理解为把这些字体通过CSS引入到页面中(一定注意字体文件路径的问题)
- 字体图标的追加(以后添加新的小图标)
- 如果工作中,原来的字体图标不够用了,我们需要添加新的字体图标到原来的字体文件中
- 把压缩包里的salection.json重新上传,然后选中自己想要的新的图标,重新下载压缩包,并替换原来的文件即可
- 字体图标的下载
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?p4ssmb');src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype');url('fonts/icomoon.ttf?p4ssmb') format('turetype');url('fonts/icomoon.woff?p4ssmb') format('woff');url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}span {font-family: 'icomoon';font-size: 100px;color: red;}</style>
</head>
<body><span>[]</span>
</body>
</html>
效果如下:
4. CSS三角
网页中常见一些三角形,使用CSS直接画出来就可以,不必做成图片或者字体图标
div {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 100px solid transparent;
border-left-color: red;
}
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box1 {width: 0;height: 0;border-left: 100px solid green;border-right: 100px solid red;border-top: 100px solid blue;border-bottom: 100px solid pink;}.box2 {width: 0;height: 0;border: 100px solid transparent;border-left-color: red;}</style></head><body><div class="box1"></div><div class="box2"></div></body>
</html>
效果如下:
5.CSS用户界面样式
所谓的界面样式,就是更改一些用户操作样式,以便提高更好点用户体验
- 更改用户的鼠标样式:设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
li { cursor : pointer : }
属性值 | 描述 |
---|---|
default | 小白(默认) |
pointer | 小手 |
move | 移动 |
text | 文本 |
not-allowed | 禁止 |
- 表单轮廓:给表单添加outline: 0; 或者outline: none; 样式之后,就可以去掉默认的边框
input { outline : none : }
- 防止文本域拖拽:实际开发中,我们文本域右下角是不可以拖拽的
textarea { resize: none; }
6.vertical-align属性应用
CSS的vertical-align属性使用场景:经常用于设置图片或者表单(行内块元素)和文字垂直对齐;用于设置一个元素的垂直对齐方式,但是它只针对行内元素或者行内块元素有效
vertical-align : baseline | top | middle | bottom
值 | 描述 |
---|---|
baseline | 元素放置在父元素的基线上(默认) |
top | 把元素的顶端与行中最高元素的顶端对齐 |
middle | 把此元素放置在父元素的中部 |
bottom | 把元素的顶端与行中最低的元素的顶端对齐 |
- 图片、表单、文字对齐:图片、表单属于行内块元素,默认的vertical-align是基线对齐。此时可以给图片、表单这些行内块元素的vertical-align属性设置为middle就可以让文字和图片垂直居中对齐了
- 解决图片底部默认空白缝隙问题:原因是行内块元素会和文字的基线对齐。解决方法:
- 给图片添加vertical-align:middle | top |bottom等(提倡使用)
- 把图片转换为块级元素 display:block;
7.溢出的文字省略号显示
- 单行文本溢出显示省略号–必须满足三个条件
/* 1. 先强制一行内显示文本 */
white-space: nowrap;
/* (默认Normal自动换行) */
/* 2. 超出的部分隐藏 */
overflow: hidden;
/* 3. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;
- 多行文本溢出显示省略号:多行文本溢出显示省略号,有较大兼容性问题,适合于webKit浏览器或者移动端(移动端大部分是webKit内核)
更推荐让后台人员来做这个效果,因为后台人员可以设置显示多少个字,操作更简单
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
8.常见布局技巧
- margin负值的运用
- 让每个盒子margin往左侧移动-1px正好压住相邻的盒子边缘
- 鼠标经过某个盒子的时候,提高当前的层级即可(如果没有定位,则加相对定位/保留位置,如果有定位,则加z-index)
- 文字围绕浮动元素
- 行内块的巧妙运用
- CSS三角强化
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0;
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box1 {width: 0;height: 0;border-top: 100px solid transparent;border-right: 50px solid blue;border-bottom: 0px solid red;border-left: 0px solid green;}</style></head><body><div class="box1"></div></body>
</html>
效果如下:
CSS(4)---补充知识相关推荐
- 【总结】IE6,IE7,IE8,Firefox兼容的css hack 补充!
IE6,IE7,IE8,Firefox兼容的css hack 补充: .color{ background-color: #CC00FF; /*所有浏览器都会显示为紫色*/ background-co ...
- 案例:图书管理——补充知识(数组相关API)||补充知识(数组响应式变化)
案例:图书管理 Vue数组操作 1.变异方法:会影响数组的原始数据的变化. 2.替换数组:不会影响原始的数组数据,而是形成一个新的数组. <!DOCTYPE html> <html ...
- 面向对象 - 1.面向过程/2.面向对象/3.如何使用类/4.__init__方法/5.属性查找/6.补充知识/7.可扩展性高...
编程范式(流派): 面向对象编程,面向过程编程 各有用处!! 编程:语法+数据结构(list dict)+算法(逻辑)-----------------------------------1.面向过程 ...
- html+css+dom补充
补充1:页面布局 一般像京东主页左侧右侧都留有空白,用margin:0 auto居中,一般.w. <!DOCTYPE html> <html lang="en"& ...
- 96-Java的打印流、打印流重定向、补充知识:Properties、commons-io框架
一.打印流 作用:打印流可以实现方便.高效的打印数据到文件中. 打印流一般是指:PrintStream.PrintWriter 两个类. 可以实现打印什么数据就是什么数据 例如:打印整数97写出去就是 ...
- 【机器学习|数学基础】Mathematics for Machine Learning系列之矩阵理论(25):幂级数(补充知识)
目录 前言 往期文章 幂级数 一.函数项级数的概念 定义:(函数项)无穷级数 幂级数及其收敛性 幂级数 定理1(阿贝尔定理) 推论 定理2 结语 前言 Hello!小伙伴! 非常感谢您阅读海轰的文章, ...
- HTML-CSS_Day_1:CSS要点补充说明、项目演练
一.CSS要点补充说明 1.margin:0 auto:自适应页面两边宽度 2.inlineinine-block都是文本类元素 3.position:absolutefloat:left/right ...
- 【机器学习|数学基础】Mathematics for Machine Learning系列之矩阵理论(23):常数项级数的概念和性质(补充知识)
目录 前言 往期文章 常数项级数的概念和性质 一.常数项级数的概念 常数项无穷级数 定义:收敛与发散 例题 二.收敛级数的基本性质 性质1 性质2 性质3 性质4 性质5(级数收敛的必要条件) 三.柯 ...
- .onkeypress和.onkeydown的含义 以及补充知识document.onkeypress的含义
<!DOCTYPE HTML> <html lang = 'en'><head><meta charset = 'UTF-8'/><title&g ...
- 陈宝林《最优化理论与算法》超详细学习笔记 (二)————补充知识(凸集) 第二章 线性规划的基本性质
陈宝林<最优化理论与算法>超详细学习笔记 (二)----补充知识 凸集 & 第二章 线性规划的基本性质 补充知识 凸集 方向与极方向 表示定理 择一定理 第一章 线性规划的基本性质 ...
最新文章
- 【转载】WinCE OAL架构分析
- Python中相见恨晚的技巧(记得收藏)
- suzhou jinjihu lake half round marathon
- python文件解除占用_如何使用Python解锁锁定的文件和文件夹(mac)
- 阿里云mysql服务器太贵_阿里云数据库,跟自己在服务器安装的有什么区别?有人说安装很简单,那为什么要花钱买?...
- JAVA-基础(查找文件夹内文件)
- [动态代理三部曲:下] - 从动态代理,看Retrofit的源码实现
- 什么叫轻量瓷_为什么说陶瓷是华夏文明的徽章?
- java finally在return_Java finally语句到底是在return之前还是之后执行?
- Mybatis SQL 语句中 IF函数不支持
- 《zw版·Halcon-delphi系列原创教程》halconxlib控件列表
- 【Computer Organization笔记28】总复习
- try catch finally return的执行顺序与返回值探究
- Rhythmk 学习 Hibernate 03 - Hibernate 之 延时加载 以及 ID 生成策略
- ES6读书笔记(一)
- Linux | 如何通过Xshell上传文件到Linux
- ubuntu安装配置NFS
- 小红书流量怎么提升?小红书流量不好是什么原因导致?
- Ant Design Table columns 参数配置隐藏列方法
- 【软件测试】稳定性和可靠性测试在软件开发中的重要性