日报1218

display 显示与隐藏

display:none 隐藏对象
display:block 除块级元素以外还显示其他元素

让元素消失

display:none

让元素显示

display:其它样式

visibility

visibility:visible; 对象可视
visibility:hidden 对象隐藏
属性区别用途
display隐藏对象不保留应用及广泛
visibility隐藏对象保留使用较少
overflow只是隐藏超出大小的部分可以清除浮动 保证盒子里面的内容不会超出该盒子范围

溢出overflow

属性值描述
visible不剪切内容也不添加滚动条
hidden不显示超出对象尺寸内容超出部分隐藏
scroll不管是否超出内容都显示滚动条
auto超出内容自动显示滚动条 不超出不显示
overflow:hidden

垂直对齐 vertical

vertical-alingn:middle
模式语法
基线对齐文字和图片基线对齐vertical-alingn:baseline;
垂直居中vertical-alingn:middle;
顶部对齐vertical-alingn:top;

防止文本域拖拽

<textarea style="resize:none;"></textarea>
  • 默认的文本域是可以拖拽的如果用户进行拖拽操作容易破坏我们的页面结构
resize:none;

轮廓线

outline:outline-color ||outline-style||outline-width
<input type="text" style="outline:0;"/>

去除图片底侧空白

在一个盒子中插入了图片后图片与盒子实际上是有一个空隙的

只要不让图片与基线对齐就行

给img  vertical-align:middle|top|bottom等

让图片变成块级元素vertical-align对块级元素无效设置了图 片为块级元素图片就不受这个样式属性的影响了

给img 添加display:block;

鼠标样式

属性值描述
default默认
pointer小手
move移动
text文本
not-allowed禁止
cursor:default

溢出文字省略号显示

white-space

white-space:normal;默认处理方式
white-space:nowrap;强制在同一行内显示文本知道文本结束或遇br才换行

text-overflow

text-overflow:clip ;不显示省略号,简单的裁切
text-overflow:ellipsis:当文本溢出的时候显示省略号

一定要首先强制一行内显示在和overflow属性使用

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页