29个常用的CSS小技巧汇总

1.清除图片下方出现几像素的空白间隙方法1： 复制代码代码如下:img{display:block;} 方法2： 复制代码代码如下:img{vertical-align:top;} 除了top值，还可以设置为text-top | middle | bottom | text-bottom，甚至特定的<length>和<percentage>值都可以 方法3： 复制代码代码如下:#test{font-size:0;line-height:0;}#test为img的父元素 2.让文本垂直对齐文本输入框 方法： 复制代码代码如下:input{vertical-align:middle;} 3.让单行 【CSS小技巧详解】 在网页设计中，CSS（层叠样式表）是不可或缺的一部分，它负责控制网页元素的样式和布局。以下是一些常见的CSS小技巧，这些技巧可以帮助你更高效地实现各种视觉效果。 1. **清除图片下方空白间隙**： 当图片与文字一起显示时，有时会因为行内元素的默认对齐方式产生额外的空白。可以通过以下三种方法解决： - `display:block`：将图片元素设置为块级元素，消除间隙。 - `vertical-align:top`：调整图片的垂直对齐方式，可以设置为`text-top`、`middle`、`bottom`等。 - `font-size:0;line-height:0`：设置父元素的字体大小和行高为0，消除因字体大小产生的间隙。 2. **文本垂直对齐**： 要使文本与输入框在垂直方向对齐，可以使用`vertical-align:middle`属性，将输入框的垂直对齐方式设置为中间。 3. **单行文本垂直居中**： 如果你想让单行文本在固定高度的容器内垂直居中，可以将容器的高度和文本的行高设为相同值。 4. **超链接状态样式控制**： CSS提供了四种链接伪类选择器：`a:link`、`a:visited`、`a:hover`和`a:active`，按照LVHA（Love Hates）的顺序定义，可以分别设置未访问、已访问、鼠标悬停和活动状态的链接颜色。 5. **IE滚动条颜色设置**： 在标准模式下，IE不支持直接在body上设置滚动条颜色。解决方案是将样式应用于`html`标签，如示例所示，定义不同部分的滚动条颜色。 6. **文本强制不换行**： 若要使文本不换行并在一行内显示，可以设置元素的`white-space`属性为`nowrap`，这将阻止文本在边界处自动换行。 7. **文本溢出显示省略号**： 使用`overflow:hidden`截断超出容器宽度的文本，再配合`text-overflow:ellipsis`，可以在末尾显示省略号，但注意Firefox 5.0及更早版本不支持此方法。 8. **长字符串自动换行**： 当遇到连续的长字符串无法正常换行时，可以设置`word-wrap:break-word`，这允许单词内部的换行。 9. **清除浮动**： 清除浮动是解决子元素浮动后父元素高度塌陷的问题。常见的清除方法有： - `clear:both`：在浮动元素后面添加一个带有`clear:both`的空元素。 - `display:block;zoom:1;overflow:hidden;`：在父元素上设置，适用于大多数情况。 - `zoom:1;content:"";clear:both;`：利用伪元素`:after`来清除浮动。 10. **定义手型光标**： 设置元素的`cursor`属性为`pointer`，可以使其鼠标指针显示为手型，适用于链接或可点击元素，确保所有浏览器兼容性。 11. **水平垂直居中**： 对于已知高度的容器，可以使用绝对定位，结合`top`、`left`、`margin`负值实现水平垂直居中。 12. **未知尺寸图片自适应**： 为了让未知尺寸的图片在已知宽高的容器内自适应，可以使用百分比宽度和高度，或者设置`max-width:100%`和`max-height:100%`，图片将按比例缩放保持原始纵横比。 以上这些CSS小技巧在日常开发中非常实用，能帮助提升代码效率和网页效果。掌握它们，可以使你的CSS技能更加精进。