咸鱼前端—CSS高级技巧

鼠标样式cursor
轮廓 outline
防止拖拽文本域resize
垂直对齐 vertical-align
溢出的文字隐藏

鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

cursor :  default  小白 | pointer  小手  | move  移动  |  text  文本

鼠标放我身上查看效果哦：

<ul><li style="cursor:default">我是白</li><li style="cursor:pointer">我是手</li><li style="cursor:move">我是动</li><li style="cursor:text">我是文本</li>
</ul>

尽量不要用hand 因为火狐不支持 pointer ie6以上都支持的尽量用

轮廓 outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

 outline : outline-color ||outline-style || outline-width

但是我们都不关心可以设置多少，我们平时都是去掉的。

最直接的写法是： outline: 0; 或者 outline: none;

 <input  type="text"  style="outline: 0;"/>

防止拖拽文本域resize

resize：none 这个单词可以防止火狐谷歌等浏览器随意的拖动文本域。

右下角可以拖拽：

右下角不可以拖拽：

<textarea  style="resize: none;"></textarea>

垂直对齐 vertical-align

vertical-align : baseline |top |middle |bottom

注意：工作中 vertical-align：middle 用的比较多

溢出的文字隐藏

word-break:自动换行

值	描述
normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

主要处理英文单词

white-space
white-space 设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容

值	描述
normal	默认处理方式
nowrap	强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

可以处理中文

text-overflow 文字溢出

设置或检索是否使用一个省略标记（…）标示对象内文本的溢出

值	描述
clip	不显示省略标记（…），而是简单的裁切
ellipsis	当对象内文本溢出时显示省略标记（…）

注意一定要首先强制一行内显示，再次和overflow属性搭配使用

咸鱼前端—CSS高级技巧相关推荐

咸鱼前端—CSS浮动
咸鱼前端-CSS浮动浮动(float) 浮动特性布局流程浮动(float) 元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定位置的过程. 在CSS中,通过float ...
咸鱼前端—CSS盒子模型
咸鱼前端-CSS盒子模型盒子模型盒子边框(border) 圆角边框(CSS3) 内边距(padding) 外边距(margin) 盒子阴影盒子模型所谓盒子模型就是把HTML页面中的元素看作是一 ...
咸鱼前端—CSS初识
咸鱼前端-CSS初识 CSS的发展历程 CSS 网页的美容师 CSS初识引入CSS样式表(书写位置) CSS样式规则 CSS的发展历程从HTML被发明开始,样式就以各种形式存在.不同的浏览器结合它 ...
咸鱼前端—CSS选择器
咸鱼前端-CSS选择器选择器标签选择器(元素选择器) 类选择器多类名选择器 id选择器通配符选择器选择器要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素.在CSS中,执行这 ...
咸鱼前端—CSS字体外观
咸鱼前端-CSS字体&外观字体样式属性 font-size:字号大小 font-family:字体 font-weight:字体粗细 font-style:字体风格 CSS外观属性 colo ...
咸鱼前端—html初识
咸鱼前端-html HTML 初识 HTML骨架格式 HTML标签分类 HTML标签关系字符集 HTML标签的语义化 HTML 初识 HTML(英文Hyper Text Markup Languag ...
css高级技巧(精灵图、字体图标、三角、vertical-align属性、溢出文字省略号等)
css高级技巧 1.精灵图 1.1.为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送图片,造成服务器请求压力过大,这将大大降低页面的加载 ...
咸鱼前端—HTML标签难点整理1
咸鱼前端-HTML标签整理1 字符集 div span标签图像标签img 链接标签锚点定位字符集 <meta charset="UTF-8" /> utf-8是目 ...
好程序员web前端CSS选择符（选择器）:表示要定义样式的对象
好程序员web前端CSS选择符(选择器):表示要定义样式的对象 1) 元素选择符/类型选择符(element选择器 ) 如:div{width:100px; height:100px; backgro ...

咸鱼前端—CSS高级技巧

咸鱼前端—CSS高级技巧

鼠标样式cursor

轮廓 outline

防止拖拽文本域resize

垂直对齐 vertical-align

溢出的文字隐藏

咸鱼前端—CSS高级技巧相关推荐

最新文章

热门文章