日报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属性使用