css用户界面样式
所谓的界面样式,就是更改一些用户操作样式辟谷更改用户的鼠标样式,表单轮廓等,但是比如滚动条的样式收到啦更高浏览器的抵御,因此我们就放弃了,防止表单被拖拽
css用户界面样式
所谓的界面样式,就是更改一些用户操作样式辟谷更改用户的鼠标样式,表单轮廓等,但是比如滚动条的样式收到啦更高浏览器的抵御,因此我们就放弃了,防止表单被拖拽
鼠标样式cursor
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
cursor:default小白|pointer小手|move移动|text文本
尽量不要使用hand因为火狐并不支持pointerIE6以上都支持的尽量用
显示效果
轮廓outline
轮廓outline
是绘制与元素周围的一条线,我们瓶都是去掉的 最直接的是outline: 0
cinput type=“text” style=“outline”:0;‘
防止有拽文本域resize
resize:none 这个单词可以防止 火狐谷歌的步伐浏览器随意的摆动 文本域
右下角可以摆拽:<textarea></textarea>
右下角不可以拖拽:<textarea style="resize": none;"></textarea>
vertical-align垂直对齐
以前我们讲过让带有宽度的块级元素注重对齐,是margin:0 auto
以前我们讲过让文字注重对齐是text-align:center
但是我们从没有讲过有垂直居中的属性 verrical-align垂直对齐,这个看上去很美好的一个属性,实际有着不可接受的脾气公式:
vertical-align:baseline|top|middle|bottom
vertical-align不影响块级元素的内容对齐,他只针对于行内元素或者行内块元素,特别是行内块元素,通常用来控制图片和表单域文字的对齐
图片、表单和文字对齐
所以我们知道、我么可以通过vertical-align控制图片和文字的垂直关系了,默认的图片和文字基线对齐
去除图片底册空白缝隙
有个很重要特性你更注意,图片或者表单等取行内块元素,他的底线会和腹肌合资的基线对齐,这样会造成一个问题,就是图片底册会有一个空白缝隙
解决的方法
给img vertical-align:middle|top等等。让图片不要喝基线对齐
10给img添加display:block:转换为块级元素就会出现任何问题了
溢出文字隐藏
word-break自动换行
normal 使用浏览器默认的换行规则
break-all 允许在单词内换行
keep-all只能在半角空格或连字符换行(主要处理英语单词)
white-space
white-space设置或检测对象内文本显示方式,通常我们使用于强制一行显示内容
normal 默认处理方式
nowrap 强制在同一行内显示所有文章,直到文本结束或者遭遇br标签对象才换行
text-overflow 文字溢出
text-overflow:clip|elipsis
设置或检测是否使用一个省略号(......)标记溢出的内容
clip:不显示省略标记而是简单地裁掉
ellpsis 党对象内文本溢出时显示省略符号
注意:一定要首先强制一行内显示,再次和overflow属性搭配使用