用户界面样式

一、鼠标样式cursor

default默认
pointer小手
move移动
text文本
not-allowed禁止

二、轮廓线outline

去掉轮廓线
1.outline: 0;
2.outline: none;

三、防止拖拽文本域resize

resize: none;

四、vertical-align

实现图片与表单（行内块元素）或者文字对齐，只能是行内块元素或者行内元素
vertical-align: top;
vertical-align: middle;
vertical-align: baseline;(默认对齐)
vertical-align: bottom;

五、解决图片底部默认空白缝隙问题

给图片添加vertical-align: top|middle|bottom;
把图pain转换为块级元素

六、溢出的文字用省略号代替

单行文本：

1.先强制一行显示文本:white-space: nowrap;
2.超出的部分隐藏overflow: hidden;
3.文字用省略号代替超出部分:text-overflow: ellipsis;

多行文本：

1.overflow: hidden;text-overflow: ellipsis;
2.弹性伸缩盒子模型显示:display: -webkit-box;
限制在一个块元素显示的文本的行数:-webkit-lie-clamp: 2;
设置或检索伸缩盒对象的子元素的排列方式:-webkit-box-orient: vertical;

七、常见布局技巧

1.margin负值运用

让每个盒子向左移动-1px,压住相邻边框
鼠标经过某个盒子时，提升当前盒子的层级即可，如果没有定位则添加相对定位，如果有定位则添加z-index

2.文字围绕浮动元素运用:

给图片添加浮动，浮动不会压住文字，即可实现

3.行内块元素运用:

给父盒子加text-align: center;所有元素都会实现水平对齐

导航栏

实际开发中，我们不会用链接a，而是用li包含链接(li+a)的做法
1.li+a语义更清晰
2.直接用a搜索引擎有堆砌关键字嫌疑，从而影响网站排名
3.让导航栏在一行中显示，给li加浮动，因为li是块级元素，需要在一行中显示
4.导航栏可以不加宽度，将来继续添加其他文字
5.因为导航栏里的文字不一样多，所以最好给链接a加padding值撑开盒子，而不是指定宽度

三角

div {
width:0;
height:0;
line-height:0;
font-size:0;
border:50px solid transparent;
border-left-color:pink
}

三角巧妙运用

得到右侧的不对称的三角形i
/把上边框宽度调大/
border-top:100px solid transparent;
border-right:50px solid skyblue;
/左边和下边的边框宽度设置为0/
border-bottom:0 solid blue;
border-left:0 solid green;
或者
width:0;
height:0;
border-color:transparent red transparent transparent;
border-style:solid;
border-width:22px 8px 00;