目录
1.CSS用户界面
1.1更改鼠标样式
（图源12-用户界面-鼠标样式_哔哩哔哩_bilibili）
语法规范：
<li style=" cursor: xx "> 内容 </li>或者放在css文件里也可以，如下：
1.2表单轮廓
默认状态下，在我们选中文本框时，文本框会出现一个轮廓线，具体表现为最外一圈会有淡淡的蓝色。想要除去这个轮廓线可以使用outline: none / 0 ; 的形式。
1.3防止拖拽文本域resize
用textarea可以创建一个文本域，但是默认状态下的文本域是可以通过右下角的斜杠来拖动的，为了避免实际应用中破坏排版，一般需要将文本域设置为无法拖动。
语法规范：
textarea {resize：none；}
textarea在使用时有一个注意点，就是在textarea标签内部如果换行，则在页面显示的文本域中会自动生成缩进，和上间距，否则就没有：
换行后：
2. vertical-align属性应用
2.1实现垂直居中
vertical-align属性经常用于设置位于同一水平线上的图片或者表单（行内块元素）和文字垂直对齐。但是它只针对行内元素和行内块元素生效。
（图源同上）
图片和文字在默认情况下是基线对齐，这也是学成在线案例中右上角的用户名和图片没有垂直居中的原因。
只需对headerbox4这个盒子里的img进行修改就可以了，如下：
注意这个属性的对象只能是行内块元素或行内元素，由于img本身是行内块元素，因此如果调用的图片是以img形式存在的，只需直接对img修改样式即可；但是如果图片是以背景图片的形式存在，则必须将存储这个背景图片的盒子转换为行内块元素（图片有宽高，因此不能转为行内元素），再对这个盒子修改样式。
2.2去除图片底部默认空隙
第一种方法实际上就是让图片不采用基线对齐的方式，这样就不会留空；第二种方式是因为块级元素不存在基线，因此基线对齐失效，故不留空。
3.溢出文字自动用省略号显示
3.1单行文本溢出
3.2多行文本溢出
这种方法有点缺陷，就是当字体一共有3行（3行都在盒子内）并且盒子规定高度的情况下，那么第二行的末尾会出现省略号，但是第三行中的内容依然存在，因此在使用这种方法时需要F12调整一下盒子高度，然后在css文件里面修改盒子的高度，使其只显示前两行。或者直接不给盒子设置高度，靠内容撑开也可以实现省略。一般而言，这部分的实现可以由后台人员解决。
4.常见布局技巧
4.1margin负值实现细线边框合并
前面当我们学习表格table的时候，有提到细线边框的合并，当时是使用border-collapse属性，但是这个在div盒子中无效，但是实际工作中往往是div使用得更多，那么要实现div盒子之间的细线边框合并怎么办呢？可以通过给margin赋负值来实现，例如边框为1px，那么右边的盒子的margin-left：-1px就可以压在左边盒子的右边框上，从而实现边框合并。
普通地考虑的话，所有盒子都向左移动1px，那么两个盒子之间的空隙应该还是不变的，但实际上在运行时，是先生成最左边的盒子，然后再生成第二个盒子，第二个盒子由于浮动而紧贴第一个盒子的右边框，然后再向左移动1px，这样就合并了边框。
使用这种方法，尝试实现鼠标经过方框，使方框的四边变成橙色。
（图源同上）
第一眼貌似这个问题并不难，但是实际操作后会发现，如果在hover里只写border：1px solid orange ，鼠标经过时会发现边框的右边被下一个边框压住了，导致边框的右边没法显示橙色。
为了解决这个问题，我们可以使用以前学的定位里的知识，来提高当前盒子的层级。相对定位可以压在其它盒子上，而且保留原位置，不会影响其它盒子的位置，是一个很好的选择。如果已经有定位了，就调整z-index即可。
4.2文字围绕浮动元素
当遇到这种样式的页面时，制作的方法很简单，无非就是在一个大盒子里放2个盒子，其中一个放图片，一个放文字，但这样有些复杂，可以利用文字环绕浮动元素的特性来制作。 因此我们只需设定一个大盒子，在盒子里放一个盒子用于存放图片（记得设为浮动），然后直接写文字内容即可。
4.3行内块的巧妙运用
给父元素添加text-align：center，那么这个父元素里的所有行内元素以及行内块元素都会水平居中。因此实现以上样式只需一个div包含许多<a>，将a转换成行内块元素。
4.4CSS三角
如图的价格表中，出现了一个梯形，实际上可以视作一个长方形加一个三角形。因此按照前面学习的三角知识，只需令border-top和border-left的颜色为红色，border-right和border-bottom的颜色为transparent就可以。但是这样写出来的三角形是等腰直角三角形，如果要使三角形改变角度，就需要适当的调整某些边框的粗细。例如在这里需要让右下角的三角形变得细长一些，首先需要令border-bottom：0px ：
然后可以令border-top变粗，这样它会挤压右边的三角形，这样就能让右边的三角形变细长了。
其实连border-left也可以去掉，效果与上面类似。
222
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
