html和css(8)
第八天笔记
学习目标
- 元素的显示隐藏
- overflow
- vertical-align
- 精灵图
- 字体图标
- 滑动门
- 其他属性
元素的显示和隐藏
将元素的显示模式设置成none即可让元素隐藏
display的值为none的时候，元素完全隐藏
display的值为block的时候，元素呈块级显示
display的值为inline的时候，元素呈行内显示
display为none隐藏时候是不占位置的
实际工作中用的较多
visibility 控制元素的显示和隐藏
visibility的值选择
hidden 占位置隐藏
visible 显示
实际工作中用的较少
overflow
控制元素溢出之后的显示方式
取值：
visible 直接显示
hidden 超出的部分隐藏掉
auto 如果超出，自动产生滚动条，如果不超出，不产生
scroll 不管有没有超出，都有滚动条控件
overflow-x:hidden;
overflow-y:hidden;
BFC
块状格式上下文 产生BFC之后，盒子内部的空间与外部完全隔离
那些可以产生BFC ?
overflow只要取值不是visible的情况下
float的值不为none的时候
display为table或者inline-block的时候
position的取值为fixed或者absolute
(课外BFC参考资料)[https://www.cnblogs.com/CafeMing/p/6252286.html]
vertical-align
控制行内块与文字的对齐方式，写在行内块元素上面
取值：
baseline 图片的基线和文字的基线保持对齐
top 图片的顶线和文字的顶线（行高的顶线）对齐
bottom 图片的底线和文字的底线（行高的底线）对齐
middle 图片的中线和文字的中线对齐
应用场景：
可以解决图片与文字排列时候底下留白的问题
（不要让图片以基线对齐即可 或者将图片转成块元素）
可以解决表单元素与文字排列不对齐的问题
（设置图片的vertical-align：middle || top || bottom）
可以设置图片（行内块）垂直居中
可以设置多行文字居中显示
如何让一个行内块在一个盒子里面水平垂直居中：
1、给父级元素设置text-align：center （水平居中）
2、给父元素设置一个等高的行高
3、给行内块元素设置vertical-align：middle；（让图片以文字的中线对齐）
如何设置多行文本水平垂直居中
1、给多行文字包裹一个盒子 给这个盒子设置成行内块
2、给父级元素添加行高，并且给行内块元素设置成vertical-align:middle;即可
3、给行内块添加行高 让其覆盖掉继承过来的行高
溢出文字以省略号的形式显示（单行）
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;
white-space: nowrap; 文字换行
精灵图（雪碧图 sprite）
概念：就是将很多的小图片 icon，都整合到一张大图上使用。
作用：减少网络请求，降低服务器压力，提高效率
原因
因为浏览器会去服务器请求页面，请求回来的页面在执行的过程里面，会不断的去
服务器请求对应的图片，当页面上的小图片过多了，那么浏览器会频繁的去服务器
发请求，这个会给服务器带来很大的压力，同时效率很慢。解决方式就是将小图片
整合到一张大图上，直接请求大图片即可，需要使用到某一张小图的时候只需要获
取这个小图在这张大图的位置即可
使用方式：
1.将需要显示的区域用切片选中，直接将切片的宽高赋值给盒子
2.直接获取切片的坐标，直接将坐标取负值赋值给background-position
字体图标
概念：将图标做成字体来是使用
作用：字体相对图片来说容量更小，同时更加利于维护和修改
使用：借助于第三方网站（iconfont.cn）找到对应的图标。下载下来，按照DEMO提示即可 （一定要注意文件的路径）
滑动门技术
要求：
1.盒子会跟随内容撑开
2.背景前后不一致
实现：
设置三个盒子，左盒子针对左背景 右盒子针对右背景 中间的盒子由内容撑开 三个盒子完成浮动
其他细节
1.cursor
pointer 小手
default 箭头
text 文本
move 移动
url(),临时替换的样式
2.outline:none;
去掉选中之后的蓝色边框
3.resize:none;
去掉文本域的自动拉伸效果
```
1.cursor
pointer 小手
default 箭头
text 文本
move 移动
url(),临时替换的样式
2.outline:none;
去掉选中之后的蓝色边框
3.resize:none;
去掉文本域的自动拉伸效果
```
