关于CSS的技巧

偶尔善良 提交于 2020-03-06 03:44:54

在这里插入图片描述

display显示与隐藏

隐藏:display: none;
显示:display:block;
特性:隐藏之后,不再保留位置(后者可以占据其位置)
在这里插入图片描述

visibility

visibility:visible;对象可见
visibility:hidden;对象隐藏
在这里插入图片描述

overflow英藏

overflow默认是visible,是没有隐藏的。
通过overflow:hidden隐藏超出的部分

总结

display:后面使用较多,可以下拉菜单。而且是不保留位置的
visibility:保留位置,使用较少
overflow:隐藏超出大小的部分,可以清除float。
在这里插入图片描述

鼠标样式

我们可以通过cursor来更改鼠标样式;
在这里插入图片描述
其中move指的是:

在这里插入图片描述

取消轮廓线:outline:none;
取消文本域拖拽:resize:none;

文字和图片垂直居中对齐:vertical-align:middle;
在这里插入图片描述

让盒子文字不溢出三部曲:

  1. 先强制一行内显示文本:white-space:nowrap;
  2. 超出部分隐藏:overflow:hidden;
  3. 文字超出部分用省略号代替超出部分text-overflow:elli psis;
    在这里插入图片描述
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!