20.12.18

display 显示与隐藏

让元素消失

display:none

让元素显示

display:其它样式

例子

• 绘制两个块
• 让第一个块display none
• 关注效果

关注一下源码
关注下隐藏的是否有位置

能见度 visibility

用法

手册

隐藏与显示

隐藏

visibility:hidden

显示

visibility:visible

例子

与display:none的区别

• 我还在这里，只不过你看不见
• display:none消失了，你看不见我，因为我真的不在这里

什么是元素的显示与隐藏

https://www.jd.com/

显示与隐藏小结

演练 土豆网的视频播放按钮

目标

溢出 overflow

用法

例子

垂直对齐

vertical

关于一行中的各种线

对齐模式的影响

这个属性应用于img标签上

例子

练一练

图文素材

克林的必杀技：元气斩

效果

让图片与文字位于中线对齐

防止文本域拖拽

情况

默认的文本域是可以拖拽的

如果用户进行拖拽操作

容易破坏我们的页面结构

解决

轮廓线

默认的input type=text

它具有outline，不好看

一般情况下，我们会把它去掉

取消后

一般情况下，我们不需要轮廓线，所以在初始化样式时一般会

去除图片底侧空白

现象

在一个盒子中插入了图片后

图片与盒子实际上是有一个空隙的

例如

原因

解决办法

方案一

只要不让图片与基线对齐即可

方案二

让图片变成块级元素

vertical-align对块级元素无效

设置了图 片为块级元素

图片就不受这个样式属性的影响了

鼠标样式

例子

应用

淘宝轮播图的小点，做成小手效果

溢出文字省略号显示

效果

制作步骤

？为什么需要强制一行显示

如果你不强制，文字大于宽度时就自动换行了

white-space

使用 white-space 属性

使用 nowrap 强制一行

text-overflow

使用 ellipsis 实现省略号

语音：依利普si死

用户界面小结