元素的显示与隐藏:display,visibility,overflow-精灵图-字体图标-css三角的做法-css用户界面样式-vertical-align-溢出的文字省略号显示

4.元素的显示与隐藏 本质:让一个元素在页面中隐藏或者显示出来
4.1 display属性
display:none 隐藏对象
display:block 除了转换为块级元素之外,同时还有显示元素的意思
display隐藏元素后,不再占有原来的位置
应用及其广泛,搭配JS可以做很多网页特效
4.2 visibility 可见性
visibility属性用于指定一个元素应可见还是隐藏
visibility:visible;元素可视
visibility:hidden;元素隐藏
visibility隐藏元素后,继续占有原来的位置
如果隐藏元素想要原来的位置就用visibility:hidden
如果隐藏元素不想要原来的位置,就用display:none(用处更多 重点)
4.3 overflow 溢出
overflow属性指定了如果内容溢出一个元素的框(超出其指定高度及宽度)时,会发生什么
visible 不剪切内容也不添加滚动条
hidden 不显示超过对象尺寸的内容,超出的部分隐藏掉
scroll 不管超出内容否,总是显示滚动条
auto 超出自动显示滚动条,不超出不显示滚动条
一般情况下,都不想让溢出的内容显示出来,因为溢出的部分会影响布局
但如果有定位的盒子,请慎用overflow:hidden 因为他会隐藏多余的部分

1.精灵图
1.2精灵图(sprites)的使用
使用精灵图核心:
1.2.1精灵图技术主要针对于小背景图片使用,就是把多个小背景图片整合到一张大图片中
1.2.3移动背景图片位置,此时可以使用background-position
1.2.4移动的距离就是这个目标图片的x和y坐标,网页中的坐标有所不同
1.2.5因为一般情况下都是往上往左移动,所以数值是负值
1.2.6使用精灵图的时候需要精确测量,每个小背景图片的大小和位置

2.字体图标
icomoon字库 http://icomoon.io
阿里icomoon字库 http://www.iconfont.cn/

3.css三角的做法
width: 0;
height: 0;
border: 50px solid transparent;
border-right-color: red;
margin: 100px auto;

4.css用户界面样式
4.1鼠标样式 cursor
li {cursor:pointer}
属性值 描述
default 小白默认
pointer 小手
move 移动
text 文本
not-allowed 禁止
4.2轮廓线 outline
给表单添加outline:0;或者outline:none;样式之后,就可以去掉默认的蓝色边框
input{outline:none;}
4.3防止拖拽文本域resize
实际开发中,我们文本域右下角是不可以拖拽的
textarea{resize:none;}

5.vertical-align 属性应用
css的vertical-align属性使用场景:经常用于设置图片或者表单(行内块元素)和文字垂直对齐
官方解释:用于设置一个元素的垂直对齐方式,但是他只针对于行内元素或者行内块元素有效
语法:
vertical-align : baseline | top | middle | bottom
值 描述
baseline 默认,元素放置在父元素的基线上 基线
top 把元素的顶端与行中最高元素的顶端对齐 顶线
middle 把此元素放置在父元素的中部 中线
bottom 把元素的顶端与行中最低的元素的顶端对齐 底线
5.2 解决图片底部默认空白缝隙问题
bug:图片底侧会有一个空白缝隙,原因是行内块元素会和文字的基线对齐
解决方法有两种:
1.给图片添加vertical-align:middle|top|bottom等
2.把图片转换为块级元素 display:block
6. 溢出的文字省略号显示
1.单行文本溢出显示省略号–必须满足三个条件
1.先强制一行内显示文本
white-space:nowrap;(默认 normal 自动换行)
2.超出的部分隐藏
overflow:hidden;
3.文字用省略号代替超出的部分
text-overflow:ellipsis;