html和css的一些进阶技巧总结

可见性与溢出的设置

html和css的一些进阶技巧总结_第1张图片

  1. display 的可见性设置

    display:none(不显示)
    display:block (以块显示)
    一般常用于hover事件,来设计悬浮框和下拉菜单

  2. visibility 的可见性设置
    和display的用法基本类似,不过以这种方法实现隐藏的元素依然可以占位置。上面的display并不会,它是完全消失的。图片中的关于visibility的特点说法打错了。

    很典型的就是我们在网站上见到的小广告,点×会消失,一刷新就又出来了hh

  3. overflow对溢出的处理
    一般是指文字过多,给的框太小,撑不下。用法如图

CSS鼠标样式cursor设置

html和css的一些进阶技巧总结_第2张图片

轮廓outline与文本域textarea

html和css的一些进阶技巧总结_第3张图片
这两个一般我们会设置在默认设置里面

图片的缝隙清除

html和css的一些进阶技巧总结_第4张图片
一般有两种方法:
1.如上图,避免选择基线baseline对准,利用vertical-center调整
2.将img元素设置成block样式

文字隐藏方法

html和css的一些进阶技巧总结_第5张图片

你可能感兴趣的:(前端,html,css)