29个常见的CSS提示

这篇文章推荐了29个常用的CSS小技巧，全部用到我的项目中，经过检测代码，可以放心使用。
1。在清晰的图片下面出现一些空白的像素。
方法1：
复制代码代码如下所示：
img {显示：块；}
方法2：
复制代码代码如下所示：
img {垂直对齐：顶；}
除了顶部的值，也可以设置文本顶部中间底部的文字底| | |，甚至具体的值可以是

方法3：
复制代码代码如下所示：
#测试{字体大小：0；线高度：0；}
#测试IMG的父元素
2。允许文本垂直对齐文本输入框。

方法uff1a
复制代码代码如下所示：
输入{垂直对齐：中间；}
三.让单行文本垂直放置在容器中。
方法uff1a

复制代码代码如下所示：
#测试{身高：25px；线高度：25px；}

只需要设置的行的高度等于容器的高度。

4。使超链接与访问前和访问前的颜色不同，并保留访问后的悬停和主动效果。
方法uff1a

复制代码代码如下所示：
一：链接{颜色：# 03c；}
一：参观{颜色：# 666；}
答：悬停{颜色：# F30；}
一：主动{颜色：# C30；}
超链接样式设置在l-v-h-a秩序，可速记的爱（喜欢）恨（讨厌）

5。IE为什么在标准模式下不能设置滚动条的颜色
方法uff1a
复制代码代码如下所示：
html {
scrollbar-3dlight-color：# 999；
滚动条darkshadow颜色：# 999；
滚动条的颜色：# FFF；
滚动条阴影颜色：# Eee；
Scrollbar-arrow-color:#000;
面部颜色：# DDD；
滚动条轨道颜色：# Eee；
滚动条底色：# DDD；
}
定义原本身上的标签选择器的滚动条颜色风格

6。使文本溢出边界不改变为一行强制
方法uff1a
复制代码代码如下所示：
#测试{宽度：150px；空格：nowrap；}
的容器和nowrap白色空间的宽度，其效果类似于标签

7。使文本溢出边界显示为椭圆。
方法（但不支持此方法firefox5.0）：
复制代码代码如下所示：
#测试{宽度：150px；空格：nowrap；溢出：隐藏；文本溢出：省略；}
首先需要强制将文本显示在一行中，然后通过溢出溢出文本：隐藏并用文本溢出截断：省略号将截断显示为省略号的文本。

8。连续长串自动线变换
方法uff1a

复制代码代码如下所示：
#测试{宽度：150px；自动换行：断词；}
单词换行的中断字值允许单词中的行的变化。

9。清除浮动
方法1：
复制代码代码如下所示：
#测试{明确：两；}
#测试是一个浮动元素的下一个同级元素
方法2：
复制代码代码如下所示：
#测试{显示：块；变焦：1；溢出：隐藏；}
#测试是一个浮动元素的父元素。变焦：1也可以用固定宽度或高度取代
方法3：
复制代码代码如下所示：
#测试{变焦：1；}
#测试：在{显示：块；明确：两；能见度：隐藏；身高：0；内容：；}
#测试是一个浮动元素的父元素
10。定义鼠标指针的光标形状是手动类型，与所有浏览器兼容。
方法uff1a
复制代码代码如下所示：
#测试{光标：指针；}
如果光标设置为手动，则只支持IE和Opera，而手动是非标准属性值。

11。让容器的已知高度在页面中水平垂直。
方法uff1a
复制代码代码如下所示：
#测试{位置：绝对的；最高：50%；左：50%；宽度：200px；高度：200px；保证金：- 00 - 100px 100px；}
了解更多：已知的高度容器在页面中是水平垂直的

12。让未知大小的图片垂直居中在已知的宽容器中。
方法uff1a

复制代码代码如下所示：
#测试{显示：表格单元格；*显示：块；*位置：相对；宽度：200px；高度：200px；文本对齐：中心；垂直对齐方式：居中；}
#检验P { *位置：绝对的；*顶：50%；*左：50%；保证金：0；}
#检验P img { *位置：相对；顶：50%；*左：50%；垂直对齐方式：居中；}
#测试IMG的祖父节点，P是IMG的家长。了解更多：如何对未知大小图片垂直居中
13。设置跨度的宽度和高度（即如何设置内联元素的宽度）
方法uff1a

复制代码代码如下所示：
跨{显示：块；宽度：200px；身高：100px；}
要将内联元素设置为宽的高度，只需要将其定义为块级或内联块级元素，因此有很多方法可以设置显示属性、浮点属性或位置属性等。

14。为元素定义许多不同的CSS规则
方法uff1a
复制代码代码如下所示：
，{颜色：# F00；}
背景：# EEE。B {；}
C {背景：# CCC；}
试验1
试验2
多个规则用空格分隔，只有类可以同时使用多个规则，id不能。

15。让元素填充整个页面
方法uff1a
复制代码代码如下所示：
HTML，正文{高度：100%；边缘：0；}
#测试{高度：100%；}
16。让某个元素从窗口的右下角和左4边各10个像素。
方法uff1a
复制代码代码如下所示：
HTML，正文{高度：100%；边缘：0；}
html { _padding：10px；}
#测试{位置：绝对；顶部：10px；右：10px；底：10px；左：10px；_position：静；_height：100%；}
17。删除超链接虚线框。
方法uff1a
复制代码代码如下所示：
{大纲：无；}
IE7和更早的浏览器不支持轮廓属性，它需要通过模糊（）方法实现JS，如<<一起来=this.blur（）；…

18。容器是透明的，内容是不透明的。
方法1：
复制代码代码如下所示：
。外{宽度：200px；高度：200px；背景：# 000；过滤器：α（不透明度20）；不透明度：2；}。
。内{宽度：200px；高度：200px；边距：- 200px；}

我是不透明的内容。
其原理是容器层和内容层和层次，容器层是透明的，内容层通过负边距或位置绝对定位覆盖容器层。

方法2：
复制代码代码如下所示：
。外{宽度：200px；高度：200px；背景：RGBA（0,0,0，。2）；背景：# 000 9；过滤器：α（不透明度20） 9；}
.外部.内部{位置：相对 9；}

我是不透明的内容。
先进的浏览器使用RGBA颜色值直接；IE浏览器允许子节点进行相对定位，定义容器的透明度，其结果也可以实现。

19。把整个页面放在中间
方法uff1a
复制代码代码如下所示：
正文{文本对齐：中心；}
# test2 {宽度：960px；保证金：0汽车；文本对齐：左；}
定义文本对齐体为中心的价值将让IE5.5会在中间

20。为什么容器的背景颜色不能显示为什么容器不能适应内容的内容
方法uff1a

清除浮动
这通常是由漂浮的缺失造成的，所以在调试第一时间应考虑是否有未清除的地方浮起。

21。做一个1像素的薄边框
方法1：
复制代码代码如下所示：
#测试{边界崩溃：崩溃；边框1px solid # DDD；}
#试验，#测试TD { border: 1px solid # DDD；}

姓名Joy Du
26岁的时候
方法2：
复制代码代码如下所示：
#测试{边界间距：1px；背景：# DDD；}
#试验TR {背景：# FFF；}

姓名Joy Du
26岁的时候
IE7和更早的浏览器不支持间隔性的边界，但可以通过表格标签属性取代，单元格间距。

22。使页面文字行始终保持N倍字体的基调
方法uff1a
复制代码代码如下所示：
身体{线高度：N；}
注意不要向n添加单元。更多了解：如何保持页面文本行作为N次字体大小的基调

23。标准模式标准模式和奇怪的模式怪异模式下的盒子模型的差异
方法uff1a

标准模式：元素宽度=宽度+填充+边框
怪异模式：元素宽度=宽度
信息，看到CSS3属性框大小

24。图形变换的利弊分析与方法
想法1：使用文本缩进的负值将内容从容器中移动。
复制代码代码如下所示：
。test1 {宽度：200px；身高：50px；文本缩进：- 9999px；背景：# EEE URL（*。PNG）没有重复；}
图的内容的负缩进
该方法结构简单，无理想位置：1。由于使用不同的场景，所以缩进的负值可能不一样，公众不容易抽象风格；2。当元素为链接时，在非IE框中将不完整；3。如果元素被定义为内联或内联块，不同的浏览器会有更多

想法2：使用显示：无或可见性：隐藏以隐藏内容；
复制代码代码如下所示：
。测试{宽度：200px；身高：50px；背景：# EEE URL（*。PNG）没有重复；}
测试范围{可视性：隐藏；或显示：无*