用户界面样式
所谓的界面样式,就是更改一些用户炒作,比如更改用户的鼠标样式。单是比如滚动条的样式改动受到了很多浏览器的地址。
1.1 鼠标样式cursor
设置或检索在对象上移动的鼠标指针采用何种系统预定的光标形状
cursor:default 小白| pointer 小手|move移动|text 文本
尽量不要用hand 因为火狐不支持
1.2 轮廓 outline
是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用
outline :outline-color| outline-style |outline-width
但是我们都不关系可以设置多少,平时我们都是去掉
最直接的写法是:outline :0
1.3 防止拖拽
resize:none 这个单词可以防止火狐谷歌等浏览器随意的拖动问文本
Vertical-align 垂直对齐
一起我们讲过没有宽度的块级元素居中对齐,是margin 0 auto
以前我们还讲过文字居中对齐,是text-align:center
但是我们重来没有讲过垂直居中的属性。vertical-align 垂直对齐,
vertical-align:baseline |top |middle|bottom
设置或检索对象内容的垂直对齐方式
vertical-algin 不印象块级元素中的内通对齐,它只针对于行内元素或者行内块元素,特别是内行块元素,通常用来控制图片和表单文字的对齐。
去除图片低侧空白缝隙
有个很重要特性你要记住,图盘或者表单灯行内块元素,他的底线会和父级盒子的基线对齐。这样会造成一个问题,就是图片底侧会有一个空白的缝隙。
解决的方法是:
1 给img添加display:block 转换为块级元素就不会存在问题。
2 最好的解决方案 img:vertical-align:top
word-break自动换行
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行
keep-all 只能在半角空格或连字符处换行。
white-sapce
white-space 设置或检索对象内文本显示方式。同城我们使用于强制一行显示内容。
normal 默认处理方式
norwrap:强制在同一行内显示所有文本,知道文本解释或者遇到br标签对才换行
text-overflow 文字溢出
text-overflow:clip|ellipsis
clip:不显示省略标记(...),是简单的裁剪
ellipsis:当队形内文本溢出显示省略标记(...)
注意一定要首先强制一行内显示,再次和overflow 属性搭配使用。